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

* feat(in-line-alert): S2 migration

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

* fix(in-line-alert): correct changelog to showcase custom properties rather than selectors

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

* fix(in-line-alert): resolve issues with button colors in bold + subtle variants

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

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

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

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

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

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

* chore(in-line-alert): update WHC styles; drop button mods; add w/out header story control

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

* fix(in-line-alert): reorder custom properties; drop unnecessary selectors

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

* fix(in-line-alert): icon alignment

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

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

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

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

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

* chore(in-line-alert): update changelog with usage notes for subtle/bold + markup examples

* Update components/inlinealert/index.css

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

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

---------

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

Author: 3 people

.changeset/big-jars-pump.md

@@ -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.
+
+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`

components/inlinealert/dist/metadata.json

@@ -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",
@@ -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",
@@ -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"
   ]