Skip to content

Commit

Permalink
icon and description handling (deephaven#1890)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bmingles
bmingles committed Apr 19, 2024
1 parent bb6fbae commit 386f048
Show file tree
Hide file tree
Showing 7 changed files with 273 additions and 99 deletions.
206 changes: 132 additions & 74 deletions packages/code-studio/src/styleguide/ListViews.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useCallback, useState } from 'react';
import React, { ReactNode, useCallback, useState } from 'react';
import {
Flex,
Grid,
Icon,
Item,
Expand All @@ -9,10 +10,15 @@ import {
} from '@deephaven/components';
import { vsAccount, vsPerson } from '@deephaven/icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import type { StyleProps } from '@react-types/shared';
import { generateNormalizedItems, sampleSectionIdAndClasses } from './utils';

// Generate enough items to require scrolling
const itemsSimple = [...generateNormalizedItems(52)];
const itemsWithIcons = [...generateNormalizedItems(52, { icons: true })];
const itemsWithIconsAndDescriptions = [
...generateNormalizedItems(52, { icons: true, descriptions: true }),
];

function AccountIllustration(): JSX.Element {
return (
Expand All @@ -25,6 +31,21 @@ function AccountIllustration(): JSX.Element {
);
}

interface LabeledProps extends StyleProps {
label: string;
children: ReactNode;
}

function LabeledFlexColumn({ label, children, ...styleProps }: LabeledProps) {
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<Flex {...styleProps} direction="column" minHeight={0} minWidth={0}>
<Text>{label}</Text>
{children}
</Flex>
);
}

export function ListViews(): JSX.Element {
const [selectedKeys, setSelectedKeys] = useState<'all' | Iterable<ItemKey>>(
[]
Expand All @@ -39,82 +60,119 @@ export function ListViews(): JSX.Element {
<div {...sampleSectionIdAndClasses('list-views')}>
<h2 className="ui-title">List View</h2>

<Grid columnGap={14} height="size-6000">
<Text>Single Child</Text>
<ListView
density="compact"
gridRow="2"
aria-label="Single Child"
selectionMode="multiple"
>
<Item>Aaa</Item>
</ListView>
<Grid gap={14} height="size-6000" columns="1fr 1fr 1fr">
<LabeledFlexColumn label="Single Child" gridColumn="span 3">
<ListView
density="compact"
aria-label="Single Child"
selectionMode="multiple"
>
<Item>Aaa</Item>
</ListView>
</LabeledFlexColumn>

<LabeledFlexColumn label="Icons" gridColumn="span 2">
<ListView
aria-label="Icon"
density="compact"
selectionMode="multiple"
>
<Item textValue="Item with icon A">
<AccountIllustration />
<Text>Item with icon A</Text>
</Item>
<Item textValue="Item with icon B">
<AccountIllustration />
<Text>Item with icon B</Text>
</Item>
<Item textValue="Item with icon C">
<AccountIllustration />
<Text>Item with icon C</Text>
</Item>
<Item textValue="Item with icon D">
<AccountIllustration />
<Text>Item with icon D with overflowing content</Text>
</Item>
<Item textValue="Item with icon E">
<AccountIllustration />
<Text>Item with icon E</Text>
</Item>
</ListView>
</LabeledFlexColumn>

<LabeledFlexColumn label="Mixed Children Types">
<ListView
aria-label="Mixed Children Types"
density="compact"
maxWidth="size-2400"
selectionMode="multiple"
defaultSelectedKeys={[999, 444]}
>
{/* eslint-disable react/jsx-curly-brace-presence */}
{'String 1'}
{'String 2'}
{'String 3'}
{''}
{'Some really long text that should get truncated'}
{/* eslint-enable react/jsx-curly-brace-presence */}
{444}
{999}
{true}
{false}
<Item>Item Aaa</Item>
<Item>Item Bbb</Item>
<Item textValue="Item with Description">
<Text>Item with Description</Text>
<Text slot="description">Description</Text>
</Item>
<Item textValue="Complex Ccc">
<Icon slot="image">
<FontAwesomeIcon icon={vsPerson} />
</Icon>
<Text>Complex Ccc with text that should be truncated</Text>
</Item>
<Item textValue="Complex Ccc with Description">
<Icon slot="image">
<FontAwesomeIcon icon={vsPerson} />
</Icon>
<Text>Complex Ccc with text that should be truncated</Text>
<Text slot="description">Description</Text>
</Item>
</ListView>
</LabeledFlexColumn>

<label>Icons</label>
<ListView
gridRow="2"
aria-label="Icon"
density="compact"
selectionMode="multiple"
>
<Item textValue="Item with icon A">
<AccountIllustration />
<Text>Item with icon A</Text>
</Item>
<Item textValue="Item with icon B">
<AccountIllustration />
<Text>Item with icon B</Text>
</Item>
<Item textValue="Item with icon C">
<AccountIllustration />
<Text>Item with icon C</Text>
</Item>
<Item textValue="Item with icon D">
<AccountIllustration />
<Text>Item with icon D with overflowing content</Text>
</Item>
</ListView>
<LabeledFlexColumn label="Controlled">
<ListView
aria-label="Controlled"
selectionMode="multiple"
selectedKeys={selectedKeys}
onChange={onChange}
>
{itemsSimple}
</ListView>
</LabeledFlexColumn>

<label>Mixed Children Types</label>
<ListView
gridRow="2"
aria-label="Mixed Children Types"
density="compact"
maxWidth="size-2400"
selectionMode="multiple"
defaultSelectedKeys={[999, 444]}
>
{/* eslint-disable react/jsx-curly-brace-presence */}
{'String 1'}
{'String 2'}
{'String 3'}
{''}
{'Some really long text that should get truncated'}
{/* eslint-enable react/jsx-curly-brace-presence */}
{444}
{999}
{true}
{false}
<Item>Item Aaa</Item>
<Item>Item Bbb</Item>
<Item textValue="Complex Ccc">
<Icon slot="image">
<FontAwesomeIcon icon={vsPerson} />
</Icon>
<Text>Complex Ccc with text that should be truncated</Text>
</Item>
</ListView>
<LabeledFlexColumn label="Controlled (with icons)">
<ListView
aria-label="Controlled"
selectionMode="multiple"
selectedKeys={selectedKeys}
onChange={onChange}
>
{itemsWithIcons}
</ListView>
</LabeledFlexColumn>

<label>Controlled</label>
<ListView
gridRow="2"
aria-label="Controlled"
selectionMode="multiple"
selectedKeys={selectedKeys}
onChange={onChange}
>
{itemsSimple}
</ListView>
<LabeledFlexColumn label="Controlled (with icons and descriptions)">
<ListView
aria-label="Controlled"
selectionMode="multiple"
selectedKeys={selectedKeys}
onChange={onChange}
>
{itemsWithIconsAndDescriptions}
</ListView>
</LabeledFlexColumn>
</Grid>
</div>
);
Expand Down
40 changes: 29 additions & 11 deletions packages/code-studio/src/styleguide/Pickers.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
import React, { useCallback, useState } from 'react';
import {
Flex,
Item,
Picker,
ItemKey,
Section,
Text,
} from '@deephaven/components';
import { Item, Picker, ItemKey, Section, Text } from '@deephaven/components';
import { vsPerson } from '@deephaven/icons';
import { Icon } from '@adobe/react-spectrum';
import { Grid, Icon } from '@adobe/react-spectrum';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { generateNormalizedItems, sampleSectionIdAndClasses } from './utils';

// Generate enough items to require scrolling
const items = [...generateNormalizedItems(52)];
const itemsWithIcons = [...generateNormalizedItems(52, { icons: true })];
const itemsWithIconsAndDescriptions = [
...generateNormalizedItems(52, { icons: true, descriptions: true }),
];

function PersonIcon(): JSX.Element {
return (
Expand All @@ -35,7 +32,7 @@ export function Pickers(): JSX.Element {
<div {...sampleSectionIdAndClasses('pickers')}>
<h2 className="ui-title">Pickers</h2>

<Flex gap={14}>
<Grid gap={14}>
<Picker label="Single Child" tooltip={{ placement: 'bottom-end' }}>
<Item>Aaa</Item>
</Picker>
Expand All @@ -58,6 +55,11 @@ export function Pickers(): JSX.Element {
<PersonIcon />
<Text>Complex Ccc with text that should be truncated</Text>
</Item>
<Item textValue="Complex Ccc with Description">
<PersonIcon />
<Text>Complex Ccc with text that should be truncated</Text>
<Text slot="description">Description</Text>
</Item>
</Picker>

<Picker label="Sections" tooltip>
Expand Down Expand Up @@ -100,7 +102,23 @@ export function Pickers(): JSX.Element {
>
{items}
</Picker>
</Flex>

<Picker
label="Controlled (with icons)"
selectedKey={selectedKey}
onChange={onChange}
>
{itemsWithIcons}
</Picker>

<Picker
label="Controlled (with icons and descriptions)"
selectedKey={selectedKey}
onChange={onChange}
>
{itemsWithIconsAndDescriptions}
</Picker>
</Grid>
</div>
);
}
Expand Down
14 changes: 12 additions & 2 deletions packages/code-studio/src/styleguide/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import cl from 'classnames';
import { useCallback, useState } from 'react';
import { NormalizedItem } from '@deephaven/components';
import { dh as dhIcons } from '@deephaven/icons';

export const HIDE_FROM_E2E_TESTS_CLASS = 'hide-from-e2e-tests';
export const SAMPLE_SECTION_CLASS = 'sample-section';
Expand All @@ -10,11 +11,14 @@ export const SAMPLE_SECTION_CLASS = 'sample-section';
* @param count The number of items to generate
*/
export function* generateNormalizedItems(
count: number
count: number,
include: { descriptions?: boolean; icons?: boolean } = {}
): Generator<NormalizedItem> {
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
const len = letters.length;

const iconKeys = Object.keys(dhIcons);

for (let i = 0; i < count; i += 1) {
const charI = i % len;
let suffix = String(Math.floor(i / len));
Expand All @@ -23,12 +27,18 @@ export function* generateNormalizedItems(
}
const letter = letters[charI];
const key = `${letter}${suffix}`;
const icon =
include.icons === true ? iconKeys[i % iconKeys.length] : undefined;
const description =
include.descriptions === true ? `Description ${key}` : undefined;

yield {
key,
item: {
key: (i + 1) * 100,
content: `${letter}${letter}${letter}${suffix}`,
content: icon ?? `${letter}${letter}${letter}${suffix}`,
description,
icon,
},
};
}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/spectrum/listView/ListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export function ListView({
[tooltip]
);

const renderNormalizedItem = useRenderNormalizedItem(tooltipOptions);
const renderNormalizedItem = useRenderNormalizedItem('image', tooltipOptions);

const {
selectedStringKeys,
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/spectrum/picker/Picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export function Picker({
[tooltip]
);

const renderNormalizedItem = useRenderNormalizedItem(tooltipOptions);
const renderNormalizedItem = useRenderNormalizedItem('icon', tooltipOptions);

const getInitialScrollPositionInternal = useCallback(
() =>
Expand Down
Loading

0 comments on commit 386f048

Please sign in to comment.