Skip to content

feat(in-line-alert): S2 migration #3659

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

Merged
cdransf merged 23 commits into from
May 1, 2025
Merged

feat(in-line-alert): S2 migration #3659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
4d1469b
feat(in-line-alert): S2 migration
cdransf Apr 7, 2025
f5d7597
chore(in-line-alert): allow only subtle or bold
cdransf Apr 9, 2025
6e4906f
fix(in-line-alert): correct changelog to showcase custom properties r…
cdransf Apr 16, 2025
5de8ce9
chore(in-line-alert): additional granular mods for background colors
cdransf Apr 17, 2025
ae89bde
fix(in-line-alert): resolve issues with button colors in bold + subtl…
cdransf Apr 17, 2025
5f6f10a
chore(in-line-alert): add subtle and bold variants to testing grid
cdransf Apr 17, 2025
14317e8
chore(in-line-alert): add subtle + bold closable tests
cdransf Apr 21, 2025
c07dd09
chore(in-line-alert): add link variant, control and test grid variants
cdransf Apr 21, 2025
90e6089
chore(in-line-alert): add style variants to docs view
cdransf Apr 21, 2025
839b9b7
chore(in-line-alert): refactor and significantly reduce styles
cdransf Apr 29, 2025
e71db2a
chore(in-line-alert): update docs + customize treatment titles
cdransf Apr 29, 2025
4bce073
chore(in-line-alert): update WHC styles; drop button mods; add w/out …
cdransf Apr 30, 2025
13b8300
fix(in-line-alert): revise WHC colors and restore borders for subtle/…
cdransf Apr 30, 2025
00769b4
fix(in-line-alert): reorder custom properties; drop unnecessary selec…
cdransf Apr 30, 2025
cc20e02
fix(in-line-alert): set static variations on links and buttons ensure…
cdransf Apr 30, 2025
b9ee4f2
fix(in-line-alert): icon alignment
cdransf May 1, 2025
59d53ad
fix(in-line-alert): add high contrast border width property
cdransf May 1, 2025
0cbf276
fix(in-line-alert): use req'd font stacks
cdransf May 1, 2025
a8477e1
fix(in-line-alert): border treatment links + buttons
cdransf May 1, 2025
25f72ab
fix(in-line-alert): show icon with text when no header is displayed
cdransf May 1, 2025
24725ff
chore(in-line-alert): update changelog with usage notes for subtle/bo…
cdransf May 1, 2025
c904aa7
Update components/inlinealert/index.css
cdransf May 1, 2025
613854e
fix(in-line-alert): combine border width declarations
cdransf May 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions .changeset/big-jars-pump.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
---
`@spectrum-css/inlinealert`: major
---

#### S2 migration in-line alert

This migrates the `in-line alert` component to Spectrum 2. Custom properties have been updated and added per the design specification.

Subtle and bold treatments have been added for each badge variant.
Comment thread
cdransf marked this conversation as resolved.

To use the subtle treatment, you will need to apply the `spectrum-InLineAlert--subtle` class:

```html
<div
class="spectrum-InLineAlert spectrum-InLineAlert--info spectrum-InLineAlert--subtle"
>
<div class="spectrum-InLineAlert-header">
Info variant with subtle fill
<svg
focusable="false"
aria-hidden="true"
role="img"
class=" spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon "
id="icon-52w58"
aria-label="InfoCircle"
>
<title id="InfoCircle">Info Circle</title>
<use xlink:href="#icon-info-circle" href="#icon-info-circle"></use>
</svg>
</div>
<div class="spectrum-InLineAlert-content">This is an alert.</div>
</div>
```

To use the bold treatment (which is reserved for high-attention alerts only), you will need to apply the `spectrum-InLineAlert--bold` class:

```html
<div
class="spectrum-InLineAlert spectrum-InLineAlert--info spectrum-InLineAlert--bold"
>
<div class="spectrum-InLineAlert-header">
Info variant with bold fill
<svg
focusable="false"
aria-hidden="true"
role="img"
class=" spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon "
id="icon-mty2x"
aria-label="InfoCircle"
>
<title id="InfoCircle">Info Circle</title>
<use xlink:href="#icon-info-circle" href="#icon-info-circle"></use>
</svg>
</div>
<div class="spectrum-InLineAlert-content">This is an alert.</div>
</div>
```

Because subtle and bold treatments draw a similar level of attention you should choose only one to use consistently within a single product.

##### New mods

`--mod-inlinealert-border-and-icon-color-neutral`
`--mod-inlinealert-min-spacing-header-to-icon`
`--mod-inlinealert-spacing-content-link-button`
`--mod-inlinealert-spacing-header-content`

##### Removed mods

`--mod-inlinealert-spacing-header-content-button`
`--mod-inlinealert-spacing-header-to-icon`

##### New custom properties

`--spectrum-inlinealert-min-spacing-header-to-icon`
`--spectrum-inlinealert-spacing-content-link-button`
`--spectrum-inlinealert-spacing-header-content`

##### Removed custom properties

`--spectrum-inlinealert-spacing-header-content-button`
`--spectrum-inlinealert-spacing-header-to-icon`
64 changes: 41 additions & 23 deletions components/inlinealert/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,33 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-InLineAlert",
".spectrum-InLineAlert--info",
".spectrum-InLineAlert--info .spectrum-InLineAlert-icon",
".spectrum-InLineAlert--negative",
".spectrum-InLineAlert--negative .spectrum-InLineAlert-icon",
".spectrum-InLineAlert--notice",
".spectrum-InLineAlert--notice .spectrum-InLineAlert-icon",
".spectrum-InLineAlert--positive",
".spectrum-InLineAlert--positive .spectrum-InLineAlert-icon",
".spectrum-InLineAlert-content",
".spectrum-InLineAlert-footer",
".spectrum-InLineAlert-footer:empty",
".spectrum-InLineAlert-header",
".spectrum-InLineAlert-icon"
".spectrum-InLineAlert-icon",
".spectrum-InLineAlert.spectrum-InLineAlert--bold",
".spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice)",
".spectrum-InLineAlert.spectrum-InLineAlert--info",
".spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--bold",
".spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--subtle",
".spectrum-InLineAlert.spectrum-InLineAlert--negative",
".spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--bold",
".spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--subtle",
".spectrum-InLineAlert.spectrum-InLineAlert--neutral",
".spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--bold",
".spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--subtle",
".spectrum-InLineAlert.spectrum-InLineAlert--notice",
".spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--bold",
".spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--subtle",
".spectrum-InLineAlert.spectrum-InLineAlert--positive",
".spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--bold",
".spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle",
".spectrum-InLineAlert.spectrum-InLineAlert--subtle"
],
"modifiers": [
"--mod-inlinealert-background-color",
"--mod-inlinealert-border-and-icon-color",
"--mod-inlinealert-border-and-icon-color-info",
"--mod-inlinealert-border-and-icon-color-negative",
"--mod-inlinealert-border-and-icon-color-notice",
"--mod-inlinealert-border-and-icon-color-positive",
"--mod-inlinealert-border-radius",
"--mod-inlinealert-border-width",
"--mod-inlinealert-content-color",
Expand All @@ -40,18 +46,15 @@
"--mod-inlinealert-heading-line-height",
"--mod-inlinealert-icon-size",
"--mod-inlinealert-min-inline-size",
"--mod-inlinealert-min-spacing-header-to-icon",
"--mod-inlinealert-spacing-content-link-button",
"--mod-inlinealert-spacing-edge-to-text",
"--mod-inlinealert-spacing-header-content-button",
"--mod-inlinealert-spacing-header-to-icon"
"--mod-inlinealert-spacing-header-content"
],
"component": [
"--spectrum-in-line-alert-minimum-width",
"--spectrum-inlinealert-background-color",
"--spectrum-inlinealert-border-and-icon-color",
"--spectrum-inlinealert-border-and-icon-color-info",
"--spectrum-inlinealert-border-and-icon-color-negative",
"--spectrum-inlinealert-border-and-icon-color-notice",
"--spectrum-inlinealert-border-and-icon-color-positive",
"--spectrum-inlinealert-border-radius",
"--spectrum-inlinealert-border-width",
"--spectrum-inlinealert-content-color",
Expand All @@ -69,39 +72,54 @@
"--spectrum-inlinealert-heading-line-height",
"--spectrum-inlinealert-icon-size",
"--spectrum-inlinealert-min-inline-size",
"--spectrum-inlinealert-min-spacing-header-to-icon",
"--spectrum-inlinealert-spacing-content-link-button",
"--spectrum-inlinealert-spacing-edge-to-text",
"--spectrum-inlinealert-spacing-header-content-button",
"--spectrum-inlinealert-spacing-header-to-icon"
"--spectrum-inlinealert-spacing-header-content"
],
"global": [
"--spectrum-background-layer-2-color",
"--spectrum-black",
"--spectrum-body-color",
"--spectrum-body-line-height",
"--spectrum-body-sans-serif-font-style",
"--spectrum-body-sans-serif-font-weight",
"--spectrum-body-size-s",
"--spectrum-border-width-200",
"--spectrum-component-height-50",
"--spectrum-corner-radius-100",
"--spectrum-corner-radius-700",
"--spectrum-heading-color",
"--spectrum-heading-line-height",
"--spectrum-heading-sans-serif-font-style",
"--spectrum-heading-sans-serif-font-weight",
"--spectrum-heading-size-xxs",
"--spectrum-informative-background-color-default",
"--spectrum-informative-subtle-background-color-default",
"--spectrum-informative-visual-color",
"--spectrum-negative-background-color-default",
"--spectrum-negative-subtle-background-color-default",
"--spectrum-negative-visual-color",
"--spectrum-neutral-background-color-default",
"--spectrum-neutral-subtle-background-color-default",
"--spectrum-neutral-visual-color",
"--spectrum-notice-background-color-default",
"--spectrum-notice-subtle-background-color-default",
"--spectrum-notice-visual-color",
"--spectrum-positive-background-color-default",
"--spectrum-positive-subtle-background-color-default",
"--spectrum-positive-visual-color",
"--spectrum-sans-font-family-stack",
"--spectrum-spacing-100",
"--spectrum-spacing-200",
"--spectrum-spacing-300",
"--spectrum-spacing-400",
"--spectrum-white",
"--spectrum-workflow-icon-size-100"
],
"passthroughs": [],
"high-contrast": [
"--highcontrast-inlinealert-background-color",
"--highcontrast-inlinealert-border-and-icon-color",
"--highcontrast-inlinealert-border-width",
"--highcontrast-inlinealert-content-color",
"--highcontrast-inlinealert-header-color"
]
Expand Down
Loading
Loading