Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat: ComboBox - @deephaven/components #2067

Merged
merged 29 commits into from
Jun 12, 2024
Merged

feat: ComboBox - @deephaven/components #2067

Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
04de4cf
Spectrum ComboBox (#2065)
bmingles Jun 10, 2024
d737df9
Removed description (#2065)
bmingles Jun 10, 2024
42009d4
Updated e2e tests (#2065)
bmingles Jun 10, 2024
8c20753
Added getItemTextValue util (#2065)
bmingles Jun 11, 2024
dd669c1
Better textValue inference (#2065)
bmingles Jun 11, 2024
0f363b9
Fixed tests (#2065)
bmingles Jun 11, 2024
dd8213d
Removed defaultItems prop (#2065)
bmingles Jun 11, 2024
93584ef
usePickerItemScale hook + tests (#2065)
bmingles Jun 11, 2024
809662a
Comments (#2065)
bmingles Jun 11, 2024
18108c2
Comments (#2065)
bmingles Jun 11, 2024
648b3ea
Comments (#2065)
bmingles Jun 11, 2024
fb24369
Swapped to usePickerItemScale (#2065)
bmingles Jun 11, 2024
9a51afa
Removed redundant sizes (#2065)
bmingles Jun 11, 2024
cf6eb8d
Fixed width in styleguide (#2065)
bmingles Jun 11, 2024
82d4580
Fixed generic types (#2065)
bmingles Jun 11, 2024
530a1bb
Split out usePickerProps hook (#2065)
bmingles Jun 11, 2024
e93e6fc
Comments (#2065)
bmingles Jun 11, 2024
45fbcc7
aria labels (#2065)
bmingles Jun 11, 2024
a505236
Unit tests (#2065)
bmingles Jun 11, 2024
65c8e07
Fixed scrolling (#2065)
bmingles Jun 11, 2024
709d88b
Removed redundant prop (#2065)
bmingles Jun 11, 2024
ea02fa9
Fixed topOffset and added tests (#2065)
bmingles Jun 11, 2024
6d580f7
Moved Picker props to its own module (#2065)
bmingles Jun 12, 2024
9352d81
Removed confusing type (#2065)
bmingles Jun 12, 2024
6f86234
Added comments (#2065)
bmingles Jun 12, 2024
a9cd3b7
Added disabledKeys and constrained to picker props type (#2065)
bmingles Jun 12, 2024
8c1bd97
type assertions (#2065)
bmingles Jun 12, 2024
beda299
Simplified generics (#2065)
bmingles Jun 12, 2024
a19c4a7
Fixed e2e test (#2065)
bmingles Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions packages/code-studio/src/styleguide/Inputs.tsx
View file
Open in desktop
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
110 changes: 62 additions & 48 deletions packages/code-studio/src/styleguide/Pickers.tsx
View file
Open in desktop
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 @@ -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
Open in desktop
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
Open in desktop

This file was deleted.

Loading
Loading