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

chore: Experiment content display column groups #3078

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

chore: Experiment content display column groups #3078

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
64284a0
enhanced test page and fixed bug with no match
pan-kot Nov 29, 2024
c9abe80
poc with nested options
pan-kot Nov 29, 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
147 changes: 117 additions & 30 deletions pages/collection-preferences/reorder-content.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// SPDX-License-Identifier: Apache-2.0
import React from 'react';

import CollectionPreferences from '~components/collection-preferences';
import { Box, CollectionPreferences, SpaceBetween } from '~components';

import { contentDisplayPreferenceI18nStrings } from '../common/i18n-strings';
import ScreenshotArea from '../utils/screenshot-area';
Expand Down Expand Up @@ -43,39 +43,126 @@ const longOptionsList = Array(50)
.fill(1)
.map((item, index) => ({ id: `id_${index}`, label: `Item ${index + 1}` }));

const optionListWithGroups = [
{
id: 'id',
label: 'Item ID',
alwaysVisible: true,
},
{ id: 'name', label: 'Item name' },
{
id: 'prices',
label: 'Prices',
options: [
{
id: 'price-de',
label: 'Price DE',
},
{
id: 'price-pl',
label: 'Price PL',
},
{
id: 'price-uk',
label: 'Price UK',
},
{
id: 'price-fr',
label: 'Price FR',
},
{
id: 'price-it',
label: 'Price IT',
},
],
},
{
id: 'attributes',
label: 'Attributes',
options: [
{
id: 'size',
label: 'Size',
},
{
id: 'weight',
label: 'Weight',
},
{
id: 'battery',
label: 'Battery',
},
{
id: 'power',
label: 'Power',
},
{
id: 'condition',
label: 'Condition',
},
],
},
];

export default function App() {
return (
<ScreenshotArea>
<h1>CollectionPreferences page with content reordering</h1>
<CollectionPreferences
className={`cp-1`}
{...baseProperties}
pageSizePreference={pageSizePreference}
wrapLinesPreference={wrapLinesPreference}
contentDensityPreference={contentDensityPreference}
customPreference={customPreference}
contentDisplayPreference={{
title: 'Column preferences',
description: 'Customize the columns visibility and order.',
options: shortOptionsList,
...contentDisplayPreferenceI18nStrings,
}}
/>
<CollectionPreferences
className={`cp-2`}
{...baseProperties}
pageSizePreference={pageSizePreference}
wrapLinesPreference={wrapLinesPreference}
contentDensityPreference={contentDensityPreference}
customPreference={customPreference}
contentDisplayPreference={{
enableColumnFiltering: true,
title: 'Column preferences',
description: 'Customize the columns visibility and order.',
options: longOptionsList,
...contentDisplayPreferenceI18nStrings,
}}
/>

<SpaceBetween size="xxs" direction="horizontal" alignItems="center">
<CollectionPreferences
className={`cp-1`}
{...baseProperties}
pageSizePreference={pageSizePreference}
wrapLinesPreference={wrapLinesPreference}
contentDensityPreference={contentDensityPreference}
customPreference={customPreference}
contentDisplayPreference={{
title: 'Column preferences',
description: 'Customize the columns visibility and order.',
options: shortOptionsList,
...contentDisplayPreferenceI18nStrings,
}}
/>

<Box>No groups and no column filter</Box>
</SpaceBetween>

<SpaceBetween size="xxs" direction="horizontal" alignItems="center">
<CollectionPreferences
className={`cp-2`}
{...baseProperties}
pageSizePreference={pageSizePreference}
wrapLinesPreference={wrapLinesPreference}
contentDensityPreference={contentDensityPreference}
customPreference={customPreference}
contentDisplayPreference={{
enableColumnFiltering: true,
title: 'Column preferences',
description: 'Customize the columns visibility and order.',
options: longOptionsList,
...contentDisplayPreferenceI18nStrings,
}}
/>

<Box>No groups with column filter</Box>
</SpaceBetween>

<SpaceBetween size="xxs" direction="horizontal" alignItems="center">
<CollectionPreferences
className="cp-3"
{...baseProperties}
contentDisplayPreference={{
enableColumnFiltering: true,
title: 'Column preferences',
description: 'Customize the columns visibility and order.',
options: optionListWithGroups,
...contentDisplayPreferenceI18nStrings,
}}
/>

<Box>With groups with column filter</Box>
</SpaceBetween>
</ScreenshotArea>
);
}
66 changes: 43 additions & 23 deletions pages/collection-preferences/simple.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
// SPDX-License-Identifier: Apache-2.0
import * as React from 'react';

import { Box, SpaceBetween } from '~components';
import CollectionPreferences from '~components/collection-preferences';

import ScreenshotArea from '../utils/screenshot-area';
Expand All @@ -20,29 +21,48 @@ export default function CollectionPreferencesPermutations() {
<>
<h1>CollectionPreferences page for screenshot tests</h1>
<ScreenshotArea disableAnimations={true}>
<CollectionPreferences
className={`cp-1`}
{...baseProperties}
pageSizePreference={pageSizePreference}
wrapLinesPreference={wrapLinesPreference}
contentDensityPreference={contentDensityPreference}
visibleContentPreference={visibleContentPreference}
stickyColumnsPreference={stickyColumnsPreference}
customPreference={customPreference}
/>
<CollectionPreferences className={`cp-2`} {...baseProperties} customPreference={customPreference} />
<CollectionPreferences
className={`cp-3`}
{...baseProperties}
pageSizePreference={pageSizePreference}
wrapLinesPreference={wrapLinesPreference}
customPreference={customPreference}
/>
<CollectionPreferences
className="cp-4"
{...baseProperties}
visibleContentPreference={visibleContentPreference}
/>
<SpaceBetween size="xxs" direction="horizontal" alignItems="center">
<CollectionPreferences
className={`cp-1`}
{...baseProperties}
pageSizePreference={pageSizePreference}
wrapLinesPreference={wrapLinesPreference}
contentDensityPreference={contentDensityPreference}
visibleContentPreference={visibleContentPreference}
stickyColumnsPreference={stickyColumnsPreference}
customPreference={customPreference}
/>

<Box>Table prefs with visible content</Box>
</SpaceBetween>

<SpaceBetween size="xxs" direction="horizontal" alignItems="center">
<CollectionPreferences className={`cp-2`} {...baseProperties} customPreference={customPreference} />

<Box>Custom prefs only</Box>
</SpaceBetween>

<SpaceBetween size="xxs" direction="horizontal" alignItems="center">
<CollectionPreferences
className={`cp-3`}
{...baseProperties}
pageSizePreference={pageSizePreference}
wrapLinesPreference={wrapLinesPreference}
customPreference={customPreference}
/>

<Box>Single column with custom prefs</Box>
</SpaceBetween>

<SpaceBetween size="xxs" direction="horizontal" alignItems="center">
<CollectionPreferences
className="cp-4"
{...baseProperties}
visibleContentPreference={visibleContentPreference}
/>

<Box>Single column visible content</Box>
</SpaceBetween>
</ScreenshotArea>
</>
);
Expand Down
6 changes: 6 additions & 0 deletions src/collection-preferences/content-display/content-display-option.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ $border-radius: awsui.$border-radius-item;
border-end-start-radius: $border-radius;
border-end-end-radius: $border-radius;
}
.content-display-option-nested {
padding-inline-start: awsui.$space-l;
}

.content-display-option {
list-style: none;
Expand Down Expand Up @@ -62,6 +65,9 @@ $border-radius: awsui.$border-radius-item;
@include styles.text-wrapping;
padding-inline-end: awsui.$space-l;
}
.content-display-option-group {
font-weight: bold;
}

.drag-overlay {
box-shadow: awsui.$shadow-container-active;
Expand Down
11 changes: 6 additions & 5 deletions src/collection-preferences/content-display/content-display-option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { ForwardedRef, forwardRef } from 'react';
import clsx from 'clsx';

import DragHandle, { DragHandleProps } from '../../internal/components/drag-handle';
import { useUniqueId } from '../../internal/hooks/use-unique-id';
import InternalToggle from '../../toggle/internal';
import { OptionWithVisibility } from './utils';
import { FlatOption } from './utils';

import styles from '../styles.css.js';

Expand All @@ -15,8 +16,8 @@ export const getClassName = (suffix?: string) => styles[[componentPrefix, suffix
export interface ContentDisplayOptionProps {
dragHandleAriaLabel?: string;
listeners?: DragHandleProps['listeners'];
onToggle?: (option: OptionWithVisibility) => void;
option: OptionWithVisibility;
onToggle?: (option: FlatOption) => void;
option: FlatOption;
disabled?: boolean;
}

Expand All @@ -33,10 +34,10 @@ const ContentDisplayOption = forwardRef(
};

return (
<div ref={ref} className={getClassName('content')}>
<div ref={ref} className={clsx(getClassName('content'), option.parent !== null && getClassName('nested'))}>
<DragHandle disabled={disabled} attributes={dragHandleAttributes} listeners={listeners} />

<label className={getClassName('label')} htmlFor={controlId}>
<label className={clsx(getClassName('label'), option.group && getClassName('group'))} htmlFor={controlId}>
{option.label}
</label>
<div className={getClassName('toggle')}>
Expand Down
6 changes: 3 additions & 3 deletions src/collection-preferences/content-display/draggable-option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { CSS } from '@dnd-kit/utilities';
import clsx from 'clsx';

import ContentDisplayOption, { getClassName } from './content-display-option';
import { OptionWithVisibility } from './utils';
import { FlatOption } from './utils';

import styles from '../styles.css.js';

Expand All @@ -18,8 +18,8 @@ export default function DraggableOption({
}: {
dragHandleAriaLabel?: string;
onKeyDown?: (event: React.KeyboardEvent) => void;
onToggle: (option: OptionWithVisibility) => void;
option: OptionWithVisibility;
onToggle: (option: FlatOption) => void;
option: FlatOption;
}) {
const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({
id: option.id,
Expand Down
Loading
Loading