feat(InlineNotification)!: remove deprecated props from component (#1867

)

- remove `inactive` prop from component

This had been marked as deprecated, so now removing. As of today, it is
not used in any components, and likely too specific a use case to
warrant the additional complexity. Usages of this should be removed from
code and associated designs.

- remove `yield` variant

Removing this variant, as it overlaps with the usage of the "warning"
prop, but is a different color and treatment. For users of the value,
designs and code should move to the "warning" value.

src/components/InlineNotification/InlineNotification.module.css

@@ -51,12 +51,6 @@
   border: var(--eds-theme-border-width) solid
     var(--eds-theme-color-border-utility-warning-strong);
 }
-.inline-notification--yield {
-  @mixin messagingYield;
-
-  border: var(--eds-theme-border-width) solid
-    var(--eds-theme-color-border-grade-revise-strong);
-}
 .inline-notification--subtle {
   background-color: var(--eds-theme-color-background-neutral-default);
 }
@@ -74,14 +68,3 @@
 .inline-notification--full-width-subtle {
   background-color: var(--eds-theme-color-background-neutral-subtle);
 }
-/**
- * Inactive variant of the full width inline notification.
- */
-.inline-notification__icon--inactive {
-  display: none;
-}
-.inline-notification__text--inactive {
-  /* Creates enough space to keep text in the same place. */
-  padding-left: var(--eds-size-3); 
-  color: var(--eds-theme-color-text-neutral-subtle);
-}

src/components/InlineNotification/InlineNotification.stories.tsx

@@ -17,7 +17,7 @@ export default {
       control: {
         type: 'select',
       },
-      options: VARIANTS.filter((item) => item !== 'yield'),
+      options: VARIANTS,
     },
   },
 } as Meta<Args>;
@@ -33,7 +33,7 @@ export const LongText: StoryObj<Args> = {
 };
 
 const getVariants = (optionalArgs: Omit<Args, 'text' | 'variant'> = {}) =>
-  VARIANTS.filter((item) => item !== 'yield').map((variant) => {
+  VARIANTS.map((variant) => {
     return (
       <InlineNotification
         key={variant}

src/components/InlineNotification/InlineNotification.tsx

@@ -4,15 +4,15 @@ import Icon, { type IconName } from '../Icon';
 import Text from '../Text';
 import styles from './InlineNotification.module.css';
 
-export const VARIANTS = ['brand', 'success', 'warning', 'yield'] as const;
+export const VARIANTS = ['brand', 'success', 'warning'] as const;
 
 const variantToIconAssetsMap: {
   [key in Variant]: {
     icon: Extract<
       IconName,
       'info' | 'check-circle' | 'warning' | 'error-inverted'
     >;
-    title: 'info' | 'success' | 'alert' | 'yield';
+    title: 'info' | 'success' | 'alert';
   };
 } = {
   brand: {
@@ -27,10 +27,6 @@ const variantToIconAssetsMap: {
     icon: 'warning',
     title: 'alert',
   },
-  yield: {
-    icon: 'error-inverted',
-    title: 'yield',
-  },
 };
 
 type Variant = (typeof VARIANTS)[number];
@@ -40,16 +36,6 @@ type Props = {
    * CSS class names that can be appended to the component for styling.
    */
   className?: string;
-  /**
-   * Indicates an inactive state for the full width variant where the icon
-   * will be hidden and the text will be lighter.
-   * Overrides variant prop and isStrong prop as a result.
-   * Only to be used with isFullWidth.
-   *
-   * **Deprecated**. This will be removed in the next major version.
-   * @deprecated
-   */
-  inactive?: boolean;
   /**
    * Toggles notification that fills the full width of its container.
    */
@@ -64,8 +50,6 @@ type Props = {
   text: React.ReactNode;
   /**
    * The color variant of the tag.
-   *
-   * **Deprecated**. "Yield" will be removed in the next major version.
    */
   variant: Variant;
 };
@@ -77,38 +61,28 @@ type Props = {
  */
 export const InlineNotification = ({
   className,
-  inactive,
   isFullWidth,
   isStrong,
   text,
   variant,
   ...other
 }: Props) => {
-  if (!isFullWidth && inactive && process.env.NODE_ENV !== 'production') {
-    throw new Error('inactive prop must be used with isFullWidth prop.');
-  }
   const subtle = !isStrong;
   const componentClassName = clsx(
     styles['inline-notification'],
     styles[`inline-notification--${variant}`],
     subtle && styles['inline-notification--subtle'],
     isFullWidth && styles[`inline-notification--full-width`],
-    isFullWidth &&
-      (subtle || inactive) &&
-      styles[`inline-notification--full-width-subtle`],
+    isFullWidth && subtle && styles[`inline-notification--full-width-subtle`],
     className,
   );
 
   const iconClassName = clsx(
     styles['inline-notification__icon'],
     styles[`inline-notification__icon--${variant}`],
-    inactive && styles[`inline-notification__icon--inactive`],
   );
 
-  const textClassName = clsx(
-    styles[`inline-notification__text`],
-    inactive && styles[`inline-notification__text--inactive`],
-  );
+  const textClassName = clsx(styles[`inline-notification__text`]);
 
   return (
     <div className={componentClassName} {...other}>
@@ -119,11 +93,7 @@ export const InlineNotification = ({
         size="1.5rem"
         title={variantToIconAssetsMap[variant].title}
       />
-      <Text
-        as="span"
-        className={textClassName}
-        variant={variant === 'yield' ? 'neutral-medium' : variant}
-      >
+      <Text as="span" className={textClassName} variant={variant}>
         {text}
       </Text>
     </div>