From 3443dc08666e888d7e6bd37ad5be7cc3e087bcb9 Mon Sep 17 00:00:00 2001 From: github-actions Date: Wed, 10 Feb 2021 23:31:49 -0800 Subject: [PATCH] fix #215 - Fix iconButton pending styles CSS Closes #215 --- package.json | 2 +- src/components/IconButton/index.tsx | 2 +- src/components/IconButton/utils.ts | 27 ++++++++++++++++++--------- src/components/Popover/utils.ts | 2 +- 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index aa28c9ba..82870481 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@dassana-io/web-components", - "version": "0.8.9", + "version": "0.9.0", "publishConfig": { "registry": "https://npm.pkg.github.com/dassana-io" }, diff --git a/src/components/IconButton/index.tsx b/src/components/IconButton/index.tsx index 60388b21..c6e60717 100644 --- a/src/components/IconButton/index.tsx +++ b/src/components/IconButton/index.tsx @@ -81,7 +81,7 @@ const useStyles = createUseStyles({ '& $disabled': generateThemedDisabledStyles(dark), '& $hasBorder': { ...generateThemedHasBorderStyles(dark), - '& $primary': generateThemedPrimaryStyles(dark) + '&$primary': generateThemedPrimaryStyles(dark) }, '& $iconButton': generateThemedIconBtnStyles(dark) }, diff --git a/src/components/IconButton/utils.ts b/src/components/IconButton/utils.ts index cf0938cf..ac3f47cd 100644 --- a/src/components/IconButton/utils.ts +++ b/src/components/IconButton/utils.ts @@ -82,20 +82,29 @@ export const generateThemedPendingStyles = (themeType: ThemeType) => { export const generateThemedPrimaryStyles = (themeType: ThemeType) => { const { + disabled: { color: disabledColor } + } = themedStyles[themeType] + const { + disabledBgColor, primaryBackgroundColor, - primaryDisabledBgColor, - primaryDisabledTextColor, primaryHoverBgColor } = buttonPalette[themeType] return { - '&$disabled': { - backgroundColor: primaryDisabledBgColor, - color: primaryDisabledTextColor - }, - '&:hover': { - backgroundColor: primaryHoverBgColor, - color: blacks['lighten-80'] + '&$circle': { + '&$disabled': { + '&:hover': { + backgroundColor: disabledBgColor, + borderColor: disabledBgColor, + color: disabledColor + }, + backgroundColor: disabledBgColor, + color: disabledColor + }, + '&:hover': { + backgroundColor: primaryHoverBgColor, + color: blacks['lighten-80'] + } }, backgroundColor: primaryBackgroundColor, borderColor: 'transparent', diff --git a/src/components/Popover/utils.ts b/src/components/Popover/utils.ts index c4ce5653..a370cfd1 100644 --- a/src/components/Popover/utils.ts +++ b/src/components/Popover/utils.ts @@ -14,7 +14,7 @@ const { fade } = ColorManipulationTypes const popoverPalette = { [dark]: { - accent: manipulateColor(blacks.base, 72, fade), + accent: manipulateColor(blacks['darken-40'], 72, fade), background: blacks['lighten-10'], text: { title: blacks['lighten-80']