diff options
Diffstat (limited to 'browser/components/storybook/stories/fxview-tab-list.stories.md')
| -rw-r--r-- | browser/components/storybook/stories/fxview-tab-list.stories.md | 14 |
1 files changed, 10 insertions, 4 deletions
diff --git a/browser/components/storybook/stories/fxview-tab-list.stories.md b/browser/components/storybook/stories/fxview-tab-list.stories.md index 9e6c59a89d..ae3d39d72a 100644 --- a/browser/components/storybook/stories/fxview-tab-list.stories.md +++ b/browser/components/storybook/stories/fxview-tab-list.stories.md @@ -28,7 +28,7 @@ And used as follows: With context menu: ```html <fxview-tab-list - class="with-context-menu" + secondaryActionClass="options-button" .dateTimeFormat=${"relative"} .hasPopup=${"menu"} .maxTabsLength=${this.maxTabsLength} @@ -80,7 +80,11 @@ You'll need to pass along some of the following properties: * `primaryL10nId` (**Optional**) - The l10n id to be used for the primary action element. This fluent string should ONLY define a `.title` attribute to describe the link element in each row. * `primaryL10nArgs` (**Optional**) - The l10n args you can optionally pass for the primary action element * `secondaryL10nId` (**Optional**) - The l10n id to be used for the secondary action button. This fluent string should ONLY define a `.title` attribute to describe the secondary button in each row. + * `tertiaryL10nId` (**Optional**) - The l10n id to be used for the tertiary action button. This fluent string should ONLY define a `.title` attribute to describe the secondary button in each row. * `secondaryL10nArgs` (**Optional**) - The l10n args you can optionally pass for the secondary action button + * `tertiaryL10nArgs` (**Optional**) - The l10n args you can optionally pass for the tertiary action button + * `secondaryActionClass` (**Optional**) - The class used to style the secondary action button. `options-button` or `dismiss-button` + * `tertiaryActionClass` (**Optional**) - The class used to style the tertiary action button. `options-button` or `dismiss-button` * `tabElement` (**Optional**) - The MozTabbrowserTab element for the tab item. * `sourceClosedId` (**Optional**) - The closedId of the closed window the tab is from if applicable. * `sourceWindowId` (**Optional**) - The SessionStore id of the window the tab is from if applicable. @@ -93,10 +97,12 @@ You'll need to pass along some of the following properties: ### Notes -* In order to keep this as generic as possible, the icon for the secondary action button will NOT have a default. You can supply a `class` attribute to an instance of `fxview-tab-list` in order to apply styles to things like the icon for the secondary action button. In the above example, I added a class `"with-context-menu"` to `fxview-tab-list`, so I can update the button's icon by using: +* In order to keep this as generic as possible, the icon for the secondary action button will NOT have a default. You can supply a `class` attribute to an instance of `fxview-tab-list` in order to apply styles to things like the icon for the secondary action button. In the above example, I added a `secondaryActionClass` `"options-button"` to `fxview-tab-list`, so I can update the button's icon by using: ```css - fxview-tab-list.with-context-menu::part(secondary-button) { - background-image: url("chrome://global/skin/icons/more.svg"); + .fxview-tab-row-button { + &.options-button { + background-image: url("chrome://global/skin/icons/more.svg"); + } } ``` * You'll also need to define functions for the `fxview-tab-list-primary-action` and `fxview-tab-list-secondary-action` listeners in order to add functionality to the primary element and the secondary button. |