feat(EmptyState): add centered alignment option and update styles in …

…stories
livechat · Jan 22, 2025 · 8ce8b46 · 8ce8b46
1 parent 7ba6653
commit 8ce8b46
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 3 deletions.
diff --git a/packages/react-components/src/components/EmptyState/EmptyState.module.scss b/packages/react-components/src/components/EmptyState/EmptyState.module.scss
@@ -4,6 +4,12 @@ $base-class: 'empty-state';
   display: flex;
   align-items: center;
 
+  &--centered {
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
   &--inline {
     flex-direction: row;
     justify-content: space-between;

diff --git a/packages/react-components/src/components/EmptyState/EmptyState.stories.module.scss b/packages/react-components/src/components/EmptyState/EmptyState.stories.module.scss
@@ -1,7 +1,5 @@
 .empty-state-story {
   &--centered {
-    display: flex;
-    justify-content: center;
     height: 100vh;
   }
 

diff --git a/packages/react-components/src/components/EmptyState/EmptyState.stories.tsx b/packages/react-components/src/components/EmptyState/EmptyState.stories.tsx
@@ -92,6 +92,7 @@ export const WithIcon: Story = {
 
 export const Centered: Story = {
   args: {
+    centered: true,
     icon: (
       <Icon className={styles['empty-state-story__icon']} source={InfoIcon} />
     ),

diff --git a/packages/react-components/src/components/EmptyState/EmptyState.tsx b/packages/react-components/src/components/EmptyState/EmptyState.tsx
@@ -15,9 +15,16 @@ export const EmptyState = ({
   title,
   description,
   actions,
+  centered = false,
 }: IEmptyStateProps) => {
   return (
-    <div className={cx(styles[baseClass], styles[`${baseClass}--${type}`])}>
+    <div
+      className={cx(
+        styles[baseClass],
+        styles[`${baseClass}--${type}`],
+        centered && styles[`${baseClass}--centered`]
+      )}
+    >
       {image && (
         <img
           className={styles[`${baseClass}__image`]}

diff --git a/packages/react-components/src/components/EmptyState/types.ts b/packages/react-components/src/components/EmptyState/types.ts
@@ -8,10 +8,12 @@ export type IEmptyStateProps = (
   | {
       type: 'inline';
       description?: never;
+      image?: never;
     }
 ) & {
   title: string;
   actions?: ReactNode;
+  centered?: boolean;
 } & (
     | { image?: string; icon?: never }
     | { image?: never; icon?: ReactNode }
-Original file line number
+Diff line change
@@ Expand Up / @@ -92,6 +92,7 @@ export const WithIcon: Story = { @@
     export const Centered: Story = {
       args: {
+        centered: true,
         icon: (
           <Icon className={styles['empty-state-story__icon']} source={InfoIcon} />
         ),
@@ Expand Down @@