fix: button with a label

themesberg · Oct 7, 2023 · 38bd1f3 · 38bd1f3
1 parent e62e404
commit 38bd1f3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/components/Button/Button.spec.tsx b/src/components/Button/Button.spec.tsx
@@ -118,6 +118,13 @@ describe('Components / Button', () => {
       expect(button()).toHaveTextContent('Something or other');
     });
 
+    it('should render both children then label', () => {
+      render(<Button label="2">Messages</Button>);
+
+      expect(button()).toHaveTextContent('Messages');
+      expect(label()).toHaveTextContent('2');
+    });
+
     describe('`as` and `href` props', () => {
       it('should render an anchor `<a>` when `href=".."`', () => {
         render(<Button href="#" label="Something or other" />);
@@ -386,6 +393,8 @@ describe('Components / Button', () => {
 
 const button = () => screen.getByRole('button');
 
+const label = () => screen.getByTestId('flowbite-button-label');
+
 const buttonLink = () => screen.getByRole('link');
 
 const buttonListItem = () => screen.getByRole('listitem');

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -29,3 +29,10 @@ DefaultButton.storyName = 'Default';
 DefaultButton.args = {
   children: 'Button',
 };
+
+export const ButtonWithLabel = Template.bind({});
+ButtonWithLabel.storyName = 'Button with a label';
+ButtonWithLabel.args = {
+  children: 'Messages',
+  label: '2',
+};
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -148,12 +148,13 @@ const ButtonComponentFn = <T extends ElementType = 'button'>(
               {processingSpinner || <Spinner size={size} />}
             </span>
           )}
-          {typeof children !== 'undefined' ? (
-            children
-          ) : (
+          {typeof children !== 'undefined' ? children : ''}
+          {typeof label !== 'undefined' ? (
             <span data-testid="flowbite-button-label" className={twMerge(theme.label)}>
               {isProcessing ? processingLabel : label}
             </span>
+          ) : (
+            ''
           )}
         </>
       </span>