Add disabled state css for Button component variation=input (#1500)

* Add disabled state css for Button component variation=input
priceline · Jun 11, 2024 · 7dd3335 · 7dd3335
1 parent 16b9af3
commit 7dd3335
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 51 deletions.
diff --git a/...ges/pcln-design-system/add-disabled-state-to-button-variation-input_2024-06-10-19-29.json b/...ges/pcln-design-system/add-disabled-state-to-button-variation-input_2024-06-10-19-29.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Add disabled state css for Button component variation=input",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/...n/changes/pcln-popover/add-disabled-state-to-button-variation-input_2024-06-10-20-13.json b/...n/changes/pcln-popover/add-disabled-state-to-button-variation-input_2024-06-10-20-13.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-popover",
+      "comment": "Update snapshot",
+      "type": "none"
+    }
+  ],
+  "packageName": "pcln-popover"
+}
diff --git a/packages/core/src/Button/Button.spec.tsx b/packages/core/src/Button/Button.spec.tsx
@@ -518,6 +518,25 @@ describe('Button', () => {
           modifier: ':focus',
         })
       })
+
+      it('should render disabled input', () => {
+        const { getByRole } = render(
+          <Button disabled variation='input'>
+            BUTTON
+          </Button>
+        )
+
+        const button = getByRole('button')
+        expect(button).toHaveStyleRule('cursor', 'not-allowed', {
+          modifier: ':disabled',
+        })
+        expect(button).toHaveStyleRule('color', theme.palette.text.light, {
+          modifier: ':disabled',
+        })
+        expect(button).toHaveStyleRule('background-color', theme.palette.background.light, {
+          modifier: ':disabled',
+        })
+      })
     })
   })
 

diff --git a/packages/core/src/Button/Button.tsx b/packages/core/src/Button/Button.tsx
@@ -173,6 +173,11 @@ const variations = {
     text-align: left;
     width: 100%;
 
+    &:disabled {
+      background-color: ${getPaletteColor('background.light')};
+      color: ${getPaletteColor('text.light')};
+    }
+
     ${(props) => borders({ ...props, color: undefined })}
     ${(props) => compose(space, fontSize, borderRadius)(props)}
   `,
@@ -241,14 +246,14 @@ export const buttonStyles = css`
   border-width: 0;
   border-style: solid;
 
-  ${({ theme }) => applySizes(sizes, 'medium', theme.mediaQueries)};
-  ${applyVariations('Button', variations)};
-
   &:disabled {
     cursor: not-allowed;
     color: ${getPaletteColor('background.tone')};
     background-color: ${getPaletteColor('background.base')};
   }
+
+  ${({ theme }) => applySizes(sizes, 'medium', theme.mediaQueries)};
+  ${applyVariations('Button', variations)};
 `
 
 const iconButtonPaddings = {

diff --git a/packages/core/src/IconButton/__snapshots__/IconButton.spec.tsx.snap b/packages/core/src/IconButton/__snapshots__/IconButton.spec.tsx.snap
@@ -56,6 +56,12 @@ exports[`IconButton renders without props 1`] = `
   color: #fff;
 }
 
+.c0:disabled {
+  cursor: not-allowed;
+  color: #879db3;
+  background-color: #edf0f3;
+}
+
 .c0:hover {
   background-color: #049;
   color: #fff;
@@ -66,12 +72,6 @@ exports[`IconButton renders without props 1`] = `
   box-shadow: 0 0 0 2px #049;
 }
 
-.c0:disabled {
-  cursor: not-allowed;
-  color: #879db3;
-  background-color: #edf0f3;
-}
-
 .c1 {
   padding: 0;
   background-color: transparent;

diff --git a/packages/core/src/Step/__snapshots__/Step.spec.tsx.snap b/packages/core/src/Step/__snapshots__/Step.spec.tsx.snap
@@ -49,6 +49,12 @@ exports[`Step should handle onClick 1`] = `
   margin-right: 32px;
 }
 
+.c1:disabled {
+  cursor: not-allowed;
+  color: #879db3;
+  background-color: #edf0f3;
+}
+
 .c1:hover {
   background-color: #049;
   color: #fff;
@@ -59,12 +65,6 @@ exports[`Step should handle onClick 1`] = `
   box-shadow: 0 0 0 2px #049;
 }
 
-.c1:disabled {
-  cursor: not-allowed;
-  color: #879db3;
-  background-color: #edf0f3;
-}
-
 .c4 {
   color: #0068ef;
   font-weight: 700;
@@ -174,6 +174,12 @@ exports[`Step should render a completed step correctly 1`] = `
   margin-right: 32px;
 }
 
+.c1:disabled {
+  cursor: not-allowed;
+  color: #879db3;
+  background-color: #edf0f3;
+}
+
 .c1:hover {
   background-color: #049;
   color: #fff;
@@ -184,12 +190,6 @@ exports[`Step should render a completed step correctly 1`] = `
   box-shadow: 0 0 0 2px #049;
 }
 
-.c1:disabled {
-  cursor: not-allowed;
-  color: #879db3;
-  background-color: #edf0f3;
-}
-
 .c6 {
   color: #0068ef;
   font-size: 14px;
@@ -316,6 +316,12 @@ exports[`Step should render a step that is "active" and "completed" correctly 1`
   margin-right: 32px;
 }
 
+.c1:disabled {
+  cursor: not-allowed;
+  color: #879db3;
+  background-color: #edf0f3;
+}
+
 .c1:hover {
   background-color: #049;
   color: #fff;
@@ -326,12 +332,6 @@ exports[`Step should render a step that is "active" and "completed" correctly 1`
   box-shadow: 0 0 0 2px #049;
 }
 
-.c1:disabled {
-  cursor: not-allowed;
-  color: #879db3;
-  background-color: #edf0f3;
-}
-
 .c6 {
   color: #0068ef;
   font-weight: 700;
@@ -445,6 +445,12 @@ exports[`Step should render an active step correctly 1`] = `
   margin-right: 32px;
 }
 
+.c1:disabled {
+  cursor: not-allowed;
+  color: #879db3;
+  background-color: #edf0f3;
+}
+
 .c1:hover {
   background-color: #049;
   color: #fff;
@@ -455,12 +461,6 @@ exports[`Step should render an active step correctly 1`] = `
   box-shadow: 0 0 0 2px #049;
 }
 
-.c1:disabled {
-  cursor: not-allowed;
-  color: #879db3;
-  background-color: #edf0f3;
-}
-
 .c4 {
   color: #0068ef;
   font-weight: 700;
@@ -556,6 +556,12 @@ exports[`Step should render correctly with no props without throwing 1`] = `
   margin-right: 32px;
 }
 
+.c1:disabled {
+  cursor: not-allowed;
+  color: #879db3;
+  background-color: #edf0f3;
+}
+
 .c1:hover {
   background-color: #049;
   color: #fff;
@@ -566,12 +572,6 @@ exports[`Step should render correctly with no props without throwing 1`] = `
   box-shadow: 0 0 0 2px #049;
 }
 
-.c1:disabled {
-  cursor: not-allowed;
-  color: #879db3;
-  background-color: #edf0f3;
-}
-
 .c4 {
   color: #4f6f8f;
   font-size: 14px;

diff --git a/packages/core/src/Stepper/__snapshots__/Stepper.spec.tsx.snap b/packages/core/src/Stepper/__snapshots__/Stepper.spec.tsx.snap
@@ -59,6 +59,12 @@ exports[`Stepper renders with children 1`] = `
   margin-right: 32px;
 }
 
+.c2:disabled {
+  cursor: not-allowed;
+  color: #879db3;
+  background-color: #edf0f3;
+}
+
 .c2:hover {
   background-color: #049;
   color: #fff;
@@ -69,12 +75,6 @@ exports[`Stepper renders with children 1`] = `
   box-shadow: 0 0 0 2px #049;
 }
 
-.c2:disabled {
-  cursor: not-allowed;
-  color: #879db3;
-  background-color: #edf0f3;
-}
-
 .c7 {
   color: #0068ef;
   font-size: 14px;

diff --git a/packages/popover/src/Popover/__snapshots__/Popover.spec.js.snap b/packages/popover/src/Popover/__snapshots__/Popover.spec.js.snap
@@ -37,6 +37,12 @@ exports[`Popover Trigger Element Renders trigger element and appends action prop
   color: #fff;
 }
 
+.c1:disabled {
+  cursor: not-allowed;
+  color: #879db3;
+  background-color: #edf0f3;
+}
+
 .c1:hover {
   background-color: #049;
   color: #fff;
@@ -47,12 +53,6 @@ exports[`Popover Trigger Element Renders trigger element and appends action prop
   box-shadow: 0 0 0 2px #049;
 }
 
-.c1:disabled {
-  cursor: not-allowed;
-  color: #879db3;
-  background-color: #edf0f3;
-}
-
 .c0 {
   font-family: 'Montserrat','Helvetica Neue',Helvetica,Arial,sans-serif;
   line-height: 1.4;