chore: updated deprecation notice

Author: Rajdeep Chandra

packages/progress-bar/README.md

@@ -1,12 +1,3 @@
-<sp-alert-banner open variant="info">
-    <div class="spectrum-InLineAlert-header">
-        <span>Deprecated</span>
-    </div>
-    <div class="spectrum-InLineAlert-content">
-        The <code>over-background</code> attribute has been deprecated and will be removed in a future release. Use <code>static-color="white"</code> instead.
-    </div>
-</sp-alert-banner>
-
 ## Overview
 
 An `<sp-progress-bar>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc. By default, progress bars have a blue fill that shows the progress.

packages/progress-bar/package.json

@@ -71,6 +71,7 @@
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
+    "deprecationNotice": "The over-background attribute has been deprecated and will be removed in a future release. Use static-color='white' instead.",
     "sideEffects": [
         "./sp-*.js",
         "./**/*.dev.js"

projects/documentation/content/_includes/partials/deprecation.njk

@@ -1,7 +1,7 @@
 <section
     class="deprecation-container"
 >
-<div id="deprecation" class="spectrum-InLineAlert spectrum-InLineAlert--negative">
+<div id="deprecation" class="spectrum-InLineAlert spectrum-InLineAlert--notice">
         <div class="spectrum-InLineAlert-header">
           Deprecation Warning
           <sp-icon-alert class="spectrum-InLineAlert-icon" dir="ltr" aria-hidden="true"></sp-icon-alert>

projects/documentation/src/components/inline-alert.css

@@ -12,122 +12,53 @@ governing permissions and limitations under the License.
 
 .spectrum-InLineAlert {
     /* Font */
-    --spectrum-inlinealert-heading-font-family: var(
-        --spectrum-sans-font-family-stack
-    );
-    --spectrum-inlinealert-heading-font-weight: var(
-        --spectrum-heading-sans-serif-font-weight
-    );
-    --spectrum-inlinealert-heading-font-style: var(
-        --spectrum-heading-sans-serif-font-style
-    );
+    --spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
+    --spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
     --spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs);
-    --spectrum-inlinealert-heading-line-height: var(
-        --spectrum-heading-line-height
-    );
-
-    --spectrum-inlinealert-content-font-family: var(
-        --spectrum-sans-font-family-stack
-    );
-    --spectrum-inlinealert-content-font-weight: var(
-        --spectrum-body-sans-serif-font-weight
-    );
-    --spectrum-inlinealert-content-font-style: var(
-        --spectrum-body-sans-serif-font-style
-    );
+    --spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height);
+    --spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack);
+    --spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
+    --spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style);
     --spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s);
-    --spectrum-inlinealert-content-line-height: var(
-        --spectrum-body-line-height
-    );
+    --spectrum-inlinealert-content-line-height: var(--spectrum-body-line-height);
 
-    /* Size*/
+    /* Size */
     --spectrum-inlinealert-border-width: var(--spectrum-border-width-200);
     --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100);
     --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100);
-    --spectrum-inlinealert-min-inline-size: var(
-        --spectrum-in-line-alert-minimum-width
-    );
-    --spectrum-inlinealert-header-min-block-size: var(
-        --spectrum-component-height-50
-    );
+    --spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width);
+    --spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50);
 
-    /* Spacing*/
+    /* Spacing */
     --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400);
     --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400);
-    --spectrum-inlinealert-spacing-header-content-button: var(
-        --spectrum-spacing-300
-    );
+    --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300);
 
     /* Color */
-    --spectrum-inlinealert-background-color: var(
-        --spectrum-background-layer-2-color
-    );
-    --spectrum-inlinealert-border-and-icon-color: var(
-        --spectrum-neutral-visual-color
-    );
+    --spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color);
+    --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
     --spectrum-inlinealert-header-color: var(--spectrum-heading-color);
     --spectrum-inlinealert-content-color: var(--spectrum-body-color);
-    --spectrum-inlinealert-border-and-icon-color-info: var(
-        --spectrum-informative-visual-color
-    );
-    --spectrum-inlinealert-border-and-icon-color-positive: var(
-        --spectrum-positive-visual-color
-    );
-    --spectrum-inlinealert-border-and-icon-color-notice: var(
-        --spectrum-notice-visual-color
-    );
-    --spectrum-inlinealert-border-and-icon-color-negative: var(
-        --spectrum-negative-visual-color
-    );
+    --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color);
+    --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color);
+    --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color);
+    --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color);
 }
 
 .spectrum-InLineAlert {
     position: relative;
-
     display: inline-block;
     box-sizing: border-box;
-    min-inline-size: var(
-        --mod-inlinealert-min-inline-size,
-        var(--spectrum-inlinealert-min-inline-size)
-    );
-
-    padding-block: var(
-        --mod-inlinealert-spacing-edge-to-text,
-        var(--spectrum-inlinealert-spacing-edge-to-text)
-    );
-    padding-inline: var(
-        --mod-inlinealert-spacing-edge-to-text,
-        var(--spectrum-inlinealert-spacing-edge-to-text)
-    );
-
-    border-block-width: var(
-        --mod-inlinealert-border-width,
-        var(--spectrum-inlinealert-border-width)
-    );
-    border-inline-width: var(
-        --mod-inlinealert-border-width,
-        var(--spectrum-inlinealert-border-width)
-    );
+    min-inline-size: var(--mod-inlinealert-min-inline-size, var(--spectrum-inlinealert-min-inline-size));
+    padding-block: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
+    padding-inline: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
+    border-block-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width));
+    border-inline-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width));
     border-style: solid;
-    border-radius: var(
-        --mod-inlinealert-border-radius,
-        var(--spectrum-inlinealert-border-radius)
-    );
-
-    background-color: var(
-        --highcontrast-inlinealert-background-color,
-        var(
-            --mod-inlinealert-background-color,
-            var(--spectrum-inlinealert-background-color)
-        )
-    );
-    border-color: var(
-        --highcontrast-inlinealert-border-and-icon-color,
-        var(
-            --mod-inlinealert-border-and-icon-color,
-            var(--spectrum-inlinealert-border-and-icon-color)
-        )
-    );
+    border-radius: var(--mod-inlinealert-border-radius, var(--spectrum-inlinealert-border-radius));
+    background-color: var(--highcontrast-inlinealert-background-color, var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color)));
+    border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)));
 }
 
 @media (forced-colors: active) {
@@ -143,107 +74,39 @@ governing permissions and limitations under the License.
     display: flex;
     align-items: center;
     justify-content: space-between;
-    /* Minimum space between header and icon */
-    gap: var(
-        --mod-inlinealert-spacing-header-to-icon,
-        var(--spectrum-inlinealert-spacing-header-to-icon)
-    );
 
-    font-weight: var(
-        --mod-inlinealert-heading-font-weight,
-        var(--spectrum-inlinealert-heading-font-weight)
-    );
-    font-family: var(
-        --mod-inlinealert-heading-font-family,
-        var(--spectrum-inlinealert-heading-font-family)
-    );
-    font-style: var(
-        --mod-inlinealert-heading-font-style,
-        var(--spectrum-inlinealert-heading-font-style)
-    );
-    font-size: var(
-        --mod-inlinealert-heading-font-size,
-        var(--spectrum-inlinealert-heading-font-size)
-    );
-    line-height: var(
-        --mod-inlinealert-heading-line-height,
-        var(--spectrum-inlinealert-heading-line-height)
-    );
+    /* Minimum space between header and icon */
+    gap: var(--mod-inlinealert-spacing-header-to-icon, var(--spectrum-inlinealert-spacing-header-to-icon));
+    font-weight: var(--mod-inlinealert-heading-font-weight, var(--spectrum-inlinealert-heading-font-weight));
+    font-family: var(--mod-inlinealert-heading-font-family, var(--spectrum-inlinealert-heading-font-family));
+    font-style: var(--mod-inlinealert-heading-font-style, var(--spectrum-inlinealert-heading-font-style));
+    font-size: var(--mod-inlinealert-heading-font-size, var(--spectrum-inlinealert-heading-font-size));
+    line-height: var(--mod-inlinealert-heading-line-height, var(--spectrum-inlinealert-heading-line-height));
     text-transform: none;
-
-    min-block-size: var(
-        --mod-inlinealert-header-min-block-size,
-        var(--spectrum-inlinealert-header-min-block-size)
-    );
-
-    color: var(
-        --highcontrast-inlinealert-header-color,
-        var(
-            --mod-inlinealert-header-color,
-            var(--spectrum-inlinealert-header-color)
-        )
-    );
+    min-block-size: var(--mod-inlinealert-header-min-block-size, var(--spectrum-inlinealert-header-min-block-size));
+    color: var(--highcontrast-inlinealert-header-color, var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color)));
 }
 
 .spectrum-InLineAlert-content {
     display: block;
-    margin-block-start: var(
-        --mod-inlinealert-spacing-header-content-button,
-        var(--spectrum-inlinealert-spacing-header-content-button)
-    );
+    margin-block-start: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button));
     margin-block-end: 0;
     margin-inline-start: 0;
     margin-inline-end: 0;
     padding: 0;
-
     word-wrap: break-word;
-
-    font-weight: var(
-        --mod-inlinealert-content-font-weight,
-        var(--spectrum-inlinealert-content-font-weight)
-    );
-    font-family: var(
-        --mod-inlinealert-content-font-family,
-        var(--spectrum-inlinealert-content-font-family)
-    );
-    font-style: var(
-        --mod-inlinealert-content-font-style,
-        var(--spectrum-inlinealert-content-font-style)
-    );
-    font-size: var(
-        --mod-inlinealert-content-font-size,
-        var(--spectrum-inlinealert-content-font-size)
-    );
-    line-height: var(
-        --mod-inlinealert-content-line-height,
-        var(--spectrum-inlinealert-content-line-height)
-    );
-
-    color: var(
-        --highcontrast-inlinealert-content-color,
-        var(
-            --mod-inlinealert-content-color,
-            var(--spectrum-inlinealert-content-color)
-        )
-    );
+    font-weight: var(--mod-inlinealert-content-font-weight, var(--spectrum-inlinealert-content-font-weight));
+    font-family: var(--mod-inlinealert-content-font-family, var(--spectrum-inlinealert-content-font-family));
+    font-style: var(--mod-inlinealert-content-font-style, var(--spectrum-inlinealert-content-font-style));
+    font-size: var(--mod-inlinealert-content-font-size, var(--spectrum-inlinealert-content-font-size));
+    line-height: var(--mod-inlinealert-content-line-height, var(--spectrum-inlinealert-content-line-height));
+    color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color)));
 }
 
-.spectrum-InLineAlert--negative {
-    border-color: var(
-        --highcontrast-inlinealert-border-and-icon-color,
-        var(
-            --mod-inlinealert-border-and-icon-color-negative,
-            var(--spectrum-inlinealert-border-and-icon-color-negative)
-        )
-    );
+.spectrum-InLineAlert--notice {
+    border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice)));
+}
 
-    .spectrum-InLineAlert-icon {
-        color: var(
-            --highcontrast-inlinealert-border-and-icon-color,
-            var(
-                --mod-inlinealert-border-and-icon-color-negative,
-                var(--spectrum-inlinealert-border-and-icon-color-negative)
-            )
-        );
-    }
+.spectrum-InLineAlert--notice .spectrum-InLineAlert-icon {
+    color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice)));
 }