-
Notifications
You must be signed in to change notification settings - Fork 198
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(alertbanner): migrate to spectrum 2 (#2652)
* feat(alertbanner): start migration to spectrum two Migrates the component to spectrum two. - Theme files are removed, and their custom properties integrated into the main index.css. - Renames misspelled mod custom property (noted in docs) - Simplifies background color styles by changing a single custom property per variant, as done on other components. * feat(alertbanner): spectrum 2 spacing and mod name cleanup Adjust some spacings to match the Spectrum 2 spec spacing. And renames some mods so they are more consistent with current naming conventions, and their purpose is more clear. === Update spacing to match the Spectrum 2 spec === One issue with the S1 version was that there was too much space between the text and the button, when the button wrapped to the next line. And there was a different token defined for the space from the bottom edge to the text, and vertically between the button and the text. This helps resolve this by moving some of the spacing to padding on the AlertBanner-body, and subtracting this value from some of the other custom properties. Along with using both column-gap and row-gap properties. === adjust storybook template spacing and decorator === Improves spacing in Storybook template, especially the Chromatic only template. Decorator and wrapper styles are modeled after those used in Action button, so they look more similar. Previously the layout was a little cramped and the "detail" elements were missing their margins because they were display inline. * docs(alertbanner): custom storybook docs page and template updates Creates a custom MDX docs page in Storybook for the Alert banner component. And reworks the stories and chromatic-only templates a little to facilitate and increase coverage. Includes Storybook VRT coverage for the max width changes in PR #2762 . Tests the display of the alert banner when in a container larger than and smaller than its max-inline-size. * chore(alertbanner): linter updates and update mods - Add stylelint disable line comments for some false positives caught by the linter. - Re-generate mods file * docs(alertbanner): use stories and template from main Use the stories and updated template from main, with a few things left out that are not yet available in the spectrum-two branch. * feat(alertbanner): support no close button or no action button Adds spacing to the end of the alert banner when the close button is not displayed, or both the close button and action button are not displayed. These are allowed combinations of options. * feat(alertbanner): use spec defined line-height token * feat(alertbanner): add font-family token and mod * feat(alertbanner): add cjk line-height * feat(alertbanner): remove unnecessary styles for end element Remove styles for .spectrum-AlertBanner-end, which were no longer doing anything after the removal of the divider.
- Loading branch information
Showing
5 changed files
with
350 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| --- | ||
| "@spectrum-css/alertbanner": major | ||
| --- | ||
|
|
||
| #### Spectrum 2 migration | ||
|
|
||
| Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed. | ||
|
|
||
| The following changes have been made to the mod custom properties: | ||
|
|
||
| - `--mod-alert-banner-size` was renamed to `--mod-alert-banner-inline-size` | ||
| - `--mod-alert-banner-neutral-background` was previously misspelled. The mod `--mod-alert-banner-background` was also added, which will take precendence over the variant background mods. | ||
| - `--mod-alert-banner-top-text` was renamed to `--mod-alert-banner-top-to-text` | ||
| - `--mod-alert-banner-top-icon` was renamed to `--mod-alert-banner-top-to-icon` | ||
| - `--mod-alert-banner-bottom-text` was renamed to `--mod-alert-banner-bottom-to-text` | ||
| - `--mod-alert-banner-start-edge` was renamed to `--mod-alert-banner-inline-start-to-content` | ||
| - `--mod-alert-banner-edge-to-button` was renamed to `--mod-alert-banner-block-edge-to-button` | ||
| - The spacing on either side of the close button is now controlled by two separate mods; `--mod-alert-banner-close-button-to-inline-end` and `--mod-alert-banner-close-button-to-content`. The previous `--mod-alert-banner-close-button-spacing` has been removed. | ||
| - A new mod `--mod-alert-banner-inline-end-to-content` was added, which handles the inline end spacing when the alert banner does not have a close button. Or when there is neither a close button or an action button. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,28 @@ | ||
| | Modifiable custom properties | | ||
| | ---------------------------------------------- | | ||
| | `--mod-alert-banner-bottom-text` | | ||
| | `--mod-alert-banner-close-button-spacing` | | ||
| | `--mod-alert-banner-edge-to-button` | | ||
| | `--mod-alert-banner-edge-to-divider` | | ||
| | `--mod-alert-banner-font-color` | | ||
| | `--mod-alert-banner-font-size` | | ||
| | `--mod-alert-banner-icon-size` | | ||
| | `--mod-alert-banner-icon-to-text` | | ||
| | `--mod-alert-banner-informative-background` | | ||
| | `--mod-alert-banner-min-height` | | ||
| | `--mod-alert-banner-negative-background` | | ||
| | `--mod-alert-banner-netural-background` | | ||
| | `--mod-alert-banner-size` | | ||
| | `--mod-alert-banner-start-edge` | | ||
| | `--mod-alert-banner-text-to-button-horizontal` | | ||
| | `--mod-alert-banner-text-to-button-vertical` | | ||
| | `--mod-alert-banner-text-to-divider` | | ||
| | `--mod-alert-banner-top-icon` | | ||
| | `--mod-alert-banner-top-text` | | ||
| | Modifiable custom properties | | ||
| | ----------------------------------------------- | | ||
| | `--mod-alert-banner-background` | | ||
| | `--mod-alert-banner-block-edge-to-button` | | ||
| | `--mod-alert-banner-bottom-to-text` | | ||
| | `--mod-alert-banner-close-button-to-content` | | ||
| | `--mod-alert-banner-close-button-to-inline-end` | | ||
| | `--mod-alert-banner-font-color` | | ||
| | `--mod-alert-banner-font-family` | | ||
| | `--mod-alert-banner-font-size` | | ||
| | `--mod-alert-banner-icon-size` | | ||
| | `--mod-alert-banner-icon-to-text` | | ||
| | `--mod-alert-banner-informative-background` | | ||
| | `--mod-alert-banner-inline-end-to-content` | | ||
| | `--mod-alert-banner-inline-size` | | ||
| | `--mod-alert-banner-inline-start-to-content` | | ||
| | `--mod-alert-banner-line-height` | | ||
| | `--mod-alert-banner-max-inline-size` | | ||
| | `--mod-alert-banner-min-height` | | ||
| | `--mod-alert-banner-negative-background` | | ||
| | `--mod-alert-banner-neutral-background` | | ||
| | `--mod-alert-banner-text-margin-block-end` | | ||
| | `--mod-alert-banner-text-margin-block-start` | | ||
| | `--mod-alert-banner-text-to-button-horizontal` | | ||
| | `--mod-alert-banner-text-to-button-vertical` | | ||
| | `--mod-alert-banner-top-to-close-button` | | ||
| | `--mod-alert-banner-top-to-icon` | | ||
| | `--mod-alert-banner-top-to-text` | |
Oops, something went wrong.