Skip to content

Commit

Permalink
feat: ComboBox - @deephaven/components (deephaven#2067)
Browse files Browse the repository at this point in the history 
* New `ComboBox` component in @deephaven/components
* Split out some shared logic from `Picker` since `ComboBox` is
basically a subclass
* Deleted old `ComboBox` component and replaced usage (condition column
+ row formatting. Also tested to make sure it still works as before)
* Updated Styleguide

resolves deephaven#2065

BREAKING CHANGE: ComboBox component has been replaced. 
To migrate to new version:
- Passing children is used instead of `options` prop to define dropdown
items. For cases where option value and display are the same, passing an
array of values as `children` will work. For cases where value and
display differ, `Item` elements must be passed as children. e.g. `<Item
key={value}>{display}</Item>`
e.g.
```typescript
// values will be used for display + value
const items = useMemo(
  () => ['Aaa', 'Bbb', 'Ccc'], 
  []
)
<ComboBox>{items}</ComboBox>
```
```typescript
<ComboBox>
  <Item key="aaa">Aaa</Item>
  <Item key="bbb">Bbb</Item>
  <Item key="ccc">Ccc</Item>
</ComboBox>
```
- The `spellcheck=false` prop is no longer supported or needed
- `searchPlaceholder` and `inputPlaceholder` props are no longer
supported and should be omitted. There is an optional `description` prop
for cases where a descriptive label is desired. There is also a `label`
prop for the primary component label.
  • Loading branch information
@bmingles
bmingles authored Jun 12, 2024
1 parent 3e52242 commit 640e002
Show file tree
Hide file tree
Showing 59 changed files with 719 additions and 830 deletions.
22 changes: 11 additions & 11 deletions packages/code-studio/src/styleguide/Inputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
UISwitch,
Select,
Option,
Item,
} from '@deephaven/components';
import SampleSection from './SampleSection';

Expand All @@ -33,6 +34,10 @@ const EXAMPLES = [
{ title: 'Title 12', value: 'Value 12' },
];

const items = EXAMPLES.map(({ title, value }) => (
<Item key={value}>{title}</Item>
));

const TIMEOUTS = [
{ title: '1 minute', value: 1 * 60 * 1000 },
{ title: '5 minutes', value: 5 * 60 * 1000 },
Expand Down Expand Up @@ -283,20 +288,15 @@ function Inputs(): React.ReactElement {
<div className="form-group">
<h5>Input with Select</h5>
<div className="input-group">
<ComboBox
options={EXAMPLES}
inputPlaceholder="10.128.0.8"
searchPlaceholder="Search actions here"
/>
<ComboBox aria-label="ComboBox" width="100%">
{items}
</ComboBox>
</div>
<br />
<div className="input-group">
<ComboBox
options={EXAMPLES}
inputPlaceholder="10.128.0.8"
searchPlaceholder="Search actions here"
disabled
/>
<ComboBox aria-label="Disabled ComboBox" isDisabled width="100%">
{items}
</ComboBox>
</div>
</div>

Expand Down
112 changes: 63 additions & 49 deletions packages/code-studio/src/styleguide/Pickers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Text,
PickerNormalized,
Checkbox,
ComboBox,
} from '@deephaven/components';
import { vsPerson } from '@deephaven/icons';
import { Icon } from '@adobe/react-spectrum';
Expand Down Expand Up @@ -75,7 +76,7 @@ export function Pickers(): JSX.Element {
[selectedKey]
);

const onChange = useCallback((key: ItemKey): void => {
const onChange = useCallback((key: ItemKey | null): void => {
setSelectedKey(key);
}, []);

Expand All @@ -85,53 +86,66 @@ export function Pickers(): JSX.Element {
<h2 className="ui-title">Pickers</h2>

<Flex gap={14} direction="column">
<Flex direction="row" gap={14}>
<Picker label="Single Child" tooltip={{ placement: 'bottom-end' }}>
<Item textValue="Aaa">Aaa</Item>
</Picker>

<Picker label="Mixed Children Types" defaultSelectedKey="999" tooltip>
{mixedItemsWithIconsNoDescriptions}
</Picker>

<Picker label="Sections" tooltip>
{/* eslint-disable react/jsx-curly-brace-presence */}
{'String 1'}
{'String 2'}
{'String 3'}
<Section title="Section">
<Item textValue="Item Aaa">Item Aaa</Item>
<Item textValue="Item Bbb">Item Bbb</Item>
<Item textValue="Complex Ccc">
<PersonIcon />
<Text>Complex Ccc</Text>
</Item>
</Section>
<Section key="Key B">
<Item textValue="Item Ddd">Item Ddd</Item>
<Item textValue="Item Eee">Item Eee</Item>
<Item textValue="Complex Fff">
<PersonIcon />
<Text>Complex Fff</Text>
</Item>
<Item textValue="Ggg">
<PersonIcon />
<Text>Label</Text>
<Text slot="description">Description</Text>
</Item>
<Item textValue="Hhh">
<PersonIcon />
<Text>Label that causes overflow</Text>
<Text slot="description">Description that causes overflow</Text>
</Item>
</Section>
<Section title="Section A">{itemElementsA}</Section>
<Section title="Section B">{itemElementsB}</Section>
<Section key="Section C">{itemElementsC}</Section>
<Section key="Section D">{itemElementsD}</Section>
<Section title="Section E">{itemElementsE}</Section>
</Picker>
</Flex>
{[Picker, ComboBox].map(Component => {
const label = (suffix: string) =>
`${Component === Picker ? 'Picker' : 'ComboBox'} (${suffix})`;
return (
<Flex key={Component.name} direction="row" gap={14}>
<Component
label={label('Single Child')}
tooltip={{ placement: 'bottom-end' }}
>
<Item textValue="Aaa">Aaa</Item>
</Component>
<Component
label={label('Mixed Children Types')}
defaultSelectedKey="999"
tooltip
>
{mixedItemsWithIconsNoDescriptions}
</Component>
<Component label={label('Sections')} tooltip>
{/* eslint-disable react/jsx-curly-brace-presence */}
{'String 1'}
{'String 2'}
{'String 3'}
<Section title="Section">
<Item textValue="Item Aaa">Item Aaa</Item>
<Item textValue="Item Bbb">Item Bbb</Item>
<Item textValue="Complex Ccc">
<PersonIcon />
<Text>Complex Ccc</Text>
</Item>
</Section>
<Section key="Key B">
<Item textValue="Item Ddd">Item Ddd</Item>
<Item textValue="Item Eee">Item Eee</Item>
<Item textValue="Complex Fff">
<PersonIcon />
<Text>Complex Fff</Text>
</Item>
<Item textValue="Ggg">
<PersonIcon />
<Text>Label</Text>
<Text slot="description">Description</Text>
</Item>
<Item textValue="Hhh">
<PersonIcon />
<Text>Label that causes overflow</Text>
<Text slot="description">
Description that causes overflow
</Text>
</Item>
</Section>
<Section title="Section A">{itemElementsA}</Section>
<Section title="Section B">{itemElementsB}</Section>
<Section key="Section C">{itemElementsC}</Section>
<Section key="Section D">{itemElementsD}</Section>
<Section title="Section E">{itemElementsE}</Section>
</Component>
</Flex>
);
})}

<Checkbox
checked={showIcons}
Expand All @@ -142,7 +156,7 @@ export function Pickers(): JSX.Element {

<Flex direction="row" gap={14}>
<PickerNormalized
label="Controlled"
label="Picker (Controlled)"
getInitialScrollPosition={getInitialScrollPosition}
normalizedItems={itemsWithIcons}
selectedKey={selectedKey}
Expand Down
33 changes: 0 additions & 33 deletions packages/code-studio/src/styleguide/SpectrumComparison.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
ActionButton,
Button,
Checkbox,
ComboBox,
Flex,
Grid,
Icon,
Expand All @@ -16,7 +15,6 @@ import {
import {
Button as BootstrapButtonOld,
Checkbox as CheckboxOld,
ComboBox as ComboBoxOld,
Select,
View,
Text,
Expand All @@ -38,12 +36,6 @@ const buttons: [BootstrapLevel, SpectrumButtonProps['variant']][] = [
['danger', 'negative'],
];

const options = [
{ title: 'One', value: '1' },
{ title: 'Two', value: '2' },
{ title: 'Three', value: '3' },
];

export function SpectrumComparison(): JSX.Element {
const [isChecked, setIsChecked] = useState(false);

Expand Down Expand Up @@ -155,31 +147,6 @@ export function SpectrumComparison(): JSX.Element {
<label>Bootstrap</label>
<label>Spectrum</label>

{[false, true].map(isDisabled => (
<Fragment key={String(isDisabled)}>
<div>
<label className="input-label">
{isDisabled ? 'Disabled ' : ''}Combobox
</label>
<ComboBoxOld
disabled={isDisabled}
options={options}
defaultValue="One"
/>
</div>

<ComboBox
isDisabled={isDisabled}
label={isDisabled ? 'Disabled Combobox' : 'Combobox'}
inputValue="One"
>
<Item key="1">One</Item>
<Item key="2">Two</Item>
<Item key="3">Three</Item>
</ComboBox>
</Fragment>
))}

{[false, true].map(isDisabled => (
<Fragment key={String(isDisabled)}>
<div>
Expand Down
11 changes: 0 additions & 11 deletions packages/components/src/ComboBox.test.tsx
View file

This file was deleted.

Loading

0 comments on commit 640e002

Please sign in to comment.