From 3ce21d4633eca18fedd925967aa5bf8191eeef8e Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Wed, 15 Apr 2020 16:01:03 -0700 Subject: [PATCH 1/3] fix(button): Use correct background color for icon button focus states --- modules/button/react/lib/IconButton.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/button/react/lib/IconButton.tsx b/modules/button/react/lib/IconButton.tsx index 1e482bd1f5..a91a0c5073 100644 --- a/modules/button/react/lib/IconButton.tsx +++ b/modules/button/react/lib/IconButton.tsx @@ -129,7 +129,7 @@ const getIconButtonColors = ( icon: toggled ? theme.palette.primary.contrast : colors.licorice500, }, focus: { - background: toggled ? theme.palette.primary.dark : colors.soap300, + background: toggled ? theme.palette.primary.main : undefined, icon: toggled ? theme.palette.primary.contrast : colors.licorice500, }, disabled: { @@ -153,7 +153,7 @@ const getIconButtonColors = ( icon: toggled ? theme.palette.primary.contrast : colors.licorice500, }, focus: { - background: toggled ? theme.palette.primary.dark : colors.soap400, + background: toggled ? theme.palette.primary.main : colors.soap200, icon: toggled ? theme.palette.primary.contrast : colors.licorice500, }, disabled: { @@ -195,7 +195,7 @@ const getIconButtonColors = ( icon: toggled ? theme.palette.primary.main : theme.palette.primary.contrast, }, focus: { - background: toggled ? theme.palette.primary.contrast : 'rgba(0, 0, 0, 0.2)', + background: toggled ? theme.palette.primary.contrast : undefined, icon: toggled ? theme.palette.primary.main : theme.palette.primary.contrast, focusRing: themedFocusRing(theme, { separation: 2, From e64abe562a99332bb7badd22649ccccf2834f7ba Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Wed, 15 Apr 2020 16:04:17 -0700 Subject: [PATCH 2/3] docs: Add missing button PR to migration guide --- 4.0-MIGRATION-GUIDE.md | 1 + 1 file changed, 1 insertion(+) diff --git a/4.0-MIGRATION-GUIDE.md b/4.0-MIGRATION-GUIDE.md index cef8adf1e5..2f2d746247 100644 --- a/4.0-MIGRATION-GUIDE.md +++ b/4.0-MIGRATION-GUIDE.md @@ -48,6 +48,7 @@ PRs: - https://github.com/Workday/canvas-kit/pull/509 - https://github.com/Workday/canvas-kit/pull/527 - https://github.com/Workday/canvas-kit/pull/540 +- https://github.com/Workday/canvas-kit/pull/541 #### Changes From a50b7a4156a06b1f4cf6a080d2f66fb17c9411c2 Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Wed, 15 Apr 2020 16:26:03 -0700 Subject: [PATCH 3/3] fix(button): Update css text button states to match recent updates --- modules/button/css/lib/text-button.scss | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/modules/button/css/lib/text-button.scss b/modules/button/css/lib/text-button.scss index 2a799c0d5d..7d4aa68c98 100644 --- a/modules/button/css/lib/text-button.scss +++ b/modules/button/css/lib/text-button.scss @@ -25,17 +25,23 @@ } &:hover:not([disabled]) { - background-color: transparent; + background-color: $wdc-color-soap-200; text-decoration: underline; color: $wdc-btn-text-hover; @include wdc-icon-color($wdc-btn-text-hover); } - &:focus { + &:focus:not([disabled]) { background-color: transparent; @include wdc-icon-color($wdc-btn-text-hover); } + &:active:not([disabled]) { + color: $wdc-btn-text-hover; + background-color: $wdc-color-soap-300; + @include wdc-icon-color($wdc-btn-text-hover); + } + &.wdc-btn-disabled, &.wdc-btn-disabled:hover, &:disabled, @@ -69,9 +75,16 @@ @include wdc-icon-color(rgba(255, 255, 255, 0.5)); } - &:hover:not([disabled]) { - color: $wdc-btn-text-color-inverse; - @include wdc-icon-color($wdc-btn-text-color-inverse); + &:not([disabled]) { + &:hover { + background-color: $wdc-color-french-vanilla-100; + color: $wdc-color-black-pepper-400; + @include wdc-icon-color($wdc-btn-text-color-inverse); + } + &:active { + color: $wdc-color-black-pepper-400; + background-color: $wdc-color-soap-200; + } } } }