feat(in-line-alert): S2 migration by cdransf · Pull Request #3659 · adobe/spectrum-css

cdransf · 2025-04-08T16:12:16Z

Description

CSS-710

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.

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

<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:

<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

Validation steps

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2025-04-08T16:12:20Z

🦋 Changeset detected

Latest commit: 178bbe3

The changes in this PR will be included in the next version bump.

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

github-actions · 2025-04-08T16:26:16Z

File metrics

Summary

Total size: 1.38 MB^*

Package	Size	Minified	Gzipped
inlinealert	9.80 KB	9.37 KB	1.53 KB

inlinealert

Filename	Head	Minified	Gzipped	Compared to base
index.css	9.80 KB	9.37 KB	1.53 KB	🔴 ⬆ 1.68 KB
metadata.json	5.58 KB	-	-	🔴 ⬆ 1.29 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2025-04-08T16:26:56Z

🚀 Deployed on https://pr-3659--spectrum-css.netlify.app

castastrophe

Added a few questions, loving this update

aramos-adobe · 2025-04-18T23:08:21Z

@cdransf In-line alert migration looks beautiful! I love the colors and the CSS is well structured. The only thing I'd probably add is the Link child component. It looks like every border variant the Link is accent-color-default, bold and subtle matches the content's type color tokens

…header story control

…bold treatments

…tors

… visibility

Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

…ld + markup examples

jawinn

Nice work! One last update and then I'm good to approve.

Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com>

cdransf self-assigned this Apr 8, 2025

cdransf added size-5 L ~30-42hrs; lots of effort or complexity, most of a sprint needed to complete. skip_vrt Add to a PR to skip running VRT (but still pass the action) labels Apr 8, 2025

cdransf changed the base branch from main to spectrum-two April 8, 2025 16:12

cdransf force-pushed the cdransf/s2-in-line-alert-migration branch 2 times, most recently from 6c58d44 to 5938b6a Compare April 8, 2025 19:57

cdransf marked this pull request as ready for review April 14, 2025 16:34

cdransf requested review from 5t3ph, castastrophe and marissahuysentruyt and removed request for castastrophe April 14, 2025 16:34

cdransf force-pushed the cdransf/s2-in-line-alert-migration branch 4 times, most recently from d488b5f to c3d9962 Compare April 16, 2025 20:08

castastrophe suggested changes Apr 16, 2025

View reviewed changes

Comment thread .changeset/big-jars-pump.md Outdated

Comment thread components/inlinealert/index.css Outdated

Comment thread components/inlinealert/stories/inlinealert.stories.js

Comment thread components/inlinealert/stories/template.js Outdated

cdransf force-pushed the cdransf/s2-in-line-alert-migration branch from 6e044d6 to 24aa091 Compare April 16, 2025 23:56

cdransf requested review from castastrophe and jawinn April 17, 2025 15:59

cdransf force-pushed the cdransf/s2-in-line-alert-migration branch from f124162 to 178bbe3 Compare April 18, 2025 16:00

aramos-adobe reviewed Apr 18, 2025

View reviewed changes

Comment thread components/inlinealert/stories/inlinealert.test.js

aramos-adobe reviewed Apr 18, 2025

View reviewed changes

Comment thread components/inlinealert/stories/inlinealert.stories.js Outdated

aramos-adobe reviewed Apr 18, 2025

View reviewed changes

Comment thread components/inlinealert/stories/inlinealert.stories.js Outdated

cdransf force-pushed the cdransf/s2-in-line-alert-migration branch from 178bbe3 to 9444ae6 Compare April 21, 2025 15:28

cdransf requested a review from aramos-adobe April 21, 2025 16:47

cdransf and others added 14 commits May 1, 2025 10:32

chore(in-line-alert): add link variant, control and test grid variants

c07dd09

chore(in-line-alert): add style variants to docs view

90e6089

chore(in-line-alert): refactor and significantly reduce styles

839b9b7

chore(in-line-alert): update docs + customize treatment titles

e71db2a

chore(in-line-alert): update WHC styles; drop button mods; add w/out …

4bce073

…header story control

fix(in-line-alert): revise WHC colors and restore borders for subtle/…

13b8300

…bold treatments

fix(in-line-alert): reorder custom properties; drop unnecessary selec…

00769b4

…tors

fix(in-line-alert): set static variations on links and buttons ensure…

cc20e02

… visibility

fix(in-line-alert): icon alignment

b9ee4f2

fix(in-line-alert): add high contrast border width property

59d53ad

fix(in-line-alert): use req'd font stacks

0cbf276

Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

fix(in-line-alert): border treatment links + buttons

a8477e1

fix(in-line-alert): show icon with text when no header is displayed

25f72ab

chore(in-line-alert): update changelog with usage notes for subtle/bo…

24725ff

…ld + markup examples

cdransf force-pushed the cdransf/s2-in-line-alert-migration branch from 0c22272 to 24725ff Compare May 1, 2025 17:32

jawinn suggested changes May 1, 2025

View reviewed changes

Comment thread components/inlinealert/index.css

Update components/inlinealert/index.css

c904aa7

Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com>

cdransf requested a review from jawinn May 1, 2025 18:38

fix(in-line-alert): combine border width declarations

613854e

jawinn approved these changes May 1, 2025

View reviewed changes

cdransf merged commit 83b2fe9 into spectrum-two May 1, 2025
12 checks passed

cdransf deleted the cdransf/s2-in-line-alert-migration branch May 1, 2025 19:04

This was referenced May 16, 2025

chore(swatch,menu,swatchgroup): fix reverted metadata assets #3752

Merged

chore: merge latest updates from main #3777

Merged

castastrophe mentioned this pull request Jul 25, 2025

ci: chromatic runs for S2 [CSS-1233] #4070

Merged

3 tasks

castastrophe mentioned this pull request Aug 6, 2025

fix: minor linting updates #4113

Merged

11 tasks

This was referenced Aug 27, 2025

chore(popover): wrapper placement in story #4173

Closed

feat(storybook): chromatic a11y testing #4180

Closed

chore: updating lint-staged file inheritance order #4193

Closed

castastrophe mentioned this pull request Oct 22, 2025

feat(badge): remove modifiers from the API [SWC-1264] #4283

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

feat(in-line-alert): S2 migration#3659
cdransf merged 23 commits into
spectrum-twofrom
cdransf/s2-in-line-alert-migration

cdransf commented Apr 8, 2025 •

edited

Loading

Uh oh!

changeset-bot Bot commented Apr 8, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 8, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 8, 2025 •

edited

Loading

Uh oh!

castastrophe left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aramos-adobe commented Apr 18, 2025

Uh oh!

jawinn left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

cdransf commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

New mods

Removed mods

New custom properties

Removed custom properties

Validation steps

Screenshots

To-do list

Uh oh!

changeset-bot Bot commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

inlinealert

Uh oh!

github-actions Bot commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

castastrophe left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aramos-adobe commented Apr 18, 2025

Uh oh!

jawinn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cdransf commented Apr 8, 2025 •

edited

Loading

changeset-bot Bot commented Apr 8, 2025 •

edited

Loading

github-actions Bot commented Apr 8, 2025 •

edited

Loading

github-actions Bot commented Apr 8, 2025 •

edited

Loading