diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml index d9911d49880..26aee3d9605 100644 --- a/components/actionbutton/metadata/actionbutton.yml +++ b/components/actionbutton/metadata/actionbutton.yml @@ -8,6 +8,9 @@ description: | sections: - name: Migration Guide description: | + ### T-shirt sizing + Action Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-ActionButton--size*` class. + ### Action Button is now a separate component Action Button has been moved to the [Action Button](actionbutton.html) component. diff --git a/components/button/metadata/button-cta.yml b/components/button/metadata/button-cta.yml index cd6eb1955a9..a98339d6a7e 100644 --- a/components/button/metadata/button-cta.yml +++ b/components/button/metadata/button-cta.yml @@ -2,6 +2,11 @@ name: Button - CTA status: Verified description: The call to action button communicates strong emphasis and is reserved for encouraging critical actions. SpectrumSiteSlug: https://spectrum.adobe.com/page/button/ +sections: + - name: Migration Guide + description: | + ### T-shirt sizing + Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. examples: - id: button-cta name: Sizing diff --git a/components/button/metadata/button-over-background.yml b/components/button/metadata/button-over-background.yml index 4573120d54a..6d4c376af81 100644 --- a/components/button/metadata/button-over-background.yml +++ b/components/button/metadata/button-over-background.yml @@ -2,6 +2,22 @@ name: Button - Over Background status: Verified description: 'When a button needs to be placed on top of a colored background or a visual, use the over background button. In order to implement this button, you must set the CSS color property of a parent element to the same value as the background the button is placed against.' SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Over-background +sections: + - name: Migration Guide + description: | + ### T-shirt sizing + Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. + + ### Change workflow icon size + + Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: + + | Action Button Class | Workflow Icon Class | + | -------------------------- | --------------------------------- | + | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` | + | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` | + | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | + | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | examples: - id: button-over-background name: Over background diff --git a/components/button/metadata/button-primary.yml b/components/button/metadata/button-primary.yml index 55e924e5807..fb8e1441745 100644 --- a/components/button/metadata/button-primary.yml +++ b/components/button/metadata/button-primary.yml @@ -3,10 +3,21 @@ status: Verified description: The primary button is used for medium emphasis. SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Primary sections: -- name: Migration Guide - description: | - ### Change workflow icon size to medium - Replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. + - name: Migration Guide + description: | + ### T-shirt sizing + Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. + + ### Change workflow icon size + + Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: + + | Action Button Class | Workflow Icon Class | + | -------------------------- | --------------------------------- | + | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` | + | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` | + | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | + | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | examples: - id: button-primary name: Sizing diff --git a/components/button/metadata/button-secondary.yml b/components/button/metadata/button-secondary.yml index c5514123280..5c05824fec6 100644 --- a/components/button/metadata/button-secondary.yml +++ b/components/button/metadata/button-secondary.yml @@ -3,10 +3,21 @@ status: Verified description: The secondary button is for low emphasis. SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Secondary sections: -- name: Migration Guide - description: | - ### Change workflow icon size to medium - Replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. + - name: Migration Guide + description: | + ### T-shirt sizing + Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. + + ### Change workflow icon size + + Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: + + | Action Button Class | Workflow Icon Class | + | -------------------------- | --------------------------------- | + | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` | + | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` | + | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | + | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | examples: - id: button-secondary name: Sizing diff --git a/components/button/metadata/button-warning.yml b/components/button/metadata/button-warning.yml index 4681ef10f1b..3e4b5cab5a1 100644 --- a/components/button/metadata/button-warning.yml +++ b/components/button/metadata/button-warning.yml @@ -3,10 +3,21 @@ status: Verified description: The negative button is for high emphasis of negative or destructive actions. SpectrumSiteSlug: https://spectrum.adobe.com/page/button/#Negative sections: -- name: Migration Guide - description: | - ### Change workflow icon size to medium - Replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. + - name: Migration Guide + description: | + ### T-shirt sizing + Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. + + ### Change workflow icon size + + Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: + + | Action Button Class | Workflow Icon Class | + | -------------------------- | --------------------------------- | + | `.spectrum-Button--sizeS` | `.spectrum-Icon--sizeS` | + | `.spectrum-Button--sizeM` | `.spectrum-Icon--sizeM` | + | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | + | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | examples: - id: button-warning name: Sizing