From 54cba0df36ea587f381fba522ff9c0646a9bf22b Mon Sep 17 00:00:00 2001 From: fermarinsanchez Date: Wed, 25 Oct 2023 12:03:41 +0200 Subject: [PATCH] feat(Button): add Selected logic and styles Ref: #issue/BubblesDS-5 --- merged_tokens.json | 87 +++++++++++--- .../form/ActionButton/ActionButton.styles.js | 14 +-- .../src/form/Button/Button.constants.js | 3 + packages/components/src/form/Button/Button.js | 2 + .../src/form/Button/Button.styles.js | 23 +++- packages/components/src/tokens.compiled.js | 110 +++++++++++++----- 6 files changed, 183 insertions(+), 56 deletions(-) diff --git a/merged_tokens.json b/merged_tokens.json index 4b22f6b56..8c34efb7c 100644 --- a/merged_tokens.json +++ b/merged_tokens.json @@ -1145,7 +1145,7 @@ "value": { "fontFamily": "{core.font.family.main}", "fontWeight": "{core.font.weight.regular}", - "lineHeight": "{core.font.lineHeight.300}px", + "lineHeight": "{core.font.lineHeight.200}", "fontSize": "{core.font.size.75}px" }, "type": "typography" @@ -1154,7 +1154,7 @@ "value": { "fontFamily": "{core.font.family.main}", "fontWeight": "{core.font.weight.medium}", - "lineHeight": "{core.font.lineHeight.300}px", + "lineHeight": "{core.font.lineHeight.200}", "fontSize": "{core.font.size.75}px" }, "type": "typography" @@ -1163,7 +1163,7 @@ "value": { "fontFamily": "{core.font.family.main}", "fontWeight": "{core.font.weight.semiBold}", - "lineHeight": "{core.font.lineHeight.300}px", + "lineHeight": "{core.font.lineHeight.200}", "fontSize": "{core.font.size.75}px" }, "type": "typography" @@ -1502,6 +1502,12 @@ "value": "{core.color.info.100}", "type": "color" } + }, + "tertiary": { + "default": { + "value": "{core.color.tertiary.100}", + "type": "color" + } } } }, @@ -1702,6 +1708,12 @@ "value": "{core.color.info.100}", "type": "color" } + }, + "tertiary": { + "default": { + "value": "{core.color.tertiary.100}", + "type": "color" + } } } }, @@ -2076,6 +2088,10 @@ "value": "{global.background.color.primary.default}", "type": "color" }, + "selected": { + "value": "{global.background.color.primary.muted}", + "type": "color" + }, "pressed": { "value": "{global.background.color.primary.emphasis}", "type": "color" @@ -2113,7 +2129,7 @@ "type": "color" }, "pressed": { - "value": "{global.background.color.primary.muted}", + "value": "{global.background.color.primary.emphasis}", "type": "color" } }, @@ -2894,13 +2910,13 @@ }, "spacing": { "padding": { - "md": { - "value": "{global.spacing.padding.1xsm}", - "type": "spacing" - }, "sm": { "value": "{global.spacing.padding.2xsm}", "type": "spacing" + }, + "md": { + "value": "{global.spacing.padding.1xsm}", + "type": "spacing" } } }, @@ -3325,6 +3341,14 @@ }, "content": { "color": { + "text": { + "value": "{global.content.color.text.default}", + "type": "color" + }, + "selected": { + "value": "{global.content.color.tertiary.default}", + "type": "color" + }, "default": { "value": "{global.content.color.transparent}", "type": "color" @@ -3336,10 +3360,6 @@ "hover": { "value": "{global.content.color.text.muted}", "type": "color" - }, - "selected": { - "value": "{global.content.color.primary.default}", - "type": "color" } } }, @@ -3378,11 +3398,11 @@ "type": "color" }, "hover": { - "value": "{global.border.color.primary.muted}", + "value": "{global.border.color.tertiary.default}", "type": "color" }, "selected": { - "value": "{global.border.color.primary.default}", + "value": "{global.border.color.tertiary.default}", "type": "color" } } @@ -3402,6 +3422,27 @@ "type": "spacing" } } + }, + "shadow": { + "hover": { + "value": { + "x": "0", + "y": "0", + "blur": "2", + "spread": "0", + "color": "rgba({core.color.tertiary.100}, 0.80)", + "type": "dropShadow" + }, + "type": "boxShadow" + } + }, + "label": { + "content": { + "typo": { + "value": "{global.content.typo.body.sm}", + "type": "typography" + } + } } }, "checkbox": { @@ -4356,10 +4397,6 @@ }, "border": { "color": { - "default": { - "value": "{global.border.color.transparent}", - "type": "color" - }, "hover": { "value": "{global.border.color.line.subtle}", "type": "color" @@ -4368,10 +4405,14 @@ "value": "{global.border.color.primary.default}", "type": "color" }, - "down-copy": { + "content": { "value": "{global.border.color.line.subtle}", "type": "color" }, + "default": { + "value": "{global.border.color.transparent}", + "type": "color" + }, "down": { "value": "{global.border.color.primary.default}", "type": "color" @@ -4404,6 +4445,10 @@ "value": "{global.background.color.primary.subtle}", "type": "color" }, + "selected": { + "value": "{global.background.color.transparent}", + "type": "color" + }, "down": { "value": "{global.background.color.transparent}", "type": "color" @@ -6387,6 +6432,10 @@ } }, "gap": { + "sm": { + "value": "{global.spacing.gap.sm}", + "type": "spacing" + }, "md": { "value": "{global.spacing.gap.md}", "type": "spacing" diff --git a/packages/components/src/form/ActionButton/ActionButton.styles.js b/packages/components/src/form/ActionButton/ActionButton.styles.js index 8ce074dd1..b79cbf770 100644 --- a/packages/components/src/form/ActionButton/ActionButton.styles.js +++ b/packages/components/src/form/ActionButton/ActionButton.styles.js @@ -1,5 +1,6 @@ +/* eslint-disable import/prefer-default-export */ import { createStyles } from '@mantine/styles'; -import { pxToRem, getFocusDefaultBorder } from './../../theme.mixins'; +import { pxToRem, getFocusDefaultBorder } from '../../theme.mixins'; // These are really the styles when it is hovered, but they are applied when `active` prop is `true` const getActiveStyles = (theme, color) => { @@ -12,12 +13,10 @@ const getActiveStyles = (theme, color) => { }; return activeStyles[color]; }; -const getSizes = (size, padding) => { - return { - height: 'unset', - padding: padding[size], - }; -}; +const getSizes = (size, padding) => ({ + height: 'unset', + padding: padding[size], +}); const getVariant = (color, theme) => { const buttonActionTheme = theme.other.buttonAction; @@ -46,7 +45,6 @@ export const ActionButtonStyles = createStyles( (theme, { size, color, iconOnly, radius, active }) => { const actionButtonTheme = theme.other.buttonAction; const iconSize = size === 'md' ? 'lg' : 'md'; - console.log(theme); const isActive = active ? getActiveStyles(actionButtonTheme, color) : {}; diff --git a/packages/components/src/form/Button/Button.constants.js b/packages/components/src/form/Button/Button.constants.js index dab57a3ea..479d6fc41 100644 --- a/packages/components/src/form/Button/Button.constants.js +++ b/packages/components/src/form/Button/Button.constants.js @@ -17,6 +17,7 @@ export const BUTTON_DEFAULT_PROPS = { disabled: false, textAlign: BUTTON_TEXT_ALIGN[0], useAria: true, + isSelected: false, }; export const BUTTON_PROP_TYPES = { @@ -46,4 +47,6 @@ export const BUTTON_PROP_TYPES = { useAria: PropTypes.bool, /** Aria label for button */ ariaLabel: PropTypes.string, + /** Controls if Button is selected */ + isSelected: PropTypes.bool, }; diff --git a/packages/components/src/form/Button/Button.js b/packages/components/src/form/Button/Button.js index 88fa9cd51..c84f4f373 100644 --- a/packages/components/src/form/Button/Button.js +++ b/packages/components/src/form/Button/Button.js @@ -31,6 +31,7 @@ const Button = forwardRef( useAria, ariaLabel, textAlign, + isSelected, compact, // UNUSED gradient, // UNUSED radius, // UNUSED @@ -58,6 +59,7 @@ const Button = forwardRef( styles, hasLeftIcon, hasRightIcon, + isSelected, }, { name: 'Button' } ); diff --git a/packages/components/src/form/Button/Button.styles.js b/packages/components/src/form/Button/Button.styles.js index 90d575b0c..cf457d52f 100644 --- a/packages/components/src/form/Button/Button.styles.js +++ b/packages/components/src/form/Button/Button.styles.js @@ -11,6 +11,15 @@ const getSizes = (size, theme) => { }; }; +const getIsSelected = (isSelected, theme) => { + if (!isSelected) return; + const buttonStyles = theme.other.button; + return { + backgroundColor: buttonStyles.background.color.primary.selected, + borderRadius: `${buttonStyles.border.radius.md} ${buttonStyles.border.radius.md} 0 0 !important`, + }; +}; + const getPaddingIfIcon = (hasLeftIcon, hasRightIcon, theme) => { if (!hasLeftIcon && !hasRightIcon) return; const buttonPadding = theme.other.button.spacing.padding; @@ -144,7 +153,18 @@ const getVariant = (variant, theme, color) => { export const ButtonStyles = createStyles( ( theme, - { size, color, variant, fullWidth, styles, textAlign, disabled, hasLeftIcon, hasRightIcon } + { + size, + color, + variant, + fullWidth, + styles, + textAlign, + disabled, + hasLeftIcon, + hasRightIcon, + isSelected, + } ) => { const currentVariant = getVariant(variant, theme, color); const buttonTheme = theme.other.button; @@ -182,6 +202,7 @@ export const ButtonStyles = createStyles( ...getVariant(variant, theme, color), ...styles, ...getPaddingIfIcon(hasLeftIcon, hasRightIcon, theme), + ...getIsSelected(isSelected, theme), '&[data-loading]': { // borderColor: 'transparent', svg: { diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js index dfda0561d..e09d90bee 100644 --- a/packages/components/src/tokens.compiled.js +++ b/packages/components/src/tokens.compiled.js @@ -81,7 +81,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 400, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -90,7 +90,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 500, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -116,6 +116,10 @@ export default { "value": "#B4E600", "type": "color" }, + "selected": { + "value": "#E2FF7A", + "type": "color" + }, "pressed": { "value": "#98C200", "type": "color" @@ -153,7 +157,7 @@ export default { "type": "color" }, "pressed": { - "value": "#E2FF7A", + "value": "#98C200", "type": "color" } }, @@ -934,13 +938,13 @@ export default { }, "spacing": { "padding": { - "md": { - "value": "6px", - "type": "spacing" - }, "sm": { "value": "4px", "type": "spacing" + }, + "md": { + "value": "6px", + "type": "spacing" } } }, @@ -1155,7 +1159,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 400, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -1287,7 +1291,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 600, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -1296,7 +1300,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 400, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -1376,6 +1380,14 @@ export default { }, "content": { "color": { + "text": { + "value": "#4D5358", + "type": "color" + }, + "selected": { + "value": "#2F463F", + "type": "color" + }, "default": { "value": "transparent", "type": "color" @@ -1387,10 +1399,6 @@ export default { "hover": { "value": "#878D96", "type": "color" - }, - "selected": { - "value": "#B4E600", - "type": "color" } } }, @@ -1429,11 +1437,11 @@ export default { "type": "color" }, "hover": { - "value": "#E2FF7A", + "value": "#2F463F", "type": "color" }, "selected": { - "value": "#B4E600", + "value": "#2F463F", "type": "color" } } @@ -1453,6 +1461,32 @@ export default { "type": "spacing" } } + }, + "shadow": { + "hover": { + "value": { + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "color": "#2f463fcc", + "type": "dropShadow" + }, + "type": "boxShadow" + } + }, + "label": { + "content": { + "typo": { + "value": { + "fontFamily": "Albert Sans", + "fontWeight": 400, + "lineHeight": 20, + "fontSize": "14px" + }, + "type": "typography" + } + } } }, "checkbox": { @@ -2284,7 +2318,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 600, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -2431,10 +2465,6 @@ export default { }, "border": { "color": { - "default": { - "value": "transparent", - "type": "color" - }, "hover": { "value": "#DDE1E6", "type": "color" @@ -2443,10 +2473,14 @@ export default { "value": "#B4E600", "type": "color" }, - "down-copy": { + "content": { "value": "#DDE1E6", "type": "color" }, + "default": { + "value": "transparent", + "type": "color" + }, "down": { "value": "#B4E600", "type": "color" @@ -2479,6 +2513,10 @@ export default { "value": "#F1FFBD", "type": "color" }, + "selected": { + "value": "transparent", + "type": "color" + }, "down": { "value": "transparent", "type": "color" @@ -3712,7 +3750,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 400, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -3721,7 +3759,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 500, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -4156,7 +4194,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 600, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -4513,6 +4551,10 @@ export default { } }, "gap": { + "sm": { + "value": "4px", + "type": "spacing" + }, "md": { "value": "8px", "type": "spacing" @@ -5053,7 +5095,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 400, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -5062,7 +5104,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 500, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -5071,7 +5113,7 @@ export default { "value": { "fontFamily": "Albert Sans", "fontWeight": 600, - "lineHeight": "24px", + "lineHeight": 20, "fontSize": "14px" }, "type": "typography" @@ -5410,6 +5452,12 @@ export default { "value": "#E8F0FC", "type": "color" } + }, + "tertiary": { + "default": { + "value": "#2F463F", + "type": "color" + } } } }, @@ -5611,6 +5659,12 @@ export default { "value": "#E8F0FC", "type": "color" } + }, + "tertiary": { + "default": { + "value": "#2F463F", + "type": "color" + } } } },