From 3caf0aee1ce66c00f63fcb10ebbc7df139e8034f Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Wed, 30 Oct 2024 20:26:57 +0000 Subject: [PATCH 1/5] initial commit --- .../react/src/FormControl/FormControl.tsx | 2 +- .../react/src/Select/Select.dev.stories.tsx | 25 +++ .../src/Select/Select.features.stories.tsx | 3 +- packages/react/src/Select/Select.figma.tsx | 2 +- packages/react/src/Select/Select.module.css | 71 +++++++ packages/react/src/Select/Select.stories.tsx | 3 +- packages/react/src/Select/Select.tsx | 200 +++++++++++------- packages/react/src/index.ts | 5 +- 8 files changed, 234 insertions(+), 77 deletions(-) create mode 100644 packages/react/src/Select/Select.dev.stories.tsx create mode 100644 packages/react/src/Select/Select.module.css diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx index a6ccd15c858..f2eb061b594 100644 --- a/packages/react/src/FormControl/FormControl.tsx +++ b/packages/react/src/FormControl/FormControl.tsx @@ -3,7 +3,7 @@ import Autocomplete from '../Autocomplete' import Box from '../Box' import Checkbox from '../Checkbox' import Radio from '../Radio' -import Select from '../Select' +import Select from '../Select/Select' import {SelectPanel} from '../SelectPanel' import TextInput from '../TextInput' import TextInputWithTokens from '../TextInputWithTokens' diff --git a/packages/react/src/Select/Select.dev.stories.tsx b/packages/react/src/Select/Select.dev.stories.tsx new file mode 100644 index 00000000000..737d8a3c6ba --- /dev/null +++ b/packages/react/src/Select/Select.dev.stories.tsx @@ -0,0 +1,25 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import {FormControl, Box} from '..' +import Select from '.' + +export default { + title: 'Components/Select/Dev', + component: Select, +} as Meta + +export const Default = () => ( + + + Default label + + + +) diff --git a/packages/react/src/Select/Select.features.stories.tsx b/packages/react/src/Select/Select.features.stories.tsx index 1279d3d0dd6..96cf4f73519 100644 --- a/packages/react/src/Select/Select.features.stories.tsx +++ b/packages/react/src/Select/Select.features.stories.tsx @@ -1,5 +1,6 @@ import React from 'react' -import {Select, FormControl, Box, Heading} from '..' +import {FormControl, Box, Heading} from '..' +import Select from '.' export default { title: 'Components/Select/Features', diff --git a/packages/react/src/Select/Select.figma.tsx b/packages/react/src/Select/Select.figma.tsx index 7c75ad3f8e6..a4cbbef3fd9 100644 --- a/packages/react/src/Select/Select.figma.tsx +++ b/packages/react/src/Select/Select.figma.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Select} from '../../src' +import Select from '.' import FormControl from '../FormControl' import figma from '@figma/code-connect' diff --git a/packages/react/src/Select/Select.module.css b/packages/react/src/Select/Select.module.css new file mode 100644 index 00000000000..5801127af54 --- /dev/null +++ b/packages/react/src/Select/Select.module.css @@ -0,0 +1,71 @@ +.Select { + width: 100%; + /* stylelint-disable-next-line primer/spacing */ + margin-top: 1px; + /* stylelint-disable-next-line primer/spacing */ + margin-bottom: 1px; + /* stylelint-disable-next-line primer/spacing */ + margin-left: 1px; + font-size: inherit; + color: currentColor; + + /* Firefox hacks: */ + + /* 1. Makes Firefox's native dropdown menu's background match the theme. + + background-color should be 'transparent', but Firefox uses the background-color on + so the background color doesn't hide the focus outline created with an inset box-shadow. +*/ + background-color: inherit; + border: 0; + border-radius: inherit; + outline: none; + appearance: none; + + /* 2. Prevents visible overlap of partially transparent background colors. + + 'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a + transparent background-color on a disabled 's background color white when setting 'background-color: transparent;' */ + @media screen and (forced-colors: active) { + &:disabled { + background-color: -moz-combobox; + } + } +} + +.TextInputWrapper { + position: relative; + overflow: hidden; + + @media screen and (forced-colors: active) { + svg { + fill: 'FieldText', + } + } +} + +.disabled { + @media screen and (forced-colors: active) { + svg { + fill: 'GrayText' + } + } +} + +.ArrowIndicator { + position: absolute; + top: 50%; + right: var(--base-size-4); + pointer-events: none; + transform: translateY(-50%); +} + diff --git a/packages/react/src/Select/Select.stories.tsx b/packages/react/src/Select/Select.stories.tsx index 2cb9aeb0fb4..bb040e5bb08 100644 --- a/packages/react/src/Select/Select.stories.tsx +++ b/packages/react/src/Select/Select.stories.tsx @@ -1,6 +1,7 @@ import React from 'react' import type {Meta} from '@storybook/react' -import {Select, FormControl, Box} from '..' +import {FormControl, Box} from '..' +import Select from '.' import type {SelectProps} from '../Select' import type {FormControlArgs} from '../utils/form-story-helpers' import { diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx index ee8eb099e22..e33b115faac 100644 --- a/packages/react/src/Select/Select.tsx +++ b/packages/react/src/Select/Select.tsx @@ -1,7 +1,11 @@ import React from 'react' import styled from 'styled-components' +import {clsx} from 'clsx' import type {StyledWrapperProps} from '../internal/components/TextInputWrapper' import TextInputWrapper from '../internal/components/TextInputWrapper' +import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent' +import {useFeatureFlag} from '../FeatureFlags' +import classes from './Select.module.css' export type SelectProps = Omit< Omit, 'size'> & Omit, @@ -10,62 +14,70 @@ export type SelectProps = Omit< placeholder?: string } -const arrowRightOffset = '4px' +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' -const StyledSelect = styled.select` - appearance: none; - border-radius: inherit; - border: 0; - color: currentColor; - font-size: inherit; - outline: none; - width: 100%; +const arrowRightOffset = '4px' - /* Firefox hacks: */ - /* 1. Makes Firefox's native dropdown menu's background match the theme. +const StyledSelect = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'select', + styled.select` + appearance: none; + border-radius: inherit; + border: 0; + color: currentColor; + font-size: inherit; + outline: none; + width: 100%; + + /* Firefox hacks: */ + /* 1. Makes Firefox's native dropdown menu's background match the theme. background-color should be 'transparent', but Firefox uses the background-color on so the background color doesn't hide the focus outline created with an inset box-shadow. */ - background-color: inherit; - margin-top: 1px; - margin-left: 1px; - margin-bottom: 1px; + background-color: inherit; + margin-top: 1px; + margin-left: 1px; + margin-bottom: 1px; - /* 2. Prevents visible overlap of partially transparent background colors. + /* 2. Prevents visible overlap of partially transparent background colors. 'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a transparent background-color on a disabled 's background color white when setting 'background-color: transparent;' */ - @media screen and (forced-colors: active) { - &:disabled { - background-color: -moz-combobox; + @media screen and (forced-colors: active) { + &:disabled { + background-color: -moz-combobox; + } } - } -` - -const ArrowIndicatorSVG: React.FC> = ({className}) => ( - + `, ) -const ArrowIndicator = styled(ArrowIndicatorSVG)` +const ArrowIndicatorSVG: React.FC> = ({className}) => { + return ( + + ) +} + +const StyledArrowIndicatorSVG = styled(ArrowIndicatorSVG)` pointer-events: none; position: absolute; right: ${arrowRightOffset}; @@ -73,43 +85,89 @@ const ArrowIndicator = styled(ArrowIndicatorSVG)` transform: translateY(-50%); ` +const ArrowIndicator: React.FC<{className?: string}> = ({className}) => { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + if (enabled) { + return + } + + return +} + const Select = React.forwardRef( - ({block, children, contrast, disabled, placeholder, size, required, validationStatus, ...rest}: SelectProps, ref) => ( - { + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + + if (enabled) { + return ( + + + {placeholder && ( + + )} + {children} + + + + ) + } + + return ( + - - {placeholder && ( - - )} - {children} - - - - ), + + {placeholder && ( + + )} + {children} + + + + ) + }, ) const Option: React.FC & {value: string}>> = props => ( diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index a6188c13cee..b5f7992b67c 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -137,8 +137,9 @@ export {default as RadioGroup} from './RadioGroup' export type {RelativeTimeProps} from './RelativeTime' export {default as RelativeTime} from './RelativeTime' export {SegmentedControl} from './SegmentedControl' -export {default as Select} from './Select' -export type {SelectProps} from './Select' +// Curently there is a duplicate Select component at the root of the dir, so need to be explicit about exporting from the src/Select dir +export {default as Select} from './Select/Select' +export type {SelectProps} from './Select/Select' export {SelectPanel} from './SelectPanel' export type {SelectPanelProps} from './SelectPanel' export {default as SideNav} from './SideNav' From f103d9063445853b0a3ddf4f6e9f01c055ba6c6d Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Wed, 30 Oct 2024 20:35:40 +0000 Subject: [PATCH 2/5] changeset and lint --- .changeset/modern-icons-clean.md | 5 +++++ packages/react/src/Select/Select.module.css | 7 +++---- 2 files changed, 8 insertions(+), 4 deletions(-) create mode 100644 .changeset/modern-icons-clean.md diff --git a/.changeset/modern-icons-clean.md b/.changeset/modern-icons-clean.md new file mode 100644 index 00000000000..ac697326b5e --- /dev/null +++ b/.changeset/modern-icons-clean.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Migrate `Select` component to css modules diff --git a/packages/react/src/Select/Select.module.css b/packages/react/src/Select/Select.module.css index 5801127af54..3d334211661 100644 --- a/packages/react/src/Select/Select.module.css +++ b/packages/react/src/Select/Select.module.css @@ -48,7 +48,7 @@ @media screen and (forced-colors: active) { svg { - fill: 'FieldText', + fill: 'FieldText'; } } } @@ -56,10 +56,10 @@ .disabled { @media screen and (forced-colors: active) { svg { - fill: 'GrayText' + fill: 'GrayText'; } } -} +} .ArrowIndicator { position: absolute; @@ -68,4 +68,3 @@ pointer-events: none; transform: translateY(-50%); } - From 5b65d42929664cc0f5275a96875db2329bbbadc9 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Wed, 30 Oct 2024 20:57:00 +0000 Subject: [PATCH 3/5] fix css module comments --- packages/react/src/Select/Select.module.css | 25 +++++++++------------ 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/react/src/Select/Select.module.css b/packages/react/src/Select/Select.module.css index 3d334211661..f3175cd0967 100644 --- a/packages/react/src/Select/Select.module.css +++ b/packages/react/src/Select/Select.module.css @@ -9,15 +9,12 @@ font-size: inherit; color: currentColor; - /* Firefox hacks: */ - - /* 1. Makes Firefox's native dropdown menu's background match the theme. - - background-color should be 'transparent', but Firefox uses the background-color on - so the background color doesn't hide the focus outline created with an inset box-shadow. -*/ + /* Firefox hacks: + * 1. Makes Firefox's native dropdown menu's background match the theme. + * background-color should be 'transparent', but Firefox uses the background-color on + * so the background color doesn't hide the focus outline created with an inset box-shadow. + */ background-color: inherit; border: 0; border-radius: inherit; @@ -25,16 +22,16 @@ appearance: none; /* 2. Prevents visible overlap of partially transparent background colors. - - 'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a - transparent background-color on a disabled . + */ &:disabled { background-color: transparent; } /* 3. Maintain dark bg color in Firefox on Windows high-contrast mode - - Firefox makes the 's background color white when setting 'background-color: transparent;' + */ @media screen and (forced-colors: active) { &:disabled { background-color: -moz-combobox; From 60fd75357aa62009a61a7f3c29fa7d555aac2096 Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Wed, 30 Oct 2024 22:47:44 +0000 Subject: [PATCH 4/5] fix Select import to please the FormControl component's type comparision --- packages/react/src/Select/Select.features.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Select/Select.features.stories.tsx b/packages/react/src/Select/Select.features.stories.tsx index 96cf4f73519..7a1fff357bb 100644 --- a/packages/react/src/Select/Select.features.stories.tsx +++ b/packages/react/src/Select/Select.features.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' import {FormControl, Box, Heading} from '..' -import Select from '.' +import Select from './Select' export default { title: 'Components/Select/Features', From e9b9710cde778db6e141fcec8ee797b1a83f222b Mon Sep 17 00:00:00 2001 From: Randall Krauskopf <104226843+randall-krauskopf@users.noreply.github.com> Date: Thu, 31 Oct 2024 15:42:00 +0000 Subject: [PATCH 5/5] fix slot comparison in form control --- packages/react/src/Select/Select.dev.stories.tsx | 2 +- packages/react/src/Select/Select.stories.tsx | 4 ++-- packages/react/src/Select/Select.tsx | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/react/src/Select/Select.dev.stories.tsx b/packages/react/src/Select/Select.dev.stories.tsx index 737d8a3c6ba..29faba3b0bc 100644 --- a/packages/react/src/Select/Select.dev.stories.tsx +++ b/packages/react/src/Select/Select.dev.stories.tsx @@ -1,7 +1,7 @@ import React from 'react' import type {Meta} from '@storybook/react' import {FormControl, Box} from '..' -import Select from '.' +import Select from './Select' export default { title: 'Components/Select/Dev', diff --git a/packages/react/src/Select/Select.stories.tsx b/packages/react/src/Select/Select.stories.tsx index bb040e5bb08..042f85c7d4f 100644 --- a/packages/react/src/Select/Select.stories.tsx +++ b/packages/react/src/Select/Select.stories.tsx @@ -1,8 +1,8 @@ import React from 'react' import type {Meta} from '@storybook/react' import {FormControl, Box} from '..' -import Select from '.' -import type {SelectProps} from '../Select' +import Select from './Select' +import type {SelectProps} from './Select' import type {FormControlArgs} from '../utils/form-story-helpers' import { formControlArgs, diff --git a/packages/react/src/Select/Select.tsx b/packages/react/src/Select/Select.tsx index e33b115faac..36152a035b7 100644 --- a/packages/react/src/Select/Select.tsx +++ b/packages/react/src/Select/Select.tsx @@ -97,7 +97,6 @@ const ArrowIndicator: React.FC<{className?: string}> = ({className}) => { const Select = React.forwardRef( ({block, children, contrast, disabled, placeholder, size, required, validationStatus, ...rest}: SelectProps, ref) => { const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) - if (enabled) { return (