fix!: convert Banner BEM classes to flat class names (#5114)

Renames BEM element classes to flat names scoped by CSS nesting:
- eds-banner__icon    → icon
- eds-banner__message → message
- eds-banner__actions → actions
- eds-banner__dismiss → dismiss

Also restructures banner.css to nest inner element selectors inside
.eds-banner using CSS nesting, matching the convention established by
Button, Chip, Badge, and Avatar.

BREAKING CHANGE: consumers targeting these class names directly in their
own CSS must update to the new flat names.

Author: millus

packages/eds-core-react/src/components/next/Banner/Banner.test.tsx

@@ -294,10 +294,7 @@ describe('Banner (next)', () => {
           <Banner.Message>Test</Banner.Message>
         </Banner>,
       )
-      expect(screen.getByTestId('icon')).toHaveClass(
-        'eds-banner__icon',
-        'custom-icon',
-      )
+      expect(screen.getByTestId('icon')).toHaveClass('icon', 'custom-icon')
     })
 
     it('merges className on Banner.Message', () => {
@@ -308,10 +305,7 @@ describe('Banner (next)', () => {
           </Banner.Message>
         </Banner>,
       )
-      expect(screen.getByTestId('msg')).toHaveClass(
-        'eds-banner__message',
-        'custom-msg',
-      )
+      expect(screen.getByTestId('msg')).toHaveClass('message', 'custom-msg')
     })
 
     it('merges className on Banner.Actions', () => {
@@ -324,7 +318,7 @@ describe('Banner (next)', () => {
         </Banner>,
       )
       expect(screen.getByTestId('actions')).toHaveClass(
-        'eds-banner__actions',
+        'actions',
         'custom-actions',
       )
     })

packages/eds-core-react/src/components/next/Banner/Banner.tsx

@@ -14,7 +14,7 @@ const BannerIcon = forwardRef<HTMLSpanElement, BannerIconProps>(
     return (
       <span
         ref={ref}
-        className={['eds-banner__icon', className].filter(Boolean).join(' ')}
+        className={['icon', className].filter(Boolean).join(' ')}
         {...rest}
       >
         {children}
@@ -28,7 +28,7 @@ const BannerMessage = forwardRef<HTMLParagraphElement, BannerMessageProps>(
     return (
       <p
         ref={ref}
-        className={['eds-banner__message', className].filter(Boolean).join(' ')}
+        className={['message', className].filter(Boolean).join(' ')}
         {...rest}
       >
         {children}
@@ -45,7 +45,7 @@ const BannerActions = forwardRef<HTMLDivElement, BannerActionsProps>(
     return (
       <div
         ref={ref}
-        className={['eds-banner__actions', className].filter(Boolean).join(' ')}
+        className={['actions', className].filter(Boolean).join(' ')}
         data-placement={placement}
         {...rest}
       >
@@ -73,7 +73,7 @@ const BannerComponent = forwardRef<HTMLDivElement, BannerProps>(function Banner(
           variant="ghost"
           icon
           size="small"
-          className="eds-banner__dismiss"
+          className="dismiss"
           aria-label="Dismiss"
           onClick={onDismiss}
         >

packages/eds-core-react/src/components/next/Banner/banner.css

@@ -13,67 +13,67 @@
 
     background: var(--eds-color-bg-surface);
     outline: var(--eds-sizing-stroke-thin) solid var(--eds-color-border-medium);
-  }
 
-  .eds-banner__icon {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
+    & .icon {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
 
-    height: var(--eds-typography-line-height, 1.5rem);
+      height: var(--eds-typography-line-height, 1.5rem);
 
-    /*
-     * Negative margin compensates for Figma's icon container padding,
-     * pulling the icon closer to the component edge.
-     * Figma variable: selectable/icon-container-padding (↕︎ -6px, ↔︎ -4.8px)
-     * See #4684 for exporting this as a CSS custom property.
-     */
-    margin-block: -6px;
-    margin-inline-start: -4.8px;
+      /*
+       * Negative margin compensates for Figma's icon container padding,
+       * pulling the icon closer to the component edge.
+       * Figma variable: selectable/icon-container-padding (↕︎ -6px, ↔︎ -4.8px)
+       * See #4684 for exporting this as a CSS custom property.
+       */
+      margin-block: -6px;
+      margin-inline-start: -4.8px;
 
-    color: var(--eds-color-text-subtle);
-  }
+      color: var(--eds-color-text-subtle);
+    }
 
-  .eds-banner__message {
-    flex: 1;
+    & .message {
+      flex: 1;
 
-    min-width: 0;
-    margin: 0;
+      min-width: 0;
+      margin: 0;
 
-    font-family: var(--eds-typography-ui-body-font-family);
-    font-size: var(--eds-typography-ui-body-md-font-size);
-    line-height: var(--eds-typography-ui-body-md-line-height-default);
-    color: var(--eds-color-text-strong);
+      font-family: var(--eds-typography-ui-body-font-family);
+      font-size: var(--eds-typography-ui-body-md-font-size);
+      line-height: var(--eds-typography-ui-body-md-line-height-default);
+      color: var(--eds-color-text-strong);
 
-    @supports (text-box: trim-both cap alphabetic) {
-      text-box: trim-both cap alphabetic;
+      @supports (text-box: trim-both cap alphabetic) {
+        text-box: trim-both cap alphabetic;
+      }
     }
-  }
 
-  .eds-banner__actions {
-    display: flex;
-    gap: var(--eds-selectable-gap-horizontal, 8px);
-    align-items: center;
-  }
+    & .actions {
+      display: flex;
+      gap: var(--eds-selectable-gap-horizontal, 8px);
+      align-items: center;
 
-  .eds-banner__actions[data-placement='bottom'] {
-    flex-basis: 100%;
-  }
+      &[data-placement='bottom'] {
+        flex-basis: 100%;
+      }
+    }
 
-  .eds-banner:has(.eds-banner__dismiss) {
-    padding-inline-end: calc(
-      var(--eds-container-space-horizontal) + 24px +
-        var(--eds-container-space-horizontal)
-    );
-  }
+    &:has(.dismiss) {
+      padding-inline-end: calc(
+        var(--eds-container-space-horizontal) + 24px +
+          var(--eds-container-space-horizontal)
+      );
+    }
 
-  .eds-banner__dismiss {
-    position: absolute;
-    top: var(--eds-container-space-vertical);
-    right: var(--eds-container-space-horizontal);
+    & .dismiss {
+      position: absolute;
+      top: var(--eds-container-space-vertical);
+      right: var(--eds-container-space-horizontal);
 
-    /* Same Figma icon container padding compensation as .eds-banner__icon */
-    margin-block: -6px;
-    margin-inline-end: -4.8px;
+      /* Same Figma icon container padding compensation as .icon */
+      margin-block: -6px;
+      margin-inline-end: -4.8px;
+    }
   }
 }