remove important from link variation of button (#1426)

priceline · Dec 11, 2023 · f03bc74 · f03bc74
1 parent dbac46f
commit f03bc74
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/common/changes/pcln-design-system/fix-transparent-button_2023-12-08-22-01.json b/common/changes/pcln-design-system/fix-transparent-button_2023-12-08-22-01.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "remove important on transparent background of link variation of button",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/packages/core/src/Button/Button.spec.tsx b/packages/core/src/Button/Button.spec.tsx
@@ -331,7 +331,6 @@ describe('Button', () => {
         expect(button).toHaveStyleRule('font-weight', '500')
         expect(button).toHaveStyleRule('line-height', '1.4')
         expect(button).toHaveStyleRule('padding', '0px')
-        expect(button).toHaveStyleRule('background-color', 'transparent !important')
         expect(button).toHaveStyleRule('color', theme.palette.primary.dark, {
           modifier: ':hover',
         })
@@ -355,6 +354,7 @@ describe('Button', () => {
         expect(button).toHaveStyleRule('background-color', theme.palette.background.base, {
           modifier: ':disabled',
         })
+        expect(button).toHaveStyleRule('background-color', 'transparent')
       })
     })
 

diff --git a/packages/core/src/Button/Button.stories.tsx b/packages/core/src/Button/Button.stories.tsx
@@ -101,12 +101,15 @@ export const TonalVariations: ButtonStory = {
   ),
 }
 
-export const TextButtons: ButtonStory = {
+export const LinkVariation: ButtonStory = {
   render: () => (
     <StoryStage>
-      <Button variation='link'>Button</Button>
+      <Button variation='link'>Enabled</Button>
+      <Button variation='link' disabled>
+        Disabled
+      </Button>
       <Button variation='link'>
-        <Text fontWeight='bold'>Button</Text>
+        <Text fontWeight='bold'>Bold</Text>
       </Button>
     </StoryStage>
   ),

diff --git a/packages/core/src/Button/Button.tsx b/packages/core/src/Button/Button.tsx
@@ -86,7 +86,7 @@ const variations = {
     line-height: ${(props) => props.theme.lineHeights.standard};
     vertical-align: inherit;
     padding: 0;
-    background-color: transparent !important;
+    background-color: transparent;
     &:hover {
       color: ${getPaletteColor('dark')};
       text-decoration: underline;