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

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

.changeset/big-jars-pump.md

components/inlinealert/index.css

components/inlinealert/stories/inlinealert.stories.js

components/inlinealert/stories/template.js

components/inlinealert/stories/inlinealert.test.js

components/inlinealert/stories/inlinealert.stories.js

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

…ather than selectors

…e variants

…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.

components/inlinealert/index.css

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 castastrophe, marissahuysentruyt and 5t3ph 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 requested changes Apr 16, 2025

View reviewed changes

.changeset/big-jars-pump.md Outdated Show resolved Hide resolved

components/inlinealert/index.css Outdated Show resolved Hide resolved

components/inlinealert/stories/inlinealert.stories.js Show resolved Hide resolved

components/inlinealert/stories/template.js Outdated Show resolved Hide resolved

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

components/inlinealert/stories/inlinealert.test.js Show resolved Hide resolved

aramos-adobe reviewed Apr 18, 2025

View reviewed changes

components/inlinealert/stories/inlinealert.stories.js Show resolved Hide resolved

aramos-adobe reviewed Apr 18, 2025

View reviewed changes

components/inlinealert/stories/inlinealert.stories.js Outdated Show resolved Hide resolved

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 20 commits May 1, 2025 10:32

chore(in-line-alert): allow only subtle or bold

f5d7597

fix(in-line-alert): correct changelog to showcase custom properties r…

6e4906f

…ather than selectors

chore(in-line-alert): additional granular mods for background colors

5de8ce9

fix(in-line-alert): resolve issues with button colors in bold + subtl…

ae89bde

…e variants

chore(in-line-alert): add subtle and bold variants to testing grid

5f6f10a

chore(in-line-alert): add subtle + bold closable tests

14317e8

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

components/inlinealert/index.css Outdated Show resolved Hide resolved

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

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!

Uh oh!

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

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

Uh oh!

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!

Uh oh!

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