Change disabled color from muted to custom primer disabled color (#1512)

pksjce · simurai · web-flow · commit 1e5ac406f855 · 2021-10-19T09:53:50.000+11:00
* Set disabled color where required

Switched muted to new disabled color

Update snapshot tests

* Change colors only during disabled state of the component

* Change color for disabled state only in buttontablelist

* Fix up review comments for ButtonTableList

* Update src/Button/ButtonTableList.tsx

Co-authored-by: simurai &lt;simurai@github.com&gt;

* Fix up review comments for ButtonTableList

* Create smooth-squids-visit.md

Co-authored-by: simurai &lt;simurai@github.com&gt;
diff --git a/.changeset/smooth-squids-visit.md b/.changeset/smooth-squids-visit.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Change disabled color from muted to custom primer disabled color
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -146,9 +146,9 @@ export interface ItemProps extends SxProp {
 const getItemVariant = (variant = 'default', disabled?: boolean) => {
   if (disabled) {
     return {
-      color: get('colors.fg.muted'),
-      iconColor: get('colors.fg.muted'),
-      annotationColor: get('colors.fg.muted'),
+      color: get('colors.primer.fg.disabled'),
+      iconColor: get('colors.primer.fg.disabled'),
+      annotationColor: get('colors.primer.fg.disabled'),
       hoverCursor: 'default'
     }
   }
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -27,7 +27,7 @@ const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   }
 
   &:disabled {
-    color: ${get('colors.fg.muted')};
+    color: ${get('colors.primer.fg.disabled')};
     background-color: ${get('colors.btn.bg')};
     border-color: ${get('colors.btn.border')};
   }
diff --git a/src/Button/ButtonTableList.tsx b/src/Button/ButtonTableList.tsx
@@ -33,7 +33,7 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   &:disabled {
     &,
     &:hover {
-      color: rgba(${get('colors.fg.muted')}, 0.5);
+      color: ${get('colors.primer.fg.disabled')};
       cursor: default;
     }
   }
diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx
@@ -55,7 +55,7 @@ const Page = styled.a`
 
   &[aria-disabled],
   &[aria-disabled]:hover {
-    color: ${get('colors.fg.muted')}; // check
+    color: ${get('colors.primer.fg.disabled')}; // check
     cursor: default;
     border-color: transparent;
   }
diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx
@@ -79,7 +79,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
   ${props =>
     props.disabled &&
     css`
-      color: ${get('colors.fg.muted')};
+      color: ${get('colors.primer.fg.disabled')};
       background-color: ${get('colors.input.disabledBg')};
       border-color: ${get('colors.border.default')};
     `}
diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`Pagination renders consistently 1`] = `
 
 .c2[aria-disabled],
 .c2[aria-disabled]:hover {
-  color: #57606a;
+  color: #8c959f;
   cursor: default;
   border-color: transparent;
 }
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`ActionMenu renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 }
 
 .c1:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -163,7 +163,7 @@ Object {
 }
 
 .c1:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -243,7 +243,7 @@ Object {
       <button
         aria-haspopup="true"
         aria-labelledby="react-aria-1"
-        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 jPURef"
+        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 iRqJHc"
         id="react-aria-1"
         tabindex="0"
       >
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`Button renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -134,7 +134,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -819,7 +819,7 @@ exports[`ButtonTableList renders consistently 1`] = `
 
 .c0:disabled,
 .c0:disabled:hover {
-  color: rgba(#57606a,0.5);
+  color: #8c959f;
   cursor: default;
 }
 
diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 }
 
 .c1:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
diff --git a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Dropdown.Button renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
diff --git a/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap b/src/__tests__/__snapshots__/DropdownMenu.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`DropdownMenu renders consistently 1`] = `
 }
 
 .c0:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 }
 
 .c1:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
diff --git a/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap b/src/__tests__/__snapshots__/SelectPanel.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`SelectPanel renders consistently 1`] = `
 }
 
 .c1:disabled {
-  color: #57606a;
+  color: #8c959f;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
@@ -77,6 +77,10 @@ export const buttonGroup = (args: StrictButtonStyleProps) => (
 export const buttonTableList = (args: ButtonStyleProps) => (
   <ButtonTableList {...args}>Button Table List</ButtonTableList>
 )
+export const disabledButton = (args: ButtonStyleProps) => {
+  const props = {disabled: true, ...args}
+  return <Button {...props}>Disabled</Button>
+}
 
 defaultButton.args = {variant: 'medium'}
 dangerButton.args = {variant: 'medium'}

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/components": patch
 +---
++
 +Change disabled color from muted to custom primer disabled color
Original file line number	Diff line number	Diff line change
`@@ -146,9 +146,9 @@ export interface ItemProps extends SxProp {`
`146`	`146`	`const getItemVariant = (variant = 'default', disabled?: boolean) => {`
`147`	`147`	`if (disabled) {`
`148`	`148`	`return {`
`149`		`- color: get('colors.fg.muted'),`
`150`		`- iconColor: get('colors.fg.muted'),`
`151`		`- annotationColor: get('colors.fg.muted'),`
	`149`	`+ color: get('colors.primer.fg.disabled'),`
	`150`	`+ iconColor: get('colors.primer.fg.disabled'),`
	`151`	`+ annotationColor: get('colors.primer.fg.disabled'),`
`152`	`152`	`hoverCursor: 'default'`
`153`	`153`	`}`
`154`	`154`	`}`
Original file line number	Diff line number	Diff line change
@@ -27,7 +27,7 @@ const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`&:disabled {`
`30`		`- color: ${get('colors.fg.muted')};`
	`30`	`+ color: ${get('colors.primer.fg.disabled')};`
`31`	`31`	`background-color: ${get('colors.btn.bg')};`
`32`	`32`	`border-color: ${get('colors.btn.border')};`
`33`	`33`	`}`
Original file line number	Diff line number	Diff line change
@@ -33,7 +33,7 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
`33`	`33`	`&:disabled {`
`34`	`34`	`&,`
`35`	`35`	`&:hover {`
`36`		`- color: rgba(${get('colors.fg.muted')}, 0.5);`
	`36`	`+ color: ${get('colors.primer.fg.disabled')};`
`37`	`37`	`cursor: default;`
`38`	`38`	`}`
`39`	`39`	`}`
Original file line number	Diff line number	Diff line change
@@ -55,7 +55,7 @@ const Page = styled.a`
`55`	`55`
`56`	`56`	`&[aria-disabled],`
`57`	`57`	`&[aria-disabled]:hover {`
`58`		`- color: ${get('colors.fg.muted')}; // check`
	`58`	`+ color: ${get('colors.primer.fg.disabled')}; // check`
`59`	`59`	`cursor: default;`
`60`	`60`	`border-color: transparent;`
`61`	`61`	`}`
Original file line number	Diff line number	Diff line change
@@ -61,7 +61,7 @@ exports[`Pagination renders consistently 1`] = `
`61`	`61`
`62`	`62`	`.c2[aria-disabled],`
`63`	`63`	`.c2[aria-disabled]:hover {`
`64`		`- color: #57606a;`
	`64`	`+ color: #8c959f;`
`65`	`65`	`cursor: default;`
`66`	`66`	`border-color: transparent;`
`67`	`67`	`}`
Original file line number	Diff line number	Diff line change
@@ -62,7 +62,7 @@ exports[`ActionMenu renders consistently 1`] = `
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`.c0:disabled {`
`65`		`- color: #57606a;`
	`65`	`+ color: #8c959f;`
`66`	`66`	`background-color: #f6f8fa;`
`67`	`67`	`border-color: rgba(27,31,36,0.15);`
`68`	`68`	`}`
Original file line number	Diff line number	Diff line change
@@ -68,7 +68,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`.c1:disabled {`
`71`		`- color: #57606a;`
	`71`	`+ color: #8c959f;`
`72`	`72`	`background-color: #f6f8fa;`
`73`	`73`	`border-color: rgba(27,31,36,0.15);`
`74`	`74`	`}`
`@@ -163,7 +163,7 @@ Object {`
`163`	`163`	`}`
`164`	`164`
`165`	`165`	`.c1:disabled {`
`166`		`- color: #57606a;`
	`166`	`+ color: #8c959f;`
`167`	`167`	`background-color: #f6f8fa;`
`168`	`168`	`border-color: rgba(27,31,36,0.15);`
`169`	`169`	`}`
`@@ -243,7 +243,7 @@ Object {`
`243`	`243`	`<button`
`244`	`244`	`aria-haspopup="true"`
`245`	`245`	`aria-labelledby="react-aria-1"`
`246`		`- class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 jPURef"`
	`246`	`+ class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 iRqJHc"`
`247`	`247`	`id="react-aria-1"`
`248`	`248`	`tabindex="0"`
`249`	`249`	`>`
Original file line number	Diff line number	Diff line change
@@ -62,7 +62,7 @@ exports[`Button renders consistently 1`] = `
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`.c0:disabled {`
`65`		`- color: #57606a;`
	`65`	`+ color: #8c959f;`
`66`	`66`	`background-color: #f6f8fa;`
`67`	`67`	`border-color: rgba(27,31,36,0.15);`
`68`	`68`	`}`
@@ -134,7 +134,7 @@ exports[`Button respects the "disabled" prop 1`] = `
`134`	`134`	`}`
`135`	`135`
`136`	`136`	`.c0:disabled {`
`137`		`- color: #57606a;`
	`137`	`+ color: #8c959f;`
`138`	`138`	`background-color: #f6f8fa;`
`139`	`139`	`border-color: rgba(27,31,36,0.15);`
`140`	`140`	`}`
@@ -819,7 +819,7 @@ exports[`ButtonTableList renders consistently 1`] = `
`819`	`819`
`820`	`820`	`.c0:disabled,`
`821`	`821`	`.c0:disabled:hover {`
`822`		`- color: rgba(#57606a,0.5);`
	`822`	`+ color: #8c959f;`
`823`	`823`	`cursor: default;`
`824`	`824`	`}`
`825`	`825`