From c05b29926244dc1b262917a4a09f2c84dc2e5981 Mon Sep 17 00:00:00 2001 From: shleewhite Date: Wed, 3 Aug 2022 14:14:45 -0700 Subject: [PATCH 1/3] fix(form-pill-group): style bugs --- .changeset/fair-grapes-raise.md | 6 +++ .../form-pill-group/src/FormPill.styles.ts | 50 ++++--------------- .../form-pill-group/src/FormPill.tsx | 5 +- .../form-pill-group/src/FormPillButton.tsx | 4 +- 4 files changed, 21 insertions(+), 44 deletions(-) create mode 100644 .changeset/fair-grapes-raise.md diff --git a/.changeset/fair-grapes-raise.md b/.changeset/fair-grapes-raise.md new file mode 100644 index 0000000000..adde8b97a8 --- /dev/null +++ b/.changeset/fair-grapes-raise.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/form-pill-group': patch +'@twilio-paste/core': patch +--- + +[Form Pill Group] fix small style issues diff --git a/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts b/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts index 5eb3cd7082..235d3b7cee 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts +++ b/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts @@ -1,39 +1,5 @@ import type {VariantStyles} from './types'; -/** - * Wrapper styles - */ - -export const wrapperStyles: VariantStyles = { - default: { - color: 'colorTextIcon', - _hover: { - color: 'colorTextLinkStronger', - }, - }, - error: { - color: 'colorTextIcon', - _hover: { - color: 'colorTextErrorStronger', - }, - }, -}; - -export const selectedWrapperStyles: VariantStyles = { - default: { - color: 'colorTextWeakest', - _hover: { - color: 'colorTextInverse', - }, - }, - error: { - color: 'colorTextInverse', - _hover: { - color: 'colorTextWeakest', - }, - }, -}; - /* * Pill styles */ @@ -97,7 +63,7 @@ export const hoverPillStyles: VariantStyles = { _selected_hover: { backgroundColor: 'colorBackgroundPrimary', borderColor: 'transparent', - color: 'inherit', + color: 'colorTextInverse', }, _focus_hover: { borderColor: 'transparent', @@ -109,12 +75,12 @@ export const hoverPillStyles: VariantStyles = { _hover: { borderColor: 'colorBorderErrorStronger', - color: 'inherit', + color: 'colorTextErrorStronger', }, _selected_hover: { backgroundColor: 'colorBackgroundErrorStrongest', borderColor: 'transparent', - color: 'inherit', + color: 'colorTextWeakest', }, _focus_hover: { borderColor: 'transparent', @@ -128,34 +94,40 @@ export const hoverPillStyles: VariantStyles = { export const closeStyles: VariantStyles = { default: { - color: 'inherit', + color: 'colorTextIcon', _hover: { cursor: 'pointer', borderColor: 'colorBorderPrimaryStronger', + color: 'colorTextLinkStronger', }, }, error: { - color: 'inherit', + color: 'colorTextIcon', _hover: { cursor: 'pointer', borderColor: 'colorBorderErrorStronger', + color: 'colorTextErrorStronger', }, }, }; export const selectedCloseStyles: VariantStyles = { default: { + color: 'colorTextWeakest', _hover: { cursor: 'pointer', borderColor: 'transparent', backgroundColor: 'colorBackgroundPrimary', + color: 'colorTextInverse', }, }, error: { + color: 'colorTextInverse', _hover: { cursor: 'pointer', borderColor: 'transparent', backgroundColor: 'colorBackgroundErrorStrongest', + color: 'colorTextWeakest', }, }, }; diff --git a/packages/paste-core/components/form-pill-group/src/FormPill.tsx b/packages/paste-core/components/form-pill-group/src/FormPill.tsx index 1ad2370175..fa06e1b525 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPill.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPill.tsx @@ -5,7 +5,6 @@ import {CompositeItem} from '@twilio-paste/reakit-library'; import type {CompositeStateReturn} from '@twilio-paste/reakit-library'; import {PillCloseIcon} from './PillCloseIcon'; import {FormPillButton} from './FormPillButton'; -import {wrapperStyles, selectedWrapperStyles} from './FormPill.styles'; import type {PillVariant} from './types'; interface FormPillProps extends CompositeStateReturn, Pick { @@ -63,8 +62,6 @@ export const FormPill = React.forwardRef( const isHoverable = onSelect != null; const isDismissable = onDismiss != null; - const computedStyles = selected ? selectedWrapperStyles[variant] : wrapperStyles[variant]; - // Handles delete and backspace keypresses const handleKeydown = React.useCallback( (event: React.KeyboardEvent) => { @@ -80,7 +77,7 @@ export const FormPill = React.forwardRef( [onDismiss, next] ); return ( - + role="option" type="button" as="button" + margin="space0" position="relative" borderRadius="borderRadiusPill" borderWidth="borderWidth10" borderColor="transparent" + borderStyle="solid" cursor="default" height="sizeIcon40" fontFamily="inherit" @@ -67,7 +69,7 @@ export const FormPillButton = React.forwardRef {variant === 'error' ? ( <> - + {i18nErrorLabel} ) : null} From a5d86dd44db941a88e6dd7a432e0d8ef19311101 Mon Sep 17 00:00:00 2001 From: shleewhite Date: Fri, 5 Aug 2022 14:42:23 -0700 Subject: [PATCH 2/3] fix: final hover styles fix --- .../components/form-pill-group/package.json | 3 + .../form-pill-group/src/FormPill.styles.ts | 84 +++++++++++++++++-- .../form-pill-group/src/FormPill.tsx | 23 ++++- .../form-pill-group/src/PillCloseIcon.tsx | 22 ++++- 4 files changed, 119 insertions(+), 13 deletions(-) diff --git a/packages/paste-core/components/form-pill-group/package.json b/packages/paste-core/components/form-pill-group/package.json index 94848469fd..3c13da04ba 100644 --- a/packages/paste-core/components/form-pill-group/package.json +++ b/packages/paste-core/components/form-pill-group/package.json @@ -24,6 +24,9 @@ "clean": "rm -rf ./dist", "tsc": "tsc" }, + "dependencies": { + "deepmerge": "4.2.2" + }, "peerDependencies": { "@twilio-paste/animation-library": "^0.3.2", "@twilio-paste/box": "^6.0.0", diff --git a/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts b/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts index 235d3b7cee..6a0210c595 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts +++ b/packages/paste-core/components/form-pill-group/src/FormPill.styles.ts @@ -1,5 +1,42 @@ +import type {BoxStyleProps} from '@twilio-paste/box'; import type {VariantStyles} from './types'; +/** + * Wrapper styles + * If the pill is hoverable (i.e. can be selected), we set the color of the 'x' to inherit and set the color on the wrapper. This is so that when anywhere on the pill is hovered, the 'x' matches the rest of the content. + * If the pill is not hoverable, we set the color of the 'x' to the correct tokens. + */ + +export const wrapperStyles: VariantStyles = { + default: { + color: 'colorTextIcon', + _hover: { + color: 'colorTextLinkStronger', + }, + }, + error: { + color: 'colorTextIcon', + _hover: { + color: 'colorTextErrorStronger', + }, + }, +}; + +export const selectedWrapperStyles: VariantStyles = { + default: { + color: 'colorTextWeakest', + _hover: { + color: 'colorTextInverse', + }, + }, + error: { + color: 'colorTextInverse', + _hover: { + color: 'colorTextWeakest', + }, + }, +}; + /* * Pill styles */ @@ -92,41 +129,70 @@ export const hoverPillStyles: VariantStyles = { * Close icon styles */ -export const closeStyles: VariantStyles = { +export const baseCloseStyles: VariantStyles = { default: { - color: 'colorTextIcon', _hover: { cursor: 'pointer', borderColor: 'colorBorderPrimaryStronger', - color: 'colorTextLinkStronger', }, }, error: { - color: 'colorTextIcon', _hover: { cursor: 'pointer', borderColor: 'colorBorderErrorStronger', - color: 'colorTextErrorStronger', }, }, }; -export const selectedCloseStyles: VariantStyles = { +export const selectedBaseCloseStyles: VariantStyles = { default: { - color: 'colorTextWeakest', _hover: { cursor: 'pointer', borderColor: 'transparent', backgroundColor: 'colorBackgroundPrimary', - color: 'colorTextInverse', }, }, error: { - color: 'colorTextInverse', _hover: { cursor: 'pointer', borderColor: 'transparent', backgroundColor: 'colorBackgroundErrorStrongest', + }, + }, +}; + +export const closeInheritColorStyles: BoxStyleProps = { + color: 'inherit', + _hover: { + color: 'inherit', + }, +}; + +export const closeColorStyles: VariantStyles = { + default: { + color: 'colorTextIcon', + _hover: { + color: 'colorTextLinkStronger', + }, + }, + error: { + color: 'colorTextIcon', + _hover: { + color: 'colorTextErrorStronger', + }, + }, +}; + +export const selectedCloseColorStyles: VariantStyles = { + default: { + color: 'colorTextWeakest', + _hover: { + color: 'colorTextInverse', + }, + }, + error: { + color: 'colorTextInverse', + _hover: { color: 'colorTextWeakest', }, }, diff --git a/packages/paste-core/components/form-pill-group/src/FormPill.tsx b/packages/paste-core/components/form-pill-group/src/FormPill.tsx index fa06e1b525..a7536fbfcd 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPill.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPill.tsx @@ -6,6 +6,7 @@ import type {CompositeStateReturn} from '@twilio-paste/reakit-library'; import {PillCloseIcon} from './PillCloseIcon'; import {FormPillButton} from './FormPillButton'; import type {PillVariant} from './types'; +import {selectedWrapperStyles, wrapperStyles} from './FormPill.styles'; interface FormPillProps extends CompositeStateReturn, Pick { selected?: boolean; @@ -62,6 +63,12 @@ export const FormPill = React.forwardRef( const isHoverable = onSelect != null; const isDismissable = onDismiss != null; + let computedStyles = {}; + + if (isHoverable) { + computedStyles = selected ? selectedWrapperStyles[variant] : wrapperStyles[variant]; + } + // Handles delete and backspace keypresses const handleKeydown = React.useCallback( (event: React.KeyboardEvent) => { @@ -77,7 +84,13 @@ export const FormPill = React.forwardRef( [onDismiss, next] ); return ( - + ( {props.children} {isDismissable && !disabled ? ( - + ) : null} ); diff --git a/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx b/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx index c4e50138c1..6e33148d4c 100644 --- a/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx +++ b/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx @@ -2,14 +2,24 @@ import * as React from 'react'; import {Box} from '@twilio-paste/box'; import type {BoxProps} from '@twilio-paste/box'; import {CloseIcon} from '@twilio-paste/icons/esm/CloseIcon'; -import {selectedCloseStyles, closeStyles} from './FormPill.styles'; +import { + baseCloseStyles, + closeColorStyles, + closeInheritColorStyles, + selectedBaseCloseStyles, + selectedCloseColorStyles, +} from './FormPill.styles'; import type {PillVariant} from './types'; +// This module can only be referenced with ECMAScript imports/exports by turning on the 'esModuleInterop' flag and referencing its default export +const merge = require('deepmerge'); + interface PillCloseIconProps { onClick?: () => void; selected?: boolean; variant?: PillVariant; element?: BoxProps['element']; + pillIsHoverable?: boolean; } export const PillCloseIcon: React.FC = ({ @@ -17,8 +27,16 @@ export const PillCloseIcon: React.FC = ({ onClick = () => {}, selected = false, variant = 'default', + pillIsHoverable = false, }) => { - const computedStyles = selected ? selectedCloseStyles[variant] : closeStyles[variant]; + const baseStyles = selected ? selectedBaseCloseStyles[variant] : baseCloseStyles[variant]; + let colorStyles = selected ? selectedCloseColorStyles[variant] : closeColorStyles[variant]; + + if (pillIsHoverable) { + colorStyles = closeInheritColorStyles; + } + + const computedStyles = merge(baseStyles, colorStyles); return ( Date: Fri, 5 Aug 2022 14:56:15 -0700 Subject: [PATCH 3/3] chore: update yarn.lock --- yarn.lock | 1 + 1 file changed, 1 insertion(+) diff --git a/yarn.lock b/yarn.lock index 3d53d0be75..5b82ad3786 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10540,6 +10540,7 @@ __metadata: "@twilio-paste/theme": ^7.0.1 "@twilio-paste/types": ^3.1.8 "@twilio-paste/uid-library": ^0.2.5 + deepmerge: 4.2.2 prop-types: ^15.7.2 react: ^17.0.2 react-dom: ^17.0.2