From e2f5bba6a5556ddf648cf5adc6ac469c9da67c1d Mon Sep 17 00:00:00 2001
From: Daniel Darritchon <daniel.darritchon@front.com>
Date: Fri, 24 Oct 2025 17:46:56 -0300
Subject: [PATCH] added subtitle to empty state component

---
 CHANGELOG.md                                  |  3 +--
 .../emptyState/__docs__/index.stories.tsx     |  1 +
 .../__docs__/stories/basic.stories.tsx        |  8 ++++++
 src/elements/emptyState/emptyState.tsx        | 25 ++++++++++++++++---
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f5dc5cd5..546ea5ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,9 @@
 
 ## [0.18.1](https://github.com/frontapp/front-ui-kit/compare/v0.18.0...v0.18.1) (2025-10-24)
 
-
 ### Bug Fixes
 
-* card actions on hover ([#296](https://github.com/frontapp/front-ui-kit/issues/296)) ([cdbb117](https://github.com/frontapp/front-ui-kit/commit/cdbb117d4e677d378634342935a121c84d3669e9))
+- card actions on hover ([#296](https://github.com/frontapp/front-ui-kit/issues/296)) ([cdbb117](https://github.com/frontapp/front-ui-kit/commit/cdbb117d4e677d378634342935a121c84d3669e9))
 
 ## [0.18.0](https://github.com/frontapp/front-ui-kit/compare/v0.17.1...v0.18.0) (2025-10-22)
 
diff --git a/src/elements/emptyState/__docs__/index.stories.tsx b/src/elements/emptyState/__docs__/index.stories.tsx
index 9b082861..4c09e46b 100644
--- a/src/elements/emptyState/__docs__/index.stories.tsx
+++ b/src/elements/emptyState/__docs__/index.stories.tsx
@@ -26,3 +26,4 @@ export default {
 } as ComponentMeta<typeof EmptyState>;
 
 export {Basic} from './stories/basic.stories';
+export {WithSubtitle} from './stories/basic.stories';
diff --git a/src/elements/emptyState/__docs__/stories/basic.stories.tsx b/src/elements/emptyState/__docs__/stories/basic.stories.tsx
index 260a5ef6..46fbbf58 100644
--- a/src/elements/emptyState/__docs__/stories/basic.stories.tsx
+++ b/src/elements/emptyState/__docs__/stories/basic.stories.tsx
@@ -18,3 +18,11 @@ export const Basic: StoryObj<typeof EmptyState> = {
     </StyledWrapperDiv>
   )
 };
+
+export const WithSubtitle: StoryObj<typeof EmptyState> = {
+  render: () => (
+    <StyledWrapperDiv>
+      <EmptyState message='No results for "Account"' subtitle="Try adjusting your search" />
+    </StyledWrapperDiv>
+  )
+};
diff --git a/src/elements/emptyState/emptyState.tsx b/src/elements/emptyState/emptyState.tsx
index bdbd0b56..79ca1b31 100644
--- a/src/elements/emptyState/emptyState.tsx
+++ b/src/elements/emptyState/emptyState.tsx
@@ -3,7 +3,7 @@ import styled, {css} from 'styled-components';
 
 import {Button} from '../../components/button/button';
 import {greys} from '../../helpers/colorHelpers';
-import {fonts, fontSizes} from '../../helpers/fontHelpers';
+import {fonts, fontSizes, fontWeights} from '../../helpers/fontHelpers';
 import {Icon} from '../icon/icon';
 
 /*
@@ -23,6 +23,8 @@ interface EmptyStateProps {
   buttonText?: string;
   /** Handler when the button is clicked, required to render a button. */
   onButtonClick?: () => void;
+  /** Subtitle to render for the empty state. */
+  subtitle?: string;
 }
 
 /*
@@ -58,7 +60,7 @@ const StyledContentWrapperDiv = styled.div<StyledContentWrapperDivProps>`
 `;
 
 const StyledSearchIconWrapperDiv = styled.div`
-  background: ${greys.shade30};
+  background: ${greys.shade20};
   border-radius: 50%;
   width: 70px;
   height: 70px;
@@ -71,8 +73,17 @@ const StyledSearchIconWrapperDiv = styled.div`
 const StyledSearchTextDiv = styled.div`
   flex: 1;
   text-align: center;
-  color: ${greys.shade70};
+  color: ${greys.black};
+  font-size: ${fontSizes.large};
+  font-weight: ${fontWeights.bold};
+`;
+
+const StyledSubtitleTextDiv = styled.div`
+  flex: 1;
+  text-align: center;
+  color: ${greys.black};
   font-size: ${fontSizes.medium};
+  font-weight: ${fontWeights.normal};
 `;
 
 const StyledButtonWrapperDiv = styled.div`
@@ -84,7 +95,12 @@ const StyledButtonWrapperDiv = styled.div`
  * Component.
  */
 
-export const EmptyState: FC<EmptyStateProps> = ({message = DefaultMessage, buttonText, onButtonClick}) => {
+export const EmptyState: FC<EmptyStateProps> = ({
+  message = DefaultMessage,
+  buttonText,
+  onButtonClick,
+  subtitle
+}) => {
   const hasVisibleButton = Boolean(buttonText && onButtonClick);
 
   return (
@@ -94,6 +110,7 @@ export const EmptyState: FC<EmptyStateProps> = ({message = DefaultMessage, butto
           <Icon name="Search" size={40} color={greys.shade50} viewBox="0 0 16 16" />
         </StyledSearchIconWrapperDiv>
         <StyledSearchTextDiv>{message}</StyledSearchTextDiv>
+        {subtitle && <StyledSubtitleTextDiv>{subtitle}</StyledSubtitleTextDiv>}
         {maybeRenderButton(buttonText, onButtonClick)}
       </StyledContentWrapperDiv>
     </StyledEmptyStateWrapperDiv>