From 0f6a9550238e5e08fbe7f5567a3bfa20b361908f Mon Sep 17 00:00:00 2001 From: Jason Basuil Date: Mon, 29 Apr 2024 12:50:03 -0700 Subject: [PATCH] remove non-synth colors, add borderedMultiValue styles SingleSelect (#1196) --- src/Select/SingleSelect.jsx | 9 ++++-- src/Select/SingleSelect.mdx | 47 ----------------------------- src/Select/SingleSelect.stories.jsx | 29 +++++++++++++----- src/Select/select.scss | 32 -------------------- src/Select/styles.js | 47 ++++++++++++++++++++++++----- 5 files changed, 68 insertions(+), 96 deletions(-) delete mode 100644 src/Select/SingleSelect.mdx delete mode 100644 src/Select/select.scss diff --git a/src/Select/SingleSelect.jsx b/src/Select/SingleSelect.jsx index c6f51471..f1be644b 100644 --- a/src/Select/SingleSelect.jsx +++ b/src/Select/SingleSelect.jsx @@ -4,13 +4,15 @@ import Select from 'react-select'; import propTypes from 'prop-types'; import zStack from 'src/Styles/zStack'; -import './select.scss'; -import { defaultTheme, defaultStyles, SELECT_SIZES } from './styles'; +import { + borderedMultiValueStyles, defaultTheme, defaultStyles, SELECT_SIZES, +} from './styles'; const SingleSelect = ({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, + borderedMultiValue, className, closeMenuOnSelect, components, @@ -57,6 +59,7 @@ const SingleSelect = ({ placeholder={placeholder} styles={{ ...defaultStyles({ menuWidth, size }), + ...borderedMultiValueStyles(borderedMultiValue), menuPortal: (base) => ( modal ? { ...base, zIndex: zStack.zIndexModalBackdrop + 1 } : @@ -72,6 +75,7 @@ const SingleSelect = ({ SingleSelect.propTypes = { 'aria-label': propTypes.string, 'aria-labelledby': propTypes.string, + borderedMultiValue: propTypes.bool, className: propTypes.string, closeMenuOnSelect: propTypes.bool, components: propTypes.any, @@ -103,6 +107,7 @@ SingleSelect.propTypes = { SingleSelect.defaultProps = { 'aria-label': undefined, 'aria-labelledby': undefined, + borderedMultiValue: undefined, className: undefined, closeMenuOnSelect: true, components: undefined, diff --git a/src/Select/SingleSelect.mdx b/src/Select/SingleSelect.mdx deleted file mode 100644 index bdb741c3..00000000 --- a/src/Select/SingleSelect.mdx +++ /dev/null @@ -1,47 +0,0 @@ -import { ArgTypes, Canvas } from '@storybook/blocks'; -import SingleSelect from './SingleSelect'; -import * as ComponentStories from './SingleSelect.stories'; - -# SingleSelect - -A base select input. Flexible and comes with multiselect, clearable, searchable, disabled, and loading support. - - - -## Anatomy - -## Best practices - -## Guidelines - -### General - -### Implementation - -### Default - - - -### Searchable - - - -### Loading - - - -### Multi Select - - - -### Custom Option With Checkbox - - - -### Custom Option With Indeterminate Checkbox - - - -### Custom Value Container - - diff --git a/src/Select/SingleSelect.stories.jsx b/src/Select/SingleSelect.stories.jsx index 381de05b..6ee40112 100644 --- a/src/Select/SingleSelect.stories.jsx +++ b/src/Select/SingleSelect.stories.jsx @@ -12,18 +12,11 @@ import Option from './Option'; import OptionWithDescription from './OptionWithDescription'; import ValueContainer from './ValueContainer'; -import mdx from './SingleSelect.mdx'; - const onChange = () => action('Change'); export default { title: 'Components/Selects/Single', component: SingleSelect, - parameters: { - docs: { - page: mdx, - }, - }, }; const options = [ @@ -33,6 +26,13 @@ const options = [ { label: 'Unmoderated task', value: 4 }, ]; +const peopleOptions = [ + { label: 'Riley Researcher', value: 5 }, + { label: 'Mickey Moderator', value: 6 }, + { label: 'Connie Collaborator', value: 7 }, + { label: 'Ozzy Observer', value: 8 }, +]; + export const Default = () => ( ( ); +export const MultipleSelectBorderedPill = () => ( + + + +); + export const InModal = () => { const [isOpen, setIsOpen] = useState(false); diff --git a/src/Select/select.scss b/src/Select/select.scss deleted file mode 100644 index 2d6dd8b1..00000000 --- a/src/Select/select.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import '../../scss/theme.scss'; -// Note: react-select is largely styled via css-in-js, not SCSS. -// However, we need to only provide the styles below when the "Synthesized" -// class is present on the body in rails server - -.Synthesized .Select__menu { - .Select__option:hover, - .Select__option--is-focused { - background-color: $synth-hover-state; - } - - .Select__option--is-selected, - .Select__option--is-selected:hover { - background-color: $synth-selected-state-green; - } -} - -.Select__control { - .Select__multi-value__label, - .Select__multi-value__remove { - color: $synth-success-green-dark; - } - - .Select__multi-value__remove:hover { - background-color: $synth-selected-state-green; - color: $synth-success-green-dark; - } - - .Select__multi-value { - background-color: $synth-hover-state; - } -} diff --git a/src/Select/styles.js b/src/Select/styles.js index c3da10b0..7ddef0a4 100644 --- a/src/Select/styles.js +++ b/src/Select/styles.js @@ -51,8 +51,8 @@ const defaultStyles = ({ menuWidth, size }) => ({ indicatorSeparator: (styles) => ({ ...styles, display: 'none' }), multiValue: (styles) => ({ ...styles, - backgroundColor: systemColors.UX_BLUE_100, - color: systemColors.UX_BLUE_700, + backgroundColor: systemColors.SYNTH_HOVER_STATE, + color: systemColors.SYNTH_SUCCESS_GREEN_DARK, borderRadius: '4px', }), menu: (styles) => ({ @@ -61,7 +61,7 @@ const defaultStyles = ({ menuWidth, size }) => ({ }), multiValueLabel: (styles) => ({ ...styles, - color: systemColors.UX_BLUE_700, + color: systemColors.SYNTH_SUCCESS_GREEN_DARK, fontSize: '0.875rem', fontWeight: 400, lineHeight: '1.25rem', @@ -69,12 +69,12 @@ const defaultStyles = ({ menuWidth, size }) => ({ }), multiValueRemove: (styles) => ({ ...styles, - color: systemColors.UX_BLUE, + color: systemColors.SYNTH_SUCCESS_GREEN_DARK, cursor: 'pointer', ':hover': { ...styles[':hover'], - backgroundColor: systemColors.selectOptionFocusedBg, - color: systemColors.UX_BLUE_700, + backgroundColor: systemColors.SYNTH_SELECTED_STATE_GREEN, + color: systemColors.SYNTH_SUCCESS_GREEN_DARK, }, }), placeholder: (styles) => ({ @@ -91,10 +91,12 @@ const defaultStyles = ({ menuWidth, size }) => ({ }), option: (styles, { isDisabled, + isFocused, isSelected, }) => ({ ...styles, - backgroundColor: isSelected ? systemColors.UX_BLUE_200 : styles.backgroundColor, + backgroundColor: isSelected || isFocused ? + systemColors.SYNTH_HOVER_STATE : styles.backgroundColor, color: systemColors.UX_GRAY_900, fontWeight: fontWeights.light, fontSize: '0.875rem', @@ -108,11 +110,39 @@ const defaultStyles = ({ menuWidth, size }) => ({ ':hover': { ...styles[':hover'], - backgroundColor: isSelected ? systemColors.UX_BLUE_200 : systemColors.UX_BLUE_100, + backgroundColor: isSelected ? + systemColors.SYNTH_SELECTED_STATE_GREEN : systemColors.SYNTH_HOVER_STATE, }, }), }); +const borderedMultiValueStyles = (borderedMultiValue) => borderedMultiValue ? { + multiValue: (styles) => ( + { + ...styles, + border: `1px solid ${systemColors.SYNTH_DARK_BACKGROUND_SELECTED_BLUE}`, + borderRadius: '4px', + backgroundColor: systemColors.UX_WHITE, + } + ), + multiValueLabel: (styles) => ( + { + ...styles, + color: systemColors.SYNTH_DARK_BACKGROUND_SELECTED_BLUE, + } + ), + multiValueRemove: (styles) => ( + { + ...styles, + color: systemColors.SYNTH_DARK_BACKGROUND_SELECTED_BLUE, + ':hover': { + backgroundColor: systemColors.UX_NAVY_500, + color: systemColors.UX_WHITE, + }, + } + ), +} : {}; + const defaultTheme = (theme) => ({ ...theme, colors: { @@ -122,6 +152,7 @@ const defaultTheme = (theme) => ({ }); export { + borderedMultiValueStyles, defaultStyles, defaultTheme, };