fix: preferences dropdown contrast and color (#1591)

This commit is contained in:
Aman Harwara
2022-09-19 20:03:23 +05:30
committed by GitHub
parent 46f3e873a5
commit ecaa2a629f
2 changed files with 20 additions and 5 deletions

View File

@@ -14,6 +14,7 @@ type DropdownProps = {
value: string
onChange: (value: string, item: DropdownItem) => void
disabled?: boolean
className?: string
}
type ListboxButtonProps = DropdownItem & {
@@ -41,7 +42,7 @@ const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
</>
)
const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, onChange, disabled }) => {
const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, onChange, disabled, className }) => {
const labelId = `${id}-label`
const handleChange = (value: string) => {
@@ -51,7 +52,7 @@ const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, o
}
return (
<>
<div className={className}>
<VisuallyHidden id={labelId}>{label}</VisuallyHidden>
<ListboxInput value={value} onChange={handleChange} aria-labelledby={labelId} disabled={disabled}>
<StyledListboxButton
@@ -85,7 +86,7 @@ const Dropdown: FunctionComponent<DropdownProps> = ({ id, label, items, value, o
</div>
</ListboxPopover>
</ListboxInput>
</>
</div>
)
}