@primer/components 31.0.0-rc.dfe9dc6b → 31.0.1-rc.0f466271

package/docs/content/ActionList.mdx

@@ -32,7 +32,7 @@ An `ActionList` is a list of items which can be activated or selected. `ActionLi
     {groupId: '4'}
   ]}
   items={[
-    {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'},
+    {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0', trailingVisual: '⌘R'},
     {key: '2', leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'},
     {key: '3', leadingVisual: SearchIcon, text: 'repo:github/github', groupId: '1'},
     {
@@ -59,7 +59,7 @@ An `ActionList` is a list of items which can be activated or selected. `ActionLi
       groupId: '3'
     },
     {key: '7', leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'},
-    {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4'}
+    {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4', trailingVisual: ArrowRightIcon}
   ]}
 />
 ```

package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -17,7 +17,8 @@ import {
   FilterIcon,
   GearIcon,
   TypographyIcon,
-  VersionsIcon
+  VersionsIcon,
+  ArrowRightIcon
 } from '@primer/octicons-react'
 import State from '../../../components/State'
 import {Dialog as Dialog2} from '../../../../src/Dialog/Dialog'
@@ -46,6 +47,7 @@ export default {
   GearIcon,
   TypographyIcon,
   VersionsIcon,
+  ArrowRightIcon,
   Dialog2,
   ConfirmationDialog,
   useConfirm,

package/lib/ActionList/Item.d.ts

@@ -28,13 +28,19 @@ export interface ItemProps extends SxProp {
      */
     leadingVisual?: React.FunctionComponent<IconProps>;
     /**
+     * @deprecated Use `trailingVisual` instead
      * Icon (or similar) positioned after `Item` text.
      */
     trailingIcon?: React.FunctionComponent<IconProps>;
     /**
+     * @deprecated Use `trailingVisual` instead
      * Text positioned after `Item` text and optional trailing icon.
      */
     trailingText?: string;
+    /**
+     * Icon or text positioned after `Item` text.
+     */
+    trailingVisual?: React.ReactNode;
     /**
      * Style variations associated with various `Item` types.
      *

package/lib/ActionList/Item.js

@@ -71,9 +71,9 @@ const customItemThemes = {
 const getItemVariant = (variant = 'default', disabled) => {
   if (disabled) {
     return {
-      color: (0, _constants.get)('colors.fg.muted'),
-      iconColor: (0, _constants.get)('colors.fg.muted'),
-      annotationColor: (0, _constants.get)('colors.fg.muted'),
+      color: (0, _constants.get)('colors.primer.fg.disabled'),
+      iconColor: (0, _constants.get)('colors.primer.fg.disabled'),
+      annotationColor: (0, _constants.get)('colors.primer.fg.disabled'),
       hoverCursor: 'default'
     };
   }
@@ -187,6 +187,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     selectionVariant,
     leadingVisual: LeadingVisual,
     trailingIcon: TrailingIcon,
+    trailingVisual: TrailingVisual,
     trailingText,
     variant = 'default',
     showDivider,
@@ -278,7 +279,10 @@ const Item = /*#__PURE__*/_react.default.forwardRef((itemProps, ref) => {
     title: description,
     inline: true,
     maxWidth: "100%"
-  }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
+  }, description)) : null), TrailingVisual ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/_react.default.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));

package/lib/Button/Button.js

@@ -22,6 +22,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const Button = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
   displayName: "Button",
   componentId: "xjtz72-0"
-})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], (0, _constants.get)('colors.btn.text'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('shadows.btn.insetShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.hoverBorder'), (0, _constants.get)('colors.btn.focusBorder'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.selectedBg'), (0, _constants.get)('shadows.btn.shadowActive'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), _ButtonBase.buttonSystemProps, _sx.default);
+})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], (0, _constants.get)('colors.btn.text'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('shadows.btn.insetShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.hoverBorder'), (0, _constants.get)('colors.btn.focusBorder'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.selectedBg'), (0, _constants.get)('shadows.btn.shadowActive'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), _ButtonBase.buttonSystemProps, _sx.default);
 var _default = Button;
 exports.default = _default;

package/lib/Button/ButtonInvisible.js

@@ -22,6 +22,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const ButtonInvisible = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
   displayName: "ButtonInvisible",
   componentId: "sc-1195tpn-0"
-})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('shadows.btn.focusShadow'), _ButtonBase.buttonSystemProps, _sx.default);
+})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}", ";", ""], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.selectedBg'), _ButtonBase.buttonSystemProps, _sx.default);
 var _default = ButtonInvisible;
 exports.default = _default;

package/lib/Button/ButtonTableList.js

@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const ButtonTableList = _styledComponents.default.summary.withConfig({
   displayName: "ButtonTableList",
   componentId: "sc-1m4q8ia-0"
-})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.1'), _constants.COMMON, _constants.TYPOGRAPHY, _constants.LAYOUT, _sx.default);
+})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:", ";cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('space.1'), _constants.COMMON, _constants.TYPOGRAPHY, _constants.LAYOUT, _sx.default);
 
 var _default = ButtonTableList;
 exports.default = _default;

package/lib/Pagination/Pagination.js

@@ -24,7 +24,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const Page = _styledComponents.default.a.withConfig({
   displayName: "Pagination__Page",
   componentId: "b80nss-0"
-})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.1'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), _constants.COMMON);
+})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.1'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), _constants.COMMON);
 
 function usePaginationPages({
   theme,

package/lib/_TextInputWrapper.js

@@ -45,7 +45,7 @@ const TextInputWrapper = _styledComponents.default.span.withConfig({
   } else {
     return (0, _styledComponents.css)(["padding:6px 12px;"]);
   }
-}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
+}, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
 
 var _default = TextInputWrapper;
 exports.default = _default;

package/lib/stories/ActionList.stories.js

@@ -368,18 +368,19 @@ function SizeStressTestingStory() {
       text: 'Block Description.  Long text should wrap',
       description: 'This description is long, but it is block so it wraps',
       descriptionVariant: 'block',
-      trailingIcon: _octiconsReact.ArrowLeftIcon,
+      trailingVisual: _octiconsReact.ArrowLeftIcon,
       showDivider: true
     }, {
       leadingVisual: _octiconsReact.ArrowRightIcon,
       text: 'Inline Description',
       description: 'This description gets truncated because it is inline',
-      trailingIcon: _octiconsReact.ArrowLeftIcon,
+      trailingVisual: _octiconsReact.ArrowLeftIcon,
       showDivider: true
     }, {
       leadingVisual: _octiconsReact.ArrowRightIcon,
       text: 'Really long text without a description should wrap',
       trailingIcon: _octiconsReact.ArrowLeftIcon,
+      // backward compatible
       showDivider: true
     }]
   })));

package/lib/stories/ActionMenu.stories.js

@@ -153,7 +153,7 @@ function ExternalOpenState() {
     }, {
       text: 'Delete file',
       variant: 'danger',
-      trailingText: '⌘D'
+      trailingVisual: '⌘D'
     }]
   })));
 }
@@ -202,6 +202,16 @@ function ComplexListStory() {
       leadingVisual: _octiconsReact.VersionsIcon,
       text: 'Duplicate',
       groupId: '0'
+    }, {
+      leadingVisual: _octiconsReact.SearchIcon,
+      text: 'repo:github/github',
+      groupId: '1',
+      renderItem: props => /*#__PURE__*/_react.default.createElement(_ActionList.ActionList.Item, _extends({
+        style: {
+          color: 'rebeccapurple'
+        }
+      }, props)),
+      trailingVisual: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2318S", /*#__PURE__*/_react.default.createElement(_octiconsReact.ArrowRightIcon, null))
     }, {
       leadingVisual: _octiconsReact.SearchIcon,
       text: 'repo:github/github',
@@ -212,7 +222,9 @@ function ComplexListStory() {
         }
       }, props)),
       trailingText: '⌘S',
-      trailingIcon: _octiconsReact.ArrowRightIcon
+      // backward compatible
+      trailingIcon: _octiconsReact.ArrowRightIcon // backward compatible
+
     }, {
       leadingVisual: _octiconsReact.NoteIcon,
       text: 'Table',

package/lib/stories/Button.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buttonTableList = exports.buttonGroup = exports.closeButton = exports.invisibleButton = exports.primaryButton = exports.outlineButton = exports.dangerButton = exports.defaultButton = exports.default = void 0;
+exports.disabledButton = exports.buttonTableList = exports.buttonGroup = exports.closeButton = exports.invisibleButton = exports.primaryButton = exports.outlineButton = exports.dangerButton = exports.defaultButton = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -88,6 +88,17 @@ const buttonTableList = args => /*#__PURE__*/_react.default.createElement(_.Butt
 
 exports.buttonTableList = buttonTableList;
 buttonTableList.displayName = "buttonTableList";
+
+const disabledButton = args => {
+  const props = {
+    disabled: true,
+    ...args
+  };
+  return /*#__PURE__*/_react.default.createElement(_.Button, props, "Disabled");
+};
+
+exports.disabledButton = disabledButton;
+disabledButton.displayName = "disabledButton";
 defaultButton.args = {
   variant: 'medium'
 };

package/lib-esm/ActionList/Item.d.ts

@@ -28,13 +28,19 @@ export interface ItemProps extends SxProp {
      */
     leadingVisual?: React.FunctionComponent<IconProps>;
     /**
+     * @deprecated Use `trailingVisual` instead
      * Icon (or similar) positioned after `Item` text.
      */
     trailingIcon?: React.FunctionComponent<IconProps>;
     /**
+     * @deprecated Use `trailingVisual` instead
      * Text positioned after `Item` text and optional trailing icon.
      */
     trailingText?: string;
+    /**
+     * Icon or text positioned after `Item` text.
+     */
+    trailingVisual?: React.ReactNode;
     /**
      * Style variations associated with various `Item` types.
      *

package/lib-esm/ActionList/Item.js

@@ -48,9 +48,9 @@ const customItemThemes = {
 const getItemVariant = (variant = 'default', disabled) => {
   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'
     };
   }
@@ -154,6 +154,7 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     selectionVariant,
     leadingVisual: LeadingVisual,
     trailingIcon: TrailingIcon,
+    trailingVisual: TrailingVisual,
     trailingText,
     variant = 'default',
     showDivider,
@@ -245,7 +246,10 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     title: description,
     inline: true,
     maxWidth: "100%"
-  }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
+  }, description)) : null), TrailingVisual ? /*#__PURE__*/React.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/React.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));

package/lib-esm/Button/Button.js

@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
 const Button = styled(ButtonBase).withConfig({
   displayName: "Button",
   componentId: "xjtz72-0"
-})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.fg.muted'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
+})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.primer.fg.disabled'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
 export default Button;

package/lib-esm/Button/ButtonInvisible.js

@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
 const ButtonInvisible = styled(ButtonBase).withConfig({
   displayName: "ButtonInvisible",
   componentId: "sc-1195tpn-0"
-})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], get('colors.accent.fg'), get('radii.2'), get('colors.fg.muted'), get('shadows.btn.focusShadow'), buttonSystemProps, sx);
+})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}", ";", ""], get('colors.accent.fg'), get('radii.2'), get('colors.primer.fg.disabled'), get('shadows.btn.focusShadow'), get('colors.btn.hoverBg'), get('colors.btn.selectedBg'), buttonSystemProps, sx);
 export default ButtonInvisible;

package/lib-esm/Button/ButtonTableList.js

@@ -4,5 +4,5 @@ import sx from '../sx';
 const ButtonTableList = styled.summary.withConfig({
   displayName: "ButtonTableList",
   componentId: "sc-1m4q8ia-0"
-})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.fg.muted'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
+})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:", ";cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.primer.fg.disabled'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
 export default ButtonTableList;

package/lib-esm/Pagination/Pagination.js

@@ -9,7 +9,7 @@ import { buildComponentData, buildPaginationModel } from './model';
 const Page = styled.a.withConfig({
   displayName: "Pagination__Page",
   componentId: "b80nss-0"
-})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.fg.muted'), get('space.1'), get('space.1'), COMMON);
+})(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.primer.fg.disabled'), get('space.1'), get('space.1'), COMMON);
 
 function usePaginationPages({
   theme,

package/lib-esm/_TextInputWrapper.js

@@ -27,5 +27,5 @@ const TextInputWrapper = styled.span.withConfig({
   } else {
     return css(["padding:6px 12px;"]);
   }
-}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.fg.muted'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
+}, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
 export default TextInputWrapper;

package/lib-esm/stories/ActionList.stories.js

@@ -315,18 +315,19 @@ export function SizeStressTestingStory() {
       text: 'Block Description.  Long text should wrap',
       description: 'This description is long, but it is block so it wraps',
       descriptionVariant: 'block',
-      trailingIcon: ArrowLeftIcon,
+      trailingVisual: ArrowLeftIcon,
       showDivider: true
     }, {
       leadingVisual: ArrowRightIcon,
       text: 'Inline Description',
       description: 'This description gets truncated because it is inline',
-      trailingIcon: ArrowLeftIcon,
+      trailingVisual: ArrowLeftIcon,
       showDivider: true
     }, {
       leadingVisual: ArrowRightIcon,
       text: 'Really long text without a description should wrap',
       trailingIcon: ArrowLeftIcon,
+      // backward compatible
       showDivider: true
     }]
   })));

package/lib-esm/stories/ActionMenu.stories.js

@@ -116,7 +116,7 @@ export function ExternalOpenState() {
     }, {
       text: 'Delete file',
       variant: 'danger',
-      trailingText: '⌘D'
+      trailingVisual: '⌘D'
     }]
   })));
 }
@@ -163,6 +163,16 @@ export function ComplexListStory() {
       leadingVisual: VersionsIcon,
       text: 'Duplicate',
       groupId: '0'
+    }, {
+      leadingVisual: SearchIcon,
+      text: 'repo:github/github',
+      groupId: '1',
+      renderItem: props => /*#__PURE__*/React.createElement(ActionList.Item, _extends({
+        style: {
+          color: 'rebeccapurple'
+        }
+      }, props)),
+      trailingVisual: () => /*#__PURE__*/React.createElement(React.Fragment, null, "\u2318S", /*#__PURE__*/React.createElement(ArrowRightIcon, null))
     }, {
       leadingVisual: SearchIcon,
       text: 'repo:github/github',
@@ -173,7 +183,9 @@ export function ComplexListStory() {
         }
       }, props)),
       trailingText: '⌘S',
-      trailingIcon: ArrowRightIcon
+      // backward compatible
+      trailingIcon: ArrowRightIcon // backward compatible
+
     }, {
       leadingVisual: NoteIcon,
       text: 'Table',

package/lib-esm/stories/Button.stories.js

@@ -52,6 +52,14 @@ export const buttonGroup = args => /*#__PURE__*/React.createElement(ButtonGroup,
 buttonGroup.displayName = "buttonGroup";
 export const buttonTableList = args => /*#__PURE__*/React.createElement(ButtonTableList, args, "Button Table List");
 buttonTableList.displayName = "buttonTableList";
+export const disabledButton = args => {
+  const props = {
+    disabled: true,
+    ...args
+  };
+  return /*#__PURE__*/React.createElement(Button, props, "Disabled");
+};
+disabledButton.displayName = "disabledButton";
 defaultButton.args = {
   variant: 'medium'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.0.0-rc.dfe9dc6b",
+  "version": "31.0.1-rc.0f466271",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

package/src/ActionList/Item.tsx

@@ -75,15 +75,22 @@ export interface ItemProps extends SxProp {
   leadingVisual?: React.FunctionComponent<IconProps>
 
   /**
+   * @deprecated Use `trailingVisual` instead
    * Icon (or similar) positioned after `Item` text.
    */
   trailingIcon?: React.FunctionComponent<IconProps>
 
   /**
+   * @deprecated Use `trailingVisual` instead
    * Text positioned after `Item` text and optional trailing icon.
    */
   trailingText?: string
 
+  /**
+   * Icon or text positioned after `Item` text.
+   */
+  trailingVisual?: React.ReactNode
+
   /**
    * Style variations associated with various `Item` types.
    *
@@ -146,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'
     }
   }
@@ -343,6 +350,7 @@ export const Item = React.forwardRef((itemProps, ref) => {
     selectionVariant,
     leadingVisual: LeadingVisual,
     trailingIcon: TrailingIcon,
+    trailingVisual: TrailingVisual,
     trailingText,
     variant = 'default',
     showDivider,
@@ -469,7 +477,12 @@ export const Item = React.forwardRef((itemProps, ref) => {
             </DescriptionContainer>
           ) : null}
         </MainContent>
-        {TrailingIcon || trailingText ? (
+        {/* backward compatibility: prefer TrailingVisual but fallback to TrailingIcon */}
+        {TrailingVisual ? (
+          <TrailingContent variant={variant} disabled={disabled}>
+            {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+          </TrailingContent>
+        ) : TrailingIcon || trailingText ? (
           <TrailingContent variant={variant} disabled={disabled}>
             {trailingText}
             {TrailingIcon && <TrailingIcon />}

package/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')};
   }

package/src/Button/ButtonInvisible.tsx

@@ -12,12 +12,17 @@ const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps &
   box-shadow: none;
 
   &:disabled {
-    color: ${get('colors.fg.muted')};
+    color: ${get('colors.primer.fg.disabled')};
   }
-
   &:focus {
     box-shadow: ${get('shadows.btn.focusShadow')};
   }
+  &:hover {
+    background-color: ${get('colors.btn.hoverBg')};
+  }
+  &:active {
+    background-color: ${get('colors.btn.selectedBg')};
+  }
 
   ${buttonSystemProps};
   ${sx}

package/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;
     }
   }

package/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;
   }

package/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')};
     `}

package/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;
 }

package/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);
 }

package/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"
       >