Merge pull request #583 from catho/fix/disabled-prop-button

fix(Button.jsx): Forwarding disabled prop to button component
catho · Sep 10, 2024 · 17640f5 · 17640f5
2 parents 78e85f3 + d78aba7
commit 17640f5
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 1 deletion.
diff --git a/components/Button/Button.jsx b/components/Button/Button.jsx
@@ -43,7 +43,13 @@ const Button = ({
   );
 
   return (
-    <button type="button" className={defaultButtonStyle} size={size} {...rest}>
+    <button
+      type="button"
+      className={defaultButtonStyle}
+      size={size}
+      disabled={disabled}
+      {...rest}
+    >
       {icon && <Icon className={iconStyle} size={size} name={icon} />}
       {children}
     </button>

diff --git a/components/Button/Button.unit.test.jsx b/components/Button/Button.unit.test.jsx
@@ -20,6 +20,12 @@ describe('Button component', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  it('when disabled prop is set', () => {
+    const { container } = render(<Button disabled>Text</Button>);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   it('should render a button only icon state ', () => {
     const { container: defaultSize } = render(<Button icon="info" />);
     const { container: xSmallSize } = render(

diff --git a/components/Button/__snapshots__/Button.unit.test.jsx.snap b/components/Button/__snapshots__/Button.unit.test.jsx.snap
@@ -436,6 +436,56 @@ exports[`Button component when center prop is set 1`] = `
 </button>
 `;
 
+exports[`Button component when disabled prop is set 1`] = `
+.ButtonBase-module__button___-CVUK {
+  align-items: center;
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  font-weight: 700;
+  justify-content: center;
+  transition: all .2s ease-in-out;
+}
+
+.ButtonBase-module__button-disable___Y9IPR {
+  border: 2px solid var(--qtm-colors-neutral-300);
+  cursor: not-allowed;
+}
+
+.ButtonBase-module__button-disable___Y9IPR,
+.ButtonBase-module__button-disable-stroked___CAyx7 {
+  background-color: var(--qtm-colors-neutral-300);
+  color: var(--qtm-colors-neutral-700);
+}
+
+.ButtonBase-module__button-medium___BtByl,
+.ButtonBase-module__button-small___ffdO7 {
+  padding: var(--qtm-spacing-xxsmall) var(--qtm-spacing-medium);
+}
+
+.ButtonBase-module__button-medium___BtByl {
+  font-size: var(--qtm-base-font-size);
+  line-height: calc(var(--qtm-base-font-size)*1.5);
+  min-height: var(--qtm-spacing-xxlarge);
+}
+
+.ButtonBase-module__shadow-2-neutral-500___mSG-z {
+  --qtm-shadow-umbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-umbra-opacity));
+  --qtm-shadow-penumbra-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-penumbra-opacity));
+  --qtm-shadow-ambient-neutral-500-color: rgba(153,153,153,var(--qtm-shadow-ambient-opacity));
+  box-shadow: 0 3px 1px -2px var(--qtm-shadow-umbra-neutral-500-color),0 2px 2px 0 var(--qtm-shadow-penumbra-neutral-500-color),0 1px 5px 0 var(--qtm-shadow-ambient-neutral-500-color);
+}
+
+<button
+  class="ButtonBase-module__button___-CVUK ButtonBase-module__button-medium___BtByl ButtonBase-module__button-disable___Y9IPR ButtonBase-module__shadow-2-neutral-500___mSG-z"
+  disabled=""
+  type="button"
+>
+  Text
+</button>
+`;
+
 exports[`Button component when full prop is set 1`] = `
 .ButtonBase-module__button___-CVUK {
   align-items: center;