feat: infobar: reflow to support small screens according to latest de…

…sign spec
EightfoldAI · Mar 18, 2024 · 9b0dc11 · 9b0dc11
1 parent 4b121f4
commit 9b0dc11
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 38 deletions.
diff --git a/src/components/InfoBar/InfoBar.tsx b/src/components/InfoBar/InfoBar.tsx
@@ -7,7 +7,7 @@ import ThemeContext, {
 import { InfoBarLocale, InfoBarsProps, InfoBarType } from './InfoBar.types';
 import { Icon, IconName } from '../Icon';
 import { mergeClasses } from '../../shared/utilities';
-import { Button, ButtonShape, ButtonVariant } from '../Button';
+import { Button, ButtonShape, ButtonWidth, ButtonVariant } from '../Button';
 import LocaleReceiver, {
   useLocaleReceiver,
 } from '../LocaleProvider/LocaleReceiver';
@@ -19,6 +19,7 @@ import themedComponentStyles from './infoBar.theme.module.scss';
 export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
   (props: InfoBarsProps, ref: Ref<HTMLDivElement>) => {
     const {
+      actionButtonClassNames,
       actionButtonProps,
       bordered = false,
       classNames,
@@ -31,8 +32,11 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
         noThemeContext: false,
       },
       content,
+      contentClassNames,
+      contentWrapperClassNames,
       gradient = false,
       icon,
+      iconClassNames,
       locale = enUS,
       onClose,
       role = 'alert',
@@ -88,7 +92,11 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
       { [styles.gradient]: mergedGradient },
     ]);
 
-    const messageClasses: string = mergeClasses([styles.message, 'body2']);
+    const messageClasses: string = mergeClasses([
+      styles.message,
+      'body2',
+      contentClassNames,
+    ]);
 
     const getIconName = (): IconName => {
       if (icon) {
@@ -121,19 +129,31 @@ export const InfoBar: FC<InfoBarsProps> = React.forwardRef(
                 style={style}
                 role={role}
               >
-                <Icon path={getIconName()} classNames={styles.icon} />
-                <div className={messageClasses}>{content}</div>
-                {actionButtonProps && (
-                  <Button
-                    transparent
-                    {...actionButtonProps}
-                    classNames={mergeClasses([
-                      styles.actionButton,
-                      actionButtonProps.classNames,
-                    ])}
-                    variant={ButtonVariant.SystemUI}
-                  />
-                )}
+                <Icon
+                  path={getIconName()}
+                  classNames={mergeClasses([styles.icon, iconClassNames])}
+                />
+                <div
+                  className={mergeClasses([
+                    styles.contentWrapper,
+                    contentWrapperClassNames,
+                  ])}
+                >
+                  <div className={messageClasses}>{content}</div>
+                  {actionButtonProps && (
+                    <Button
+                      buttonWidth={ButtonWidth.fitContent}
+                      transparent
+                      {...actionButtonProps}
+                      classNames={mergeClasses([
+                        styles.actionButton,
+                        actionButtonClassNames,
+                        actionButtonProps.classNames,
+                      ])}
+                      variant={ButtonVariant.SystemUI}
+                    />
+                  )}
+                </div>
                 {closable && (
                   <Button
                     ariaLabel={closeButtonAriaLabelText}

diff --git a/src/components/InfoBar/InfoBar.types.ts b/src/components/InfoBar/InfoBar.types.ts
@@ -29,6 +29,11 @@ export type InfoBarLocale = {
 };
 
 export interface InfoBarsProps extends OcBaseProps<HTMLDivElement> {
+  /**
+   * Custom classes for the action button.
+   * May be implemnted without the need for a button.
+   */
+  actionButtonClassNames?: string;
   /**
    * Props for the action button
    */
@@ -39,7 +44,7 @@ export interface InfoBarsProps extends OcBaseProps<HTMLDivElement> {
    */
   bordered?: boolean;
   /**
-   * If the InfoBar is closable or not
+   * If the InfoBar is closable or not.
    */
   closable?: boolean;
   /**
@@ -64,6 +69,14 @@ export interface InfoBarsProps extends OcBaseProps<HTMLDivElement> {
    * Content of the InfoBar
    */
   content: React.ReactNode;
+  /**
+   * Custom classes of the content.
+   */
+  contentClassNames?: string;
+  /**
+   * Custom classes of the content wrapper.
+   */
+  contentWrapperClassNames?: string;
   /**
    * The InfoBar gradient state.
    * @default false
@@ -74,6 +87,10 @@ export interface InfoBarsProps extends OcBaseProps<HTMLDivElement> {
    * @default IconName.mdiInformation | IconName.mdiCheckCircle | IconName.mdiAlert
    */
   icon?: IconName;
+  /**
+   * Custom classes of the icon.
+   */
+  iconClassNames?: string;
   /**
    * The InfoBar locale.
    * @default 'enUS'

diff --git a/src/components/InfoBar/__snapshots__/InfoBar.test.tsx.snap b/src/components/InfoBar/__snapshots__/InfoBar.test.tsx.snap
@@ -23,9 +23,13 @@ exports[`InfoBar InfoBar is Disruptive 1`] = `
       </svg>
     </span>
     <div
-      class="message body2"
+      class="content-wrapper"
     >
-      InfoBar test disruptive
+      <div
+        class="message body2"
+      >
+        InfoBar test disruptive
+      </div>
     </div>
   </div>
 </div>
@@ -54,9 +58,13 @@ exports[`InfoBar InfoBar is Neutral 1`] = `
       </svg>
     </span>
     <div
-      class="message body2"
+      class="content-wrapper"
     >
-      InfoBar test neutral
+      <div
+        class="message body2"
+      >
+        InfoBar test neutral
+      </div>
     </div>
   </div>
 </div>
@@ -85,9 +93,13 @@ exports[`InfoBar InfoBar is Positive 1`] = `
       </svg>
     </span>
     <div
-      class="message body2"
+      class="content-wrapper"
     >
-      InfoBar test positive
+      <div
+        class="message body2"
+      >
+        InfoBar test positive
+      </div>
     </div>
   </div>
 </div>
@@ -116,9 +128,13 @@ exports[`InfoBar InfoBar is Warning 1`] = `
       </svg>
     </span>
     <div
-      class="message body2"
+      class="content-wrapper"
     >
-      InfoBar test warning
+      <div
+        class="message body2"
+      >
+        InfoBar test warning
+      </div>
     </div>
   </div>
 </div>
@@ -147,9 +163,13 @@ exports[`InfoBar InfoBar is bordered 1`] = `
       </svg>
     </span>
     <div
-      class="message body2"
+      class="content-wrapper"
     >
-      InfoBar test border
+      <div
+        class="message body2"
+      >
+        InfoBar test border
+      </div>
     </div>
   </div>
 </div>
@@ -178,9 +198,13 @@ exports[`InfoBar Renders a custom icon when the icon prop uses a custom icon 1`]
       </svg>
     </span>
     <div
-      class="message body2"
+      class="content-wrapper"
     >
-      InfoBar test icon
+      <div
+        class="message body2"
+      >
+        InfoBar test icon
+      </div>
     </div>
   </div>
 </div>
@@ -209,9 +233,13 @@ exports[`InfoBar Renders without crashing 1`] = `
       </svg>
     </span>
     <div
-      class="message body2"
+      class="content-wrapper"
     >
-      InfoBar test render
+      <div
+        class="message body2"
+      >
+        InfoBar test render
+      </div>
     </div>
   </div>
 </div>

diff --git a/src/components/InfoBar/infoBar.module.scss b/src/components/InfoBar/infoBar.module.scss
@@ -4,8 +4,9 @@
   color: var(--info-bar-text-color);
   display: flex;
   font-family: var(--font-stack-full);
-  gap: $space-m;
-  padding: $space-ml;
+  gap: $space-s;
+  min-width: 288px;
+  padding: $space-s;
   width: 100%;
 
   &.bordered {
@@ -166,10 +167,46 @@
     }
   }
 
-  .message {
-    flex: 1;
+  .icon {
+    align-items: start;
+    padding-top: $space-xs;
+  }
+
+  .content-wrapper {
     display: flex;
-    align-items: center;
-    color: inherit;
+    flex: 1;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: $space-xs;
+
+    .message {
+      color: inherit;
+      display: flex;
+      min-width: 100%;
+      padding-top: $space-xs;
+    }
+
+    .action-button {
+      align-self: self-start;
+      margin-left: -10px;
+    }
+  }
+
+  @media (min-width: 400px) {
+    .content-wrapper {
+      flex-direction: row;
+      flex-wrap: nowrap;
+      gap: $space-m;
+
+      .action-button {
+        margin-left: unset;
+      }
+
+      .message {
+        flex: 1;
+        margin-top: unset;
+        min-width: unset;
+      }
+    }
   }
 }
diff --git a/src/components/Snackbar/Snackbar.tsx b/src/components/Snackbar/Snackbar.tsx
@@ -7,5 +7,13 @@ import styles from './snackbar.module.scss';
 
 export const Snackbar: FC<SnackbarProps> = ({ classNames, ...rest }) => {
   const snackbarClasses = mergeClasses([styles.snackbar, classNames]);
-  return <InfoBar {...rest} classNames={snackbarClasses} />;
+  return (
+    <InfoBar
+      {...rest}
+      classNames={snackbarClasses}
+      contentClassNames={styles.content}
+      contentWrapperClassNames={styles.contentWrapper}
+      actionButtonClassNames={styles.actionButton}
+    />
+  );
 };
diff --git a/src/components/Snackbar/snackbar.module.scss b/src/components/Snackbar/snackbar.module.scss
@@ -1,5 +1,5 @@
 .snackbar {
-  align-items: center;
+  align-items: start;
   box-shadow: $shadow-object-l;
   border: none;
   font-family: var(--font-stack-full);
@@ -10,6 +10,44 @@
   margin-bottom: $space-s;
   background-color: var(--white-color);
 
+  .content-wrapper {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: $space-xs;
+
+    .content {
+      color: inherit;
+      display: flex;
+      min-width: 100%;
+      padding-top: $space-xs;
+    }
+
+    .action-button {
+      align-self: self-start;
+      margin-left: -10px;
+    }
+  }
+
+  @media (min-width: $medium-screen-size) {
+    .content-wrapper {
+      flex-direction: row;
+      flex-wrap: nowrap;
+      gap: $space-m;
+
+      .action-button {
+        margin-left: unset;
+      }
+
+      .content {
+        flex: 1;
+        margin-top: unset;
+        min-width: unset;
+      }
+    }
+  }
+
   @media (max-width: $small-screen-size) {
     max-width: 90vw;
   }