Revert "Merge branch 'main' of github.com:primer/react into api/actionlist-trailing-visual"

siddharthkp · siddharthkp · commit dcf693fa0265 · 2021-10-25T13:09:11.000+02:00
This reverts commit ddb6a6f, reversing changes made to 1f18ad6.
diff --git a/.changeset/violet-cougars-yawn.md b/.changeset/violet-cougars-yawn.md
@@ -0,0 +1,7 @@
+---
+"@primer/components": major
+---
+
+Remove deprecated color variables by upgrading to @primer/primitives [v5](https://github.com/primer/primitives/pull/251)
+
+**Note:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated or removed color variables.
diff --git a/.github/workflows/check_for_changeset.yml b/.github/workflows/check_for_changeset.yml
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,17 +1,5 @@
 # @primer/components
 
-## 31.0.0
-
-### Major Changes
-
-- [#1514](https://github.com/primer/react/pull/1514) [`dc789025`](https://github.com/primer/react/commit/dc789025d4976e2f0863e1f377c4a834aab88e3a) Thanks [@colebemis](https://github.com/colebemis)! - Remove deprecated color variables by upgrading to @primer/primitives [v5](https://github.com/primer/primitives/pull/251)
-
-  **Note:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated or removed color variables.
-
-### Patch Changes
-
-- [#1512](https://github.com/primer/react/pull/1512) [`1e5ac406`](https://github.com/primer/react/commit/1e5ac406f8558a20248157a9bfe13ee4709890c8) Thanks [@pksjce](https://github.com/pksjce)! - Change disabled color from muted to custom primer disabled color
-
 ## 30.3.0
 
 ### Minor Changes
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.0.0",
+  "version": "30.3.0",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -153,9 +153,9 @@ export interface ItemProps extends SxProp {
 const getItemVariant = (variant = 'default', disabled?: boolean) => {
   if (disabled) {
     return {
-      color: get('colors.primer.fg.disabled'),
-      iconColor: get('colors.primer.fg.disabled'),
-      annotationColor: get('colors.primer.fg.disabled'),
+      color: get('colors.fg.muted'),
+      iconColor: get('colors.fg.muted'),
+      annotationColor: get('colors.fg.muted'),
       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.primer.fg.disabled')};
+    color: ${get('colors.fg.muted')};
     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: ${get('colors.primer.fg.disabled')};
+      color: rgba(${get('colors.fg.muted')}, 0.5);
       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.primer.fg.disabled')}; // check
+    color: ${get('colors.fg.muted')}; // 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.primer.fg.disabled')};
+      color: ${get('colors.fg.muted')};
       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: #8c959f;
+  color: #57606a;
   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: #8c959f;
+  color: #57606a;
   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: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-color: rgba(27,31,36,0.15);
 }
@@ -163,7 +163,7 @@ Object {
 }
 
 .c1:disabled {
-  color: #8c959f;
+  color: #57606a;
   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 iRqJHc"
+        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 jPURef"
         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: #8c959f;
+  color: #57606a;
   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: #8c959f;
+  color: #57606a;
   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: #8c959f;
+  color: rgba(#57606a,0.5);
   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: #8c959f;
+  color: #57606a;
   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: #8c959f;
+  color: #57606a;
   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: #8c959f;
+  color: #57606a;
   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: #8c959f;
+  color: #57606a;
   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: #8c959f;
+  color: #57606a;
   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,10 +77,6 @@ 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 number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@primer/components",`
`3`		`- "version": "31.0.0",`
	`3`	`+ "version": "30.3.0",`
`4`	`4`	`"description": "Primer react components",`
`5`	`5`	`"main": "lib/index.js",`
`6`	`6`	`"module": "lib-esm/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -153,9 +153,9 @@ export interface ItemProps extends SxProp {`
`153`	`153`	`const getItemVariant = (variant = 'default', disabled?: boolean) => {`
`154`	`154`	`if (disabled) {`
`155`	`155`	`return {`
`156`		`- color: get('colors.primer.fg.disabled'),`
`157`		`- iconColor: get('colors.primer.fg.disabled'),`
`158`		`- annotationColor: get('colors.primer.fg.disabled'),`
	`156`	`+ color: get('colors.fg.muted'),`
	`157`	`+ iconColor: get('colors.fg.muted'),`
	`158`	`+ annotationColor: get('colors.fg.muted'),`
`159`	`159`	`hoverCursor: 'default'`
`160`	`160`	`}`
`161`	`161`	`}`
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.primer.fg.disabled')};`
	`30`	`+ color: ${get('colors.fg.muted')};`
`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: ${get('colors.primer.fg.disabled')};`
	`36`	`+ color: rgba(${get('colors.fg.muted')}, 0.5);`
`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.primer.fg.disabled')}; // check`
	`58`	`+ color: ${get('colors.fg.muted')}; // 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: #8c959f;`
	`64`	`+ color: #57606a;`
`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: #8c959f;`
	`65`	`+ color: #57606a;`
`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: #8c959f;`
	`71`	`+ color: #57606a;`
`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: #8c959f;`
	`166`	`+ color: #57606a;`
`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 iRqJHc"`
	`246`	`+ class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 jPURef"`
`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: #8c959f;`
	`65`	`+ color: #57606a;`
`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: #8c959f;`
	`137`	`+ color: #57606a;`
`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: #8c959f;`
	`822`	`+ color: rgba(#57606a,0.5);`
`823`	`823`	`cursor: default;`
`824`	`824`	`}`
`825`	`825`
Original file line number	Diff line number	Diff line change
@@ -68,7 +68,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`.c1:disabled {`
`71`		`- color: #8c959f;`
	`71`	`+ color: #57606a;`
`72`	`72`	`background-color: #f6f8fa;`
`73`	`73`	`border-color: rgba(27,31,36,0.15);`
`74`	`74`	`}`