From 57b66e3338a345a900d80bcc82cc75a58c1467e1 Mon Sep 17 00:00:00 2001 From: PK Date: Wed, 13 Oct 2021 11:00:26 +1100 Subject: [PATCH] Set disabled color where required Switched muted to new disabled color Update snapshot tests --- src/ActionList/Header.tsx | 2 +- src/ActionList/Item.tsx | 14 +++++++------- src/BranchName.tsx | 2 +- src/Breadcrumbs.tsx | 2 +- src/Button/Button.tsx | 2 +- src/Button/ButtonClose.tsx | 2 +- src/Button/ButtonInvisible.tsx | 2 +- src/Button/ButtonTableList.tsx | 4 ++-- src/Dialog/ConfirmationDialog.tsx | 2 +- src/Dialog/Dialog.tsx | 4 ++-- src/FilterList.tsx | 2 +- src/Label.tsx | 2 +- src/Link.tsx | 2 +- src/Pagination/Pagination.tsx | 2 +- src/SelectMenu/SelectMenuDivider.tsx | 2 +- src/SelectMenu/SelectMenuFooter.tsx | 2 +- src/SelectMenu/SelectMenuItem.tsx | 2 +- src/SelectMenu/SelectMenuTab.tsx | 2 +- src/SubNav.tsx | 2 +- src/Timeline.tsx | 4 ++-- src/Token/Token.tsx | 2 +- src/UnderlineNav.tsx | 2 +- src/_TextInputWrapper.tsx | 4 ++-- .../__snapshots__/Pagination.test.tsx.snap | 1 - .../__snapshots__/ActionMenu.test.tsx.snap | 1 - .../AnchoredOverlay.test.tsx.snap | 4 +--- .../__snapshots__/Autocomplete.test.tsx.snap | 8 -------- .../__snapshots__/BranchName.test.tsx.snap | 1 - .../__snapshots__/Button.test.tsx.snap | 9 +-------- .../ConfirmationDialog.test.tsx.snap | 1 - .../__snapshots__/Dialog.test.tsx.snap | 1 - .../__snapshots__/Dropdown.test.tsx.snap | 1 - .../__snapshots__/DropdownMenu.test.tsx.snap | 1 - .../FilterListItem.test.tsx.snap | 1 - .../__snapshots__/Label.test.tsx.snap | 1 - .../__snapshots__/Link.test.tsx.snap | 2 -- .../__snapshots__/SelectMenu.test.tsx.snap | 4 ---- .../__snapshots__/SelectPanel.test.tsx.snap | 1 - .../__snapshots__/SubNavLink.test.tsx.snap | 15 --------------- .../__snapshots__/TextInput.test.tsx.snap | 6 ------ .../TextInputWithTokens.test.tsx.snap | 19 ------------------- .../__snapshots__/Timeline.test.tsx.snap | 1 - .../__snapshots__/Token.test.tsx.snap | 14 -------------- .../UnderlineNavLink.test.tsx.snap | 15 --------------- src/stories/Button.stories.tsx | 4 ++++ 45 files changed, 39 insertions(+), 138 deletions(-) diff --git a/src/ActionList/Header.tsx b/src/ActionList/Header.tsx index 9c2ee80d91b..9d5b2b2bec7 100644 --- a/src/ActionList/Header.tsx +++ b/src/ActionList/Header.tsx @@ -37,7 +37,7 @@ export const StyledHeader = styled.div<{variant: HeaderProps['variant']} & SxPro padding: 6px ${get('space.3')}; font-size: ${get('fontSizes.0')}; font-weight: ${get('fontWeights.bold')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; ${({variant}) => variant === 'filled' && diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx index abfe265d308..9103aa88e68 100644 --- 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' } } @@ -158,14 +158,14 @@ const getItemVariant = (variant = 'default', disabled?: boolean) => { return { color: get('colors.danger.fg'), iconColor: get('colors.danger.fg'), - annotationColor: get('colors.fg.muted'), + annotationColor: get('colors.primer.fg.disabled'), hoverCursor: 'pointer' } default: return { color: get('colors.fg.default'), - iconColor: get('colors.fg.muted'), - annotationColor: get('colors.fg.muted'), + iconColor: get('colors.primer.fg.disabled'), + annotationColor: get('colors.primer.fg.disabled'), hoverCursor: 'pointer' } } @@ -315,7 +315,7 @@ const TrailingContent = styled(ColoredVisualContainer)` ` const DescriptionContainer = styled.span` - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; font-size: ${get('fontSizes.0')}; // TODO: When rem-based spacing on a 4px scale lands, replace // hardcoded '16px' with '${get('lh-12')}'. diff --git a/src/BranchName.tsx b/src/BranchName.tsx index 9fbeca0e651..b4c8e252d4d 100644 --- a/src/BranchName.tsx +++ b/src/BranchName.tsx @@ -8,7 +8,7 @@ const BranchName = styled.a` padding: 2px 6px; font-size: ${get('fontSizes.0')}; font-family: ${get('fonts.mono')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; background-color: ${get('colors.accent.subtle')}; border-radius: ${get('radii.2')}; ${COMMON}; diff --git a/src/Breadcrumbs.tsx b/src/Breadcrumbs.tsx index 1a2640aa8fc..9b8f7acb467 100644 --- a/src/Breadcrumbs.tsx +++ b/src/Breadcrumbs.tsx @@ -17,7 +17,7 @@ const Wrapper = styled.li` &::after { padding-right: 0.5em; padding-left: 0.5em; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; font-size: ${get('fontSizes.1')}; content: '/'; } diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index 7080b93204b..5ae1fb1a1e6 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -27,7 +27,7 @@ const Button = styled(ButtonBase)` } &: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/ButtonClose.tsx b/src/Button/ButtonClose.tsx index 690ec4927f4..ee1ea1cdefd 100644 --- a/src/Button/ButtonClose.tsx +++ b/src/Button/ButtonClose.tsx @@ -14,7 +14,7 @@ const StyledButton = styled.button` outline: none; cursor: pointer; border-radius: ${get('radii.2')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; &:focus { box-shadow: ${get('shadows.btn.focusShadow')}; diff --git a/src/Button/ButtonInvisible.tsx b/src/Button/ButtonInvisible.tsx index 22f2aef8d82..aac63a9c4d4 100644 --- a/src/Button/ButtonInvisible.tsx +++ b/src/Button/ButtonInvisible.tsx @@ -12,7 +12,7 @@ const ButtonInvisible = styled(ButtonBase)` display: inline-block; padding: 0; font-size: ${get('fontSizes.1')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; text-decoration: none; white-space: nowrap; cursor: pointer; @@ -33,7 +33,7 @@ const ButtonTableList = styled.summary` &:disabled { &, &:hover { - color: rgba(${get('colors.fg.muted')}, 0.5); + color: rgba(${get('colors.primer.fg.disabled')}, 0.5); cursor: default; } } diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx index 6b5f9e04e53..7576023e197 100644 --- a/src/Dialog/ConfirmationDialog.tsx +++ b/src/Dialog/ConfirmationDialog.tsx @@ -65,7 +65,7 @@ const ConfirmationHeader: React.FC = ({title, onClose, dialog const StyledConfirmationBody = styled(Box)` font-size: ${get('fontSizes.1')}; padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; flex-grow: 1; ` const ConfirmationBody: React.FC = ({children}) => { diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx index e94def002b3..4068e08e29b 100644 --- a/src/Dialog/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -322,7 +322,7 @@ const Title = styled(Box)` const Subtitle = styled(Box)` font-size: ${get('fontSizes.0')}; margin-top: ${get('space.1')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; ` const Body = styled(Box)` flex-grow: 1; @@ -386,7 +386,7 @@ const DialogCloseButton = styled(Button)` background: transparent; border: 0; vertical-align: middle; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; padding: ${get('space.2')}; align-self: flex-start; line-height: normal; diff --git a/src/FilterList.tsx b/src/FilterList.tsx index 463f0fabddc..ccf0f15acaa 100644 --- a/src/FilterList.tsx +++ b/src/FilterList.tsx @@ -33,7 +33,7 @@ const FilterListItemBase = styled.a` margin: ${props => (props.small ? '0 0 2px' : '0 0 5px 0')}; overflow: hidden; font-size: ${get('fontSizes.1')}; - color: ${props => (props.selected ? get('colors.fg.onEmphasis') : get('colors.fg.muted'))}; + color: ${props => (props.selected ? get('colors.fg.onEmphasis') : get('colors.primer.fg.disabled'))}; background-color: ${props => (props.selected ? get('colors.accent.emphasis') : '')}!important; text-decoration: none; text-overflow: ellipsis; diff --git a/src/Label.tsx b/src/Label.tsx index 04816a5e3c0..507f4622c50 100644 --- a/src/Label.tsx +++ b/src/Label.tsx @@ -7,7 +7,7 @@ import {ComponentProps} from './utils/types' const outlineStyles = css` margin-top: -1px; // offsets the 1px border margin-bottom: -1px; // offsets the 1px border - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; border: ${get('borderWidths.1')} solid ${get('colors.border.default')}; box-shadow: none; ${borderColor}; diff --git a/src/Link.tsx b/src/Link.tsx index a382b445527..9e42191db21 100644 --- a/src/Link.tsx +++ b/src/Link.tsx @@ -20,7 +20,7 @@ const hoverColor = system({ }) const Link = styled.a` - color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))}; + color: ${props => (props.muted ? get('colors.primer.fg.disabled')(props) : get('colors.accent.fg')(props))}; text-decoration: ${props => (props.underline ? 'underline' : 'none')}; &:hover { text-decoration: ${props => (props.muted ? 'none' : 'underline')}; diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx index dda8ad9d98b..196b314daae 100644 --- 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/SelectMenu/SelectMenuDivider.tsx b/src/SelectMenu/SelectMenuDivider.tsx index 069134b7de9..ff667b1a7ae 100644 --- a/src/SelectMenu/SelectMenuDivider.tsx +++ b/src/SelectMenu/SelectMenuDivider.tsx @@ -8,7 +8,7 @@ const dividerStyles = css` margin: 0; font-size: ${get('fontSizes.0')}; font-weight: ${get('fontWeights.bold')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; background-color: ${get('colors.canvas.subtle')}; border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')}; ` diff --git a/src/SelectMenu/SelectMenuFooter.tsx b/src/SelectMenu/SelectMenuFooter.tsx index 3aa5b1dd350..7656c1c8103 100644 --- a/src/SelectMenu/SelectMenuFooter.tsx +++ b/src/SelectMenu/SelectMenuFooter.tsx @@ -7,7 +7,7 @@ const footerStyles = css` margin-top: -1px; padding: ${get('space.2')} ${get('space.3')}; font-size: ${get('fontSizes.0')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; text-align: center; border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')}; diff --git a/src/SelectMenu/SelectMenuItem.tsx b/src/SelectMenu/SelectMenuItem.tsx index bd192cded43..26bc219f964 100644 --- a/src/SelectMenu/SelectMenuItem.tsx +++ b/src/SelectMenu/SelectMenuItem.tsx @@ -17,7 +17,7 @@ export const listItemStyles = css` background-color: ${get('colors.canvas.overlay')}; border: 0; border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; text-decoration: none; font-size: ${get('fontSizes.0')}; font-family: inherit; // needed if user uses a "button" tag diff --git a/src/SelectMenu/SelectMenuTab.tsx b/src/SelectMenu/SelectMenuTab.tsx index f986d234eaf..a16fc41ad83 100644 --- a/src/SelectMenu/SelectMenuTab.tsx +++ b/src/SelectMenu/SelectMenuTab.tsx @@ -11,7 +11,7 @@ const tabStyles = css` padding: ${get('space.2')} ${get('space.3')}; font-size: ${get('fontSizes.0')}; font-weight: 500; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; text-align: center; background-color: transparent; border: 0; diff --git a/src/SubNav.tsx b/src/SubNav.tsx index e0f0a889c80..7751da94cbb 100644 --- a/src/SubNav.tsx +++ b/src/SubNav.tsx @@ -104,7 +104,7 @@ const SubNavLink = styled.a.attrs(props => ({ transition: 0.2s ease; .SubNav-octicon { - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; } } diff --git a/src/Timeline.tsx b/src/Timeline.tsx index 20ae97b66ae..810d53b2836 100644 --- a/src/Timeline.tsx +++ b/src/Timeline.tsx @@ -58,7 +58,7 @@ const TimelineItem = styled(Box).attrs(props => ({ height: 16px; margin-top: ${get('space.2')}; margin-bottom: ${get('space.2')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; background-color: ${get('colors.canvas.default')}; border: 0; } @@ -102,7 +102,7 @@ const TimelineBody = styled(Box)` min-width: 0; max-width: 100%; margin-top: ${get('space.1')}; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; flex: auto; font-size: ${get('fontSizes.1')}; ${sx}; diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx index e4a010057ae..adbacd18947 100644 --- a/src/Token/Token.tsx +++ b/src/Token/Token.tsx @@ -25,7 +25,7 @@ const DefaultTokenStyled = styled(TokenBase) (props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'))}; border-style: solid; border-width: ${tokenBorderWidthPx}px; - color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'))}; + color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.primer.fg.disabled'))}; max-width: 100%; padding-right: ${props => (!props.hideRemoveButton ? 0 : undefined)}; position: relative; diff --git a/src/UnderlineNav.tsx b/src/UnderlineNav.tsx index e2cf2406e7e..a3f7ab13aca 100644 --- a/src/UnderlineNav.tsx +++ b/src/UnderlineNav.tsx @@ -87,7 +87,7 @@ const UnderlineNavLink = styled.a.attrs(props => ({ transition: 0.2s ease; .UnderlineNav-octicon { - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; } } diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx index 531d891412c..0a24f1f8671 100644 --- a/src/_TextInputWrapper.tsx +++ b/src/_TextInputWrapper.tsx @@ -60,7 +60,7 @@ const TextInputWrapper = styled.span` .TextInput-icon { align-self: center; - color: ${get('colors.fg.muted')}; + color: ${get('colors.primer.fg.disabled')}; margin: 0 ${get('space.2')}; flex-shrink: 0; } @@ -79,7 +79,7 @@ const TextInputWrapper = styled.span` ${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 index 5f6f42ce4d7..ec498e1c278 100644 --- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -61,7 +61,6 @@ exports[`Pagination renders consistently 1`] = ` .c2[aria-disabled], .c2[aria-disabled]:hover { - 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 index 3dc709c2345..ded891f8b52 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -62,7 +62,6 @@ exports[`ActionMenu renders consistently 1`] = ` } .c0:disabled { - 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 index 85ff1f9b4cb..1fd80c07d5a 100644 --- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap @@ -68,7 +68,6 @@ exports[`AnchoredOverlay renders consistently 1`] = ` } .c1:disabled { - color: #57606a; background-color: #f6f8fa; border-color: rgba(27,31,36,0.15); } @@ -163,7 +162,6 @@ Object { } .c1:disabled { - color: #57606a; background-color: #f6f8fa; border-color: rgba(27,31,36,0.15); } @@ -243,7 +241,7 @@ Object { +} defaultButton.args = {variant: 'medium'} dangerButton.args = {variant: 'medium'}