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

siddharthkp · siddharthkp · commit 1b809c2bae68 · 2021-10-25T19:10:52.000+02:00
This reverts commit dcf693f.
diff --git a/.changeset/violet-cougars-yawn.md b/.changeset/violet-cougars-yawn.md
diff --git a/.github/workflows/check_for_changeset.yml b/.github/workflows/check_for_changeset.yml
@@ -0,0 +1,25 @@
+name: Check for changeset
+
+on:
+  pull_request:
+    types:
+      # On by default if you specify no types.
+      - "opened"
+      - "reopened"
+      - "synchronize"
+      # For `skip-label` only.
+      - "labeled"
+      - "unlabeled"
+
+jobs:
+  check-for-changeset:
+    name: Check for changeset
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: "Check for changeset"
+        uses: brettcannon/check-for-changed-files@v1
+        with:
+          file-pattern: ".changeset/*.md"
+          skip-label: "skip changeset"
+          failure-message: "No changeset found. If these changes should not result in a new version, apply the ${skip-label} label to this pull request. If these changes should result in a version bump, please add a changeset https://git.io/J6QvQ"
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @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": "30.3.0",
+  "version": "31.0.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.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 number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@primer/components",`
`3`		`- "version": "30.3.0",`
	`3`	`+ "version": "31.0.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.fg.muted'),`
`157`		`- iconColor: get('colors.fg.muted'),`
`158`		`- annotationColor: get('colors.fg.muted'),`
	`156`	`+ color: get('colors.primer.fg.disabled'),`
	`157`	`+ iconColor: get('colors.primer.fg.disabled'),`
	`158`	`+ annotationColor: get('colors.primer.fg.disabled'),`
`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.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`	`}`