Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(alertbanner): migrate to spectrum 2 #2652

Draft
wants to merge 4 commits into
base: spectrum-two
Choose a base branch
from
+389 −188
Draft

feat(alertbanner): migrate to spectrum 2 #2652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
967ea5b
feat(alertbanner): start migration to spectrum two
jawinn Apr 3, 2024
5e92f83
feat(alertbanner): spectrum 2 spacing and mod name cleanup
jawinn Apr 9, 2024
89e5832
docs(alertbanner): custom storybook docs page and template updates
jawinn May 16, 2024
031d8a9
chore(alertbanner): linter updates and update mods
jawinn May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
155 changes: 79 additions & 76 deletions components/alertbanner/index.css
View file
Open in desktop
Expand Up @@ -9,105 +9,108 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/

@import "./themes/express.css";

.spectrum-AlertBanner {
--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
--spectrum-alert-banner-size: var(--spectrum-alert-banner-width);
--spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);

/* spacing */
--spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
--spectrum-alert-banner-start-edge: var(--spectrum-spacing-300);
--spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- internal reference below; todo solve for this edge case in the plugin */
--spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300);
--spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon);
--spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text);
--spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text);

/* colors */
--spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default);
--spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default);
--spectrum-alert-banner-font-color: var(--spectrum-white);

/* settings for nested Divider */
--mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider));
--mod-divider-vertical-height: auto;
--mod-divider-vertical-align: stretch;

/* settings for nested Button */
--mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button));
--mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider));
--mod-button-margin-left: auto;

/* settings for nested CloseButton */
--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
--mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing));
--mod-closebutton-align-self: flex-start;
}

.spectrum-AlertBanner {
display: none;
justify-content: space-between;
inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
background-color: var(--mod-alert-banner-netural-background, var(--spectrum-alert-banner-netural-background));
border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);

&.is-open {
display: flex;
}
--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
--spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
--spectrum-alert-banner-inline-size: auto;
--spectrum-alert-banner-font-size: var(--spectrum-font-size-100);

/* @todo replace with font-size specific line-height token when one is available.
Results in a line-height of 18px with font-size-100. */
--spectrum-alert-banner-line-height: 1.28571428; /* stylelint-disable-line number-max-precision -- increased precision gives more accurate computed line-height */
--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */

/* spacing */
--spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300);
--spectrum-alert-banner-inline-start-to-content: var(--spectrum-spacing-300);
--spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300);
--spectrum-alert-banner-block-edge-to-button: var(--spectrum-spacing-200);
--spectrum-alert-banner-close-button-to-content: var(--spectrum-spacing-300); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */
--spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */

/* Top and bottom margins for AlertBanner-text. Subtracts the vertical spacing that is already included in the
padding-block of its parent AlertBanner-body element. */
--spectrum-alert-banner-text-margin-block-start: max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
--spectrum-alert-banner-text-margin-block-end: max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));

/* colors */
--spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default));
--spectrum-alert-banner-font-color: var(--spectrum-white);

/* settings for nested Close button */
--mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-to-content, var(--spectrum-alert-banner-close-button-to-content)) var(--mod-alert-banner-close-button-to-inline-end, var(--spectrum-alert-banner-close-button-to-inline-end));
--mod-closebutton-margin-top: var(--mod-alert-banner-top-to-close-button, var(--spectrum-alert-banner-block-edge-to-button));
--mod-closebutton-align-self: flex-start;
}

.spectrum-AlertBanner--info {
background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background));
--spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default));
}

.spectrum-AlertBanner--negative {
background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background));
--spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default));
}

.spectrum-AlertBanner {
display: none;
justify-content: space-between;
inline-size: var(--mod-alert-banner-inline-size, var(--spectrum-alert-banner-inline-size));
max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height));
color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));
background-color: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background));
border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent);

&.is-open {
display: flex;
}
}

.spectrum-AlertBanner-body {
inline-size: 100%;
display: flex;

/* --mod-* for alert-banner-text-to-button-vertical will only accept values larger than alert-banner-edge-to-bottom, as gap only recognizes positive values */
gap: max(calc(var(--mod-alert-banner-text-to-button-vertical, var(--spectrum-alert-banner-text-to-button-vertical)) - var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button))), 0px);
flex-wrap: wrap;
align-items: center;
margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge));
inline-size: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;

/* Inline spacing between text and button, only when the button has not wrapped to the next line. */
column-gap: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));

/* Block spacing between text and button, when the button has wrapped to the next line. Takes into
account the existing margins on the text. */
row-gap: max(var(--mod-alert-banner-text-to-button-vertical, 0px), var(--spectrum-alert-banner-text-to-button-vertical) - var(--spectrum-alert-banner-text-margin-block-end));

padding-block: var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button));
margin-inline-start: var(--mod-alert-banner-inline-start-to-content, var(--spectrum-alert-banner-inline-start-to-content));
}

.spectrum-AlertBanner-content {
display: flex;
display: flex;
flex-grow: 1;
}

.spectrum-AlertBanner-end {
display: flex;
align-items: center;
display: flex;
align-items: center;
}

.spectrum-AlertBanner-icon {
inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon));
margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));
flex-shrink: 0;
--mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size));
margin-block-start: calc(var(--mod-alert-banner-top-to-icon, var(--spectrum-alert-banner-top-to-workflow-icon)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)));
margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text));
flex-shrink: 0;
}

.spectrum-AlertBanner-text {
margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text));
margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text));
margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal));
margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start));
margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end));
}

@media (forced-colors: active) {
.spectrum-AlertBanner {
--highcontrast-alert-banner-border-color: CanvasText;
--highcontrast-alert-banner-border-width: var(--spectrum-border-width-100);
}
.spectrum-AlertBanner {
--highcontrast-alert-banner-border-color: CanvasText;
--highcontrast-alert-banner-border-width: var(--spectrum-border-width-100);
}
}
24 changes: 19 additions & 5 deletions components/alertbanner/metadata/alertbanner.yml
View file
Open in desktop
@@ -1,5 +1,24 @@
name: Alert banner
description: Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.
SpectrumSiteSlug: https://spectrum.adobe.com/page/alert-banner/
sections:
- name: Custom Properties API
description: |
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/alertbanner/metadata/mods.md">here</a>.
- name: Migration Guide
description: |
### Version 2.0.0
#### Spectrum 2 release
Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed.
The following mod custom properties have been changed:
- `--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.
examples:
- id: alertbanner
name: Neutral
Expand All @@ -12,7 +31,6 @@ examples:
</div>
</div>
<div class="spectrum-AlertBanner-end">
<div class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--vertical spectrum-Divider--staticWhite"></div>
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="close">
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Cross200" />
Expand All @@ -32,7 +50,6 @@ examples:
</button>
</div>
<div class="spectrum-AlertBanner-end">
<div class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--vertical spectrum-Divider--staticWhite"></div>
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="close">
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Cross200" />
Expand All @@ -52,7 +69,6 @@ examples:
</button>
</div>
<div class="spectrum-AlertBanner-end">
<div class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--vertical spectrum-Divider--staticWhite"></div>
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="close">
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Cross200" />
Expand All @@ -77,7 +93,6 @@ examples:
</button>
</div>
<div class="spectrum-AlertBanner-end">
<div class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--vertical spectrum-Divider--staticWhite"></div>
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="close" >
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Cross200" />
Expand All @@ -102,7 +117,6 @@ examples:
</button>
</div>
<div class="spectrum-AlertBanner-end">
<div class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--vertical spectrum-Divider--staticWhite"></div>
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" aria-label="close">
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Cross200" />
Expand Down
47 changes: 26 additions & 21 deletions components/alertbanner/metadata/mods.md
View file
Open in desktop
@@ -1,21 +1,26 @@
| 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-size` |
| `--mod-alert-banner-icon-size` |
| `--mod-alert-banner-icon-to-text` |
| `--mod-alert-banner-informative-background` |
| `--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` |
38 changes: 38 additions & 0 deletions components/alertbanner/stories/alertbanner.mdx
View file
Open in desktop
@@ -0,0 +1,38 @@
import { Canvas, Meta, Description, Title } from '@storybook/blocks';

import * as AlertBannerStories from './alertbanner.stories';

<Meta of={AlertBannerStories} title="Docs" />

<Title of={AlertBannerStories} />
<Description of={AlertBannerStories} />

It will occupy all the available horizontal space until it reaches its maximum allowed width.

## Semantic Variants

An alert banner always has a semantic meaning and uses semantic colors. The available options are neutral, informative, and negative.

### Neutral

<Canvas of={AlertBannerStories.Neutral} />

### Informative

<Canvas of={AlertBannerStories.Informative} />

### Negative

<Canvas of={AlertBannerStories.Negative} />

## Actionable and dismissable

An alert banner ideally provides a way for a user to address an issue in-line with an action. It can have both an icon-only close button and a button with a contextual action to take. There should never be more than one button with a contextual action in an alert banner.

<Canvas of={AlertBannerStories.ActionableOptions} sourceState="none" />

## Text overflow behavior

When the text is too long for the available horizontal space, it wraps to form another line. In actionable alert banners, the button moves below the text.

<Canvas of={AlertBannerStories.TextOverflow} sourceState="none" />