New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
RichSelectList: update color and make label optional #330
Changes from 7 commits
8310086
5644280
7d12a36
1a84bdb
9ee4b93
dcecada
6eba13f
34c121e
da19622
56e4de8
0ef36c4
28a5bcb
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,3 +2,7 @@ | |
.richSelectBox:focus-visible { | ||
outline: none; | ||
} | ||
|
||
.label { | ||
cursor: pointer; | ||
} |
Original file line number | Diff line number | Diff line change | ||||||
---|---|---|---|---|---|---|---|---|
|
@@ -3,6 +3,7 @@ import React, { | |||||||
useMemo, | ||||||||
type SyntheticEvent, | ||||||||
useRef, | ||||||||
useId, | ||||||||
} from "react"; | ||||||||
import classNames from "classnames"; | ||||||||
import { | ||||||||
|
@@ -59,7 +60,9 @@ export type RichSelectListProps = Omit< | |||||||
/** Text shown below select box */ | ||||||||
helperText?: string; | ||||||||
/** Text shown above select box */ | ||||||||
label: string; | ||||||||
label?: string; | ||||||||
//** */ | ||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @jliotta instead of adding new
The way folks can then add a label, is by adding a custom label outside of RichSelectList: syntax/packages/syntax-core/src/TextField/TextField.tsx Lines 91 to 92 in 09370d9
|
||||||||
accessibilityLabel: string; | ||||||||
/** | ||||||||
* Text showing in select box if no option has been chosen. | ||||||||
* There should always have a placeholder unless there is a default option selected | ||||||||
|
@@ -107,6 +110,7 @@ function RichSelectList(props: RichSelectListProps): ReactElement { | |||||||
errorText, | ||||||||
helperText, | ||||||||
label, | ||||||||
accessibilityLabel, | ||||||||
onChange, | ||||||||
onClick = NOOP, | ||||||||
placeholderText, | ||||||||
|
@@ -117,6 +121,7 @@ function RichSelectList(props: RichSelectListProps): ReactElement { | |||||||
...richSelectBoxProps | ||||||||
} = props; | ||||||||
|
||||||||
const id = useId(); | ||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. See syntax/packages/syntax-core/src/TextField/TextField.tsx Lines 91 to 92 in 09370d9
|
||||||||
const isHydrated = useIsHydrated(); | ||||||||
const disabled = !isHydrated || disabledProp; | ||||||||
|
||||||||
|
@@ -186,14 +191,20 @@ function RichSelectList(props: RichSelectListProps): ReactElement { | |||||||
setInteractionModality("keyboard"); // Show the focus ring so the user knows where focus went | ||||||||
}} | ||||||||
> | ||||||||
<Typography size={100} color="gray700"> | ||||||||
{label} | ||||||||
</Typography> | ||||||||
{label && ( | ||||||||
<label className={styles.label} htmlFor={id}> | ||||||||
<Box paddingX={1}> | ||||||||
<Typography size={100} color="gray700"> | ||||||||
{label} | ||||||||
</Typography> | ||||||||
</Box> | ||||||||
</label> | ||||||||
)} | ||||||||
</ReactAriaLabel> | ||||||||
<Popover | ||||||||
ref={overlayHandlerRef} | ||||||||
disabled={disabled} | ||||||||
accessibilityLabel={label} | ||||||||
accessibilityLabel={accessibilityLabel} | ||||||||
content={ | ||||||||
// this Box wrapper is to reapply the padding that was stripped from popover's dialog to show the sticky save/close buttons. Ideally this could be avoided | ||||||||
<Box | ||||||||
|
@@ -207,7 +218,7 @@ function RichSelectList(props: RichSelectListProps): ReactElement { | |||||||
selectedValues={selectedKeys} | ||||||||
defaultSelectedValues={defaultSelectedKeys} | ||||||||
onChange={(selected) => setSelectedKeys(new Set(selected))} | ||||||||
accessibilityLabel={label} | ||||||||
accessibilityLabel={accessibilityLabel} | ||||||||
{...richSelectBoxProps} | ||||||||
> | ||||||||
{children} | ||||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -32,6 +32,7 @@ | |
outline: 0; | ||
padding: 0 36px 0 12px; | ||
width: 100%; | ||
background-color: var(--color-base-white); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. NIT: can we alphabetically sort this? |
||
} | ||
|
||
.selectMouseFocusStyling { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jliotta could you make sure to add a changeset to this PR?
pnpm run changeset