refactor!: use :global() for custom styles (#1940)

* Prefix custom class selectors with `bx--` (primarily used in custom UI Shell components)
* Use `:global` scope so that selector names are not hashed
This commit is contained in:
metonym 2024-03-23 13:11:44 -07:00 committed by GitHub
commit d5a11489f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 70 additions and 49 deletions

View file

@ -1624,12 +1624,12 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :--------------------------------------------------------------------- |
| -- | Yes | -- | -- |
| closeIcon | No | -- | <code>&lt;svelte:component this="{closeIcon}" size="{20}" /&gt;</code> |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |
| text | No | -- | <code>{#if text}&lt;span&gt;{text}&lt;/span&gt;{/if}</code> |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :--------------------------------------------------------------------------------------------------- |
| -- | Yes | -- | -- |
| closeIcon | No | -- | <code>&lt;svelte:component this="{closeIcon}" size="{20}" /&gt;</code> |
| icon | No | -- | <code>&lt;svelte:component this="{icon}" size="{20}" /&gt;</code> |
| text | No | -- | <code>{#if text}&lt;span class:bx--header\_\_action-text="{true}"&gt;{text}&lt;/span&gt;{/if}</code> |
### Events
@ -1835,9 +1835,9 @@ export interface HeaderSearchResult {
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
| -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}&lt;span&gt; {result.description}&lt;/span&gt;{/if}</code> |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}&lt;span<br /> class:bx--header-search-menu-description="{true}"<br /> &gt; {result.description}&lt;/span<br /> &gt;{/if}</code> |
### Events