feat(theme,alert)!: add root breakpoint

packages/react/src/components/Alert/Alert.stories.tsx

@@ -67,7 +67,11 @@ const meta: Meta<Args> = {
       },
     },
     breakpoint: {
-      options: ['0', 'sm', 'lg'],
+      options: [null, '0', 'sm', 'lg'],
+      control: { type: 'select' },
+    },
+    breakpointContent: {
+      options: [null, '0', 'sm', 'lg'],
       control: { type: 'select' },
     },
   },
@@ -100,6 +104,7 @@ export const Demo: Story = {
           )
         }
         breakpoint={args.breakpoint}
+        breakpointContent={args.breakpointContent}
         color={args.color}
         icon={args.icon ? undefined : false}
         severity={args.severity}

packages/react/src/components/Alert/Alert.tsx

@@ -27,35 +27,36 @@ export const Alert = (inProps: AlertProps) => {
     action,
     actions,
     color,
-    breakpoint,
+    breakpoint = '0',
+    breakpointContent = '0',
     iconMapping = defaultIconMapping,
   } = useDefaultProps({
     props: inProps,
     name: 'ESAlert',
   });
 
-  const isWithActions = Array.isArray(children)
-    ? children.some((elem) => (typeof elem === 'object' ? elem.type?.displayName === 'AlertActions' : false))
-    : false;
-
   return (
     <div
       className={clsx(
         className,
         'es-alert',
         `es-alert--${variant}--${color || severity}`,
-        isWithActions && 'es-alert--with-actions'
+        breakpoint && `es-alert--breakpoint--${breakpoint}`
       )}
       style={style}
     >
       {icon !== false && <div className="es-alert__icon">{icon || iconMapping[severity]}</div>}
-      <div className={clsx('es-alert__content', breakpoint && `es-alert__content--breakpoint--${breakpoint}`)}>
+      <div
+        className={clsx(
+          'es-alert__content',
+          breakpointContent && `es-alert__content--breakpoint--${breakpointContent}`,
+          className
+        )}
+      >
         <div className="es-alert__message body100">{children}</div>
         {actions}
       </div>
-      {!!action && (
-        <div className={clsx('es-alert__action', isWithActions && 'es-alert__action--with-actions')}>{action}</div>
-      )}
+      {!!action && <div className="es-alert__action">{action}</div>}
     </div>
   );
 };

packages/react/src/components/Alert/Alert.types.ts

@@ -28,21 +28,28 @@ export interface AlertProps {
    */
   color?: 'success' | 'warning' | 'error' | 'info' | 'mono-a';
 
-  /**
-   * The breakpoint at which the flex items are ordered along the cross axis.
-   */
-  breakpoint?: string;
-
   /**
    * The action to display. It renders after the message, at the end of the alert.
    */
   action?: ReactNode;
 
   /**
-   * The action to display. It renders after the message, at the end of the alert.
+   * The actions to display.
    */
   actions?: ReactNode;
 
+  /**
+   * The breakpoint at which the flex items are ordered in row.
+   * @default '0'
+   */
+  breakpoint?: string | null;
+
+  /**
+   * The breakpoint at which the content flex items are ordered in row.
+   * @default '0'
+   */
+  breakpointContent?: string | null;
+
   /**
    * The component maps the severity prop to a range of different icons.
    * If you wish to change this mapping, you can provide your own.

packages/theme/lib/components/_alert.scss

@@ -2,12 +2,21 @@
 
 @mixin include() {
   .es-alert {
+    align-items: flex-start;
     border-radius: 4px;
-    display: flex;
-    padding: 7px 15px;
-
-    &--with-actions {
-      padding: 11px 15px;
+    display: grid;
+    grid-template-areas: 'icon . action' 'content content content';
+    grid-template-columns: auto 1fr auto;
+    padding: 7px 15px 11px;
+    position: relative;
+
+    @each $name, $value in settings.$breakpoints {
+      &--breakpoint--#{$name} {
+        @media (width >= #{$value}px) {
+          grid-template-areas: 'icon content action';
+          padding: 7px 15px;
+        }
+      }
     }
 
     &--standard--success {
@@ -41,15 +50,23 @@
     }
 
     &__icon {
-      margin-right: 8px;
-      padding-top: 8px;
+      display: flex;
+      grid-area: icon;
+      margin: 8px 8px 8px 0;
+    }
+
+    &__action {
+      display: flex;
+      grid-area: action;
+      margin: 8px 0 8px 8px;
     }
 
     &__content {
       display: flex;
       flex-direction: column;
       flex-grow: 1;
-      gap: 6px;
+      gap: 6px 8px;
+      grid-area: content;
 
       @each $name, $value in settings.$breakpoints {
         &--breakpoint--#{$name} {
@@ -71,22 +88,17 @@
       /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
       word-break: break-word;
     }
-
-    &__action {
-      margin: 8px 0 0 8px;
-
-      &--with-actions {
-        margin: 4px 0 0 8px;
-      }
-    }
   }
 
   .es-alert-actions {
+    flex-shrink: 0;
     padding: 4px 0;
   }
 
   .es-alert-close {
-    --icon: var(--es-mono-a-a500);
+    &.es-button {
+      --icon: var(--es-mono-a-a500);
+    }
   }
 
   .es-alert-title {