feat(alertbanner): migrate to spectrum 2#2652
Merged
Merged
Conversation
Contributor
|
🚀 Deployed on https://pr-2652--spectrum-css.netlify.app |
Contributor
File metricsSummaryTotal size: 2.74 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
Detailsalertbanner
* Results are not gzipped or minified. * An ASCII character in UTF-8 is 8 bits or 1 byte. |
jawinn
force-pushed
the
jawinn/css-704-s2-alert-banner
branch
from
d005657 to
366139c
Compare
jawinn
commented
Apr 10, 2024
jawinn
commented
Apr 10, 2024
jawinn
commented
Apr 10, 2024
mdt2
reviewed
Apr 10, 2024
Collaborator
mdt2
left a comment
mdt2
left a comment
There was a problem hiding this comment.
This is looking good! I'm excited to see it with the new icons, I think the alignment might look a lot different/better 😁
castastrophe
force-pushed
the
spectrum-two
branch
from
4d9e185 to
a81c712
Compare
Collaborator
rise-erpelding
left a comment
rise-erpelding
left a comment
There was a problem hiding this comment.
This is looking really nice and I don't have a lot to comment on this one other than echoing @mdt2's comments.
If I had to pinpoint one thing that might be improved, this kitchen sink testing preview does look a bit crowded, mainly between the text and alert banners:
I notice that other components (like Button and Action Button) do have a bit more spacing in their testing previews and bringing that to AlertBanner as well might help things feel a bit more uniform.
jawinn
force-pushed
the
jawinn/css-704-s2-alert-banner
branch
from
366139c to
2e91714
Compare
🦋 Changeset detectedLatest commit: bb3c497 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
jawinn
force-pushed
the
jawinn/css-704-s2-alert-banner
branch
from
2e91714 to
ce25a3e
Compare
Collaborator
Author
Agreed! It appears that the Details typography element by default is |
pfulton
force-pushed
the
spectrum-two
branch
3 times, most recently
from
f3dd9ff to
9931a8e
Compare
castastrophe
force-pushed
the
spectrum-two
branch
5 times, most recently
from
6dbc850 to
ae7aedd
Compare
pfulton
force-pushed
the
spectrum-two
branch
2 times, most recently
from
e0e0fd2 to
698e904
Compare
9 tasks
jawinn
force-pushed
the
jawinn/css-704-s2-alert-banner
branch
from
ce25a3e to
89e5832
Compare
Remove styles for .spectrum-AlertBanner-end, which were no longer doing anything after the removal of the divider.
jawinn
force-pushed
the
jawinn/css-704-s2-alert-banner
branch
from
ab87351 to
bb3c497
Compare
castastrophe
approved these changes
Dec 19, 2024
Contributor
castastrophe
left a comment
castastrophe
left a comment
There was a problem hiding this comment.
This is looking great, thank you!
Merged
castastrophe
pushed a commit
that referenced
this pull request
Dec 27, 2024
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Dec 29, 2024
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Dec 29, 2024
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Jan 17, 2025
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Jan 17, 2025
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Jan 21, 2025
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Jan 22, 2025
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 5, 2025
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 7, 2025
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 7, 2025
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 7, 2025
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 11, 2025
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 24, 2025
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 24, 2025
* 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.
castastrophe
pushed a commit
that referenced
this pull request
Feb 25, 2025
* 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.
12 tasks
This was referenced May 16, 2025
3 tasks
11 tasks
This was referenced Aug 27, 2025
14 tasks
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed. Some spacing has been updated to match the specs.
The following changes have been made to the mod custom properties:
--mod-alert-banner-sizewas renamed to--mod-alert-banner-inline-size--mod-alert-banner-neutral-backgroundwas previously misspelled. The mod--mod-alert-banner-backgroundwas also added, which will take precendence over the variant background mods.--mod-alert-banner-top-textwas renamed to--mod-alert-banner-top-to-text--mod-alert-banner-top-iconwas renamed to--mod-alert-banner-top-to-icon--mod-alert-banner-bottom-textwas renamed to--mod-alert-banner-bottom-to-text--mod-alert-banner-start-edgewas renamed to--mod-alert-banner-inline-start-to-content--mod-alert-banner-edge-to-buttonwas renamed to--mod-alert-banner-block-edge-to-button--mod-alert-banner-close-button-to-inline-endand--mod-alert-banner-close-button-to-content. The previous--mod-alert-banner-close-button-spacinghas been removed.--mod-alert-banner-inline-end-to-contentwas 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.To-do after merge into
spectrum-two:CSS-704
How and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation steps
Regression testing
Validate:
Screenshots
WIP
To-do list