Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
73 commits
Select commit Hold shift + click to select a range
c7dd9d7
Initial Token split-out
ernst-dev Jul 15, 2025
2f64200
Initial inline token variant and styling
ernst-dev Aug 5, 2025
9fe2247
Add Option structure to standalone token
ernst-dev Aug 5, 2025
4362c35
Cleaned up styles for token and add popover behaviour
ernst-dev Aug 6, 2025
baac4e2
Add function variable token to simple page
ernst-dev Aug 6, 2025
67baf23
Switch out p element for div in dev page
ernst-dev Aug 6, 2025
e42788a
Simplified styles, added Omit version of popoverProps type, added tit…
ernst-dev Aug 7, 2025
cd0d5c1
Expand variable popover content
ernst-dev Aug 7, 2025
0194e0b
Update test-utils and simplified token usage in TokenGroup
ernst-dev Aug 8, 2025
9887e4c
Minor style changes for inline
ernst-dev Aug 8, 2025
5b8d6aa
Add dev warning and fix core system tag for children prop
ernst-dev Aug 8, 2025
1568fbe
temp: remove core tag
ernst-dev Aug 9, 2025
657bd81
Clean-up inline checks to a single variable, add OnChange handlers to…
ernst-dev Aug 11, 2025
815243b
Add analytics
ernst-dev Aug 11, 2025
a6dd736
Switch out multiselect inline token for standalone token
ernst-dev Aug 11, 2025
08b9180
Add custom action support to Token
ernst-dev Aug 12, 2025
3e4fb51
Fix action button icon styles for inline, add more examples to dev page
ernst-dev Aug 12, 2025
501b807
Dev page add Custom section
ernst-dev Aug 12, 2025
bd39e26
Add util for site identifier in dev pages
ernst-dev Aug 13, 2025
e1b0e77
Clean-up interfaces and update role for Token
ernst-dev Aug 14, 2025
bc4933c
Update accessibility of dev page
ernst-dev Aug 14, 2025
2a2206b
Clean-up styles
ernst-dev Aug 14, 2025
8cfab35
Replace html title in option for internal Tooltip on Token itself
ernst-dev Aug 14, 2025
77d6ce7
Clean up focus styles for inline token
ernst-dev Aug 14, 2025
9c312d0
Truncation for inline Token
ernst-dev Aug 18, 2025
cda7d69
Add documentation to Token properties
ernst-dev Aug 18, 2025
b0d3f81
Add test-utils and permutations page
ernst-dev Aug 19, 2025
2178d25
Token rework following API proposal
ernst-dev Aug 21, 2025
4319e25
Revert new Popover variant in favour of smarter SCSS
ernst-dev Aug 22, 2025
4da4985
Fix token style issues
ernst-dev Aug 25, 2025
faae4a2
Add unit and integration tests
ernst-dev Aug 26, 2025
f105105
Fix token styling for popovers and main icon
ernst-dev Aug 26, 2025
16325b6
Test util documentation
ernst-dev Aug 26, 2025
005e392
Revert Option label class shift
ernst-dev Aug 26, 2025
4d74783
Fix normal token alignment
ernst-dev Aug 26, 2025
86b9476
Update findTags return type
ernst-dev Aug 26, 2025
19b461d
Fix veritcal align for inline token with custom content
ernst-dev Aug 26, 2025
5187081
Fix min-width issues
ernst-dev Aug 27, 2025
5e6f46b
Fix focus behaviour and general clean-up
ernst-dev Aug 27, 2025
661ff19
Fix related unit tests
ernst-dev Aug 27, 2025
ab9674b
Fix property filter and file token group tests
ernst-dev Aug 27, 2025
834a5f7
Cleanup simple page popover issues
ernst-dev Aug 27, 2025
28c70b7
Fix base component hook issues
ernst-dev Aug 27, 2025
e30102b
Update test-util for findOption
ernst-dev Aug 27, 2025
260c21e
Update documenter snapshot
ernst-dev Aug 28, 2025
a4939e8
Improve test coverage for token
ernst-dev Aug 28, 2025
12218b3
Improve coverage for the Highlight component in Option
ernst-dev Aug 28, 2025
c22d63a
Add istanbul ignores as tests are covered in integration tests
ernst-dev Aug 28, 2025
b7b2ba9
Ignore tooltip parts in Token and update Highlight match null checks
ernst-dev Aug 28, 2025
2aec3f8
Fix highlight type
ernst-dev Aug 28, 2025
4592706
Update truncation, testing and accessibility of Token
ernst-dev Sep 15, 2025
90d8173
Update aria-disabled to be set for normal Token regardless of content…
ernst-dev Sep 16, 2025
f7f76e9
Address test coverage
ernst-dev Sep 16, 2025
9f28269
Address some A11Y test failures
ernst-dev Sep 16, 2025
5b03165
Update integ snapshot
ernst-dev Sep 17, 2025
f317015
General clean-up
ernst-dev Sep 17, 2025
c1cc301
Add disabled variable token to simple page
ernst-dev Sep 17, 2025
c7d204c
Update A11Y requirements for Token
ernst-dev Sep 17, 2025
0737e3e
Simple API doc updates
ernst-dev Sep 17, 2025
b766bdd
Update A11Y again to always have role group and labelledBy props
ernst-dev Sep 18, 2025
597c51c
General token simplification and A11Y updates
ernst-dev Sep 24, 2025
b322a8d
Restore non-nullable findDismiss test-util for TokenGroup
ernst-dev Sep 25, 2025
a6ec823
Test-util updates for TokenGroup
ernst-dev Sep 26, 2025
374ee50
Separate TokenWrappers for TokenGroup and Token
ernst-dev Sep 26, 2025
e6af3ec
Fix incorrect token selector in TokenGroup
ernst-dev Sep 29, 2025
54de919
Rename TokenGroup TokenWrapper to TokenGroupItemWrapper
ernst-dev Sep 29, 2025
a616beb
Update TokenGroup TokenWrapper to a named export different from Token…
ernst-dev Sep 30, 2025
2fef593
Add a dev warning when not using plain text for inline variant tokens
ernst-dev Oct 1, 2025
0eeaef4
Address PR comments and concerns
ernst-dev Oct 6, 2025
f09a22d
Switch option back to use a span or div depending on labelContent
ernst-dev Oct 7, 2025
d33aee1
Update type check to check for string or number, update test-utils
ernst-dev Oct 13, 2025
adb4510
Fix broken legacy selectors for TokenGroup
ernst-dev Oct 14, 2025
d233676
Switch findDismiss util to use find instead of findAny
ernst-dev Oct 14, 2025
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
1 change: 1 addition & 0 deletions build-tools/utils/pluralize.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ const pluralizationMap = {
TimeInput: 'TimeInputs',
Toggle: 'Toggles',
ToggleButton: 'ToggleButtons',
Token: 'Tokens',
TokenGroup: 'TokenGroups',
TopNavigation: 'TopNavigations',
TreeView: 'TreeViews',
Expand Down
88 changes: 0 additions & 88 deletions pages/token-group/custom.page.tsx

This file was deleted.

73 changes: 73 additions & 0 deletions pages/token/permutations.page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';

import Icon from '~components/icon';
import Token, { TokenProps } from '~components/token';

import createPermutations from '../utils/permutations';
import PermutationsView from '../utils/permutations-view';
import ScreenshotArea from '../utils/screenshot-area';

const permutations = createPermutations<TokenProps>([
{
label: ['token'],
icon: [undefined, <Icon key="icon" name="settings" size="small" />],
onDismiss: [undefined, () => {}],
readOnly: [false, true],
variant: ['inline'],
},
{
label: ['token'],
icon: [undefined, <Icon key="icon" name="settings" size="small" />],
onDismiss: [undefined, () => {}],
disabled: [true],
variant: ['inline'],
},
{
label: ['token'],
icon: [undefined, <Icon key="icon" name="settings" />],
onDismiss: [undefined, () => {}],
readOnly: [false, true],
variant: ['normal'],
},
{
label: ['token'],
icon: [undefined, <Icon key="icon" name="settings" />],
onDismiss: [undefined, () => {}],
disabled: [true],
variant: ['normal'],
},
{
label: ['token'],
description: [undefined, 'description'],
labelTag: ['label-tag', undefined],
tags: [['tag-1', 'tag-2'], undefined],
onDismiss: [undefined, () => {}],
variant: ['normal'],
},
{
label: ['token'],
icon: [<Icon key="icon" name="settings" size="big" />],
description: ['description'],
labelTag: ['label-tag', undefined],
tags: [['tag-1', 'tag-2'], undefined],
readOnly: [false, true],
disabled: [true, false],
variant: ['normal'],
},
]);

export default function TokenPermutations() {
return (
<>
<h1>Token permutations</h1>
<ScreenshotArea disableAnimations={true}>
<PermutationsView
permutations={permutations}
render={(permutation, index) => <Token {...permutation} dismissLabel={`Dismiss ${index}`} />}
/>
</ScreenshotArea>
</>
);
}
218 changes: 218 additions & 0 deletions pages/token/simple.page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useState } from 'react';
import { range } from 'lodash';

import { Popover } from '~components';
import Box from '~components/box';
import Icon from '~components/icon';
import Input from '~components/input';
import TokenList from '~components/internal/components/token-list';
import SpaceBetween from '~components/space-between';
import Token from '~components/token';

import styles from './styles.scss';

const i18nStrings = {
limitShowMore: 'Show more chosen options',
limitShowFewer: 'Show fewer chosen options',
};

const LONG_LABEL = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;

export default function GenericTokenPage() {
const [files, setFiles] = useState(range(0, 4));

const onDismiss = (itemIndex: number) => {
const newItems = [...files];
newItems.splice(itemIndex, 1);
setFiles(newItems);
};

return (
<Box padding="xl">
<h1>Standalone token</h1>
<h2>Inline</h2>
<SpaceBetween size="l" direction="vertical">
<Token data-testid="basic-inline-token" variant="inline" label="Inline token" />
<Token
variant="inline"
label="The quick brown fox jumps over the lazy dog"
tooltipContent="The quick brown fox jumps over the lazy dog"
/>
<Token data-testid="inline-token-long-text" variant="inline" label={LONG_LABEL} tooltipContent={LONG_LABEL} />
<Token variant="inline" label="Inline readonly token" readOnly={true} />
<Token variant="inline" label="Inline disabled token" disabled={true} />

<Token
data-testid="inline-token-dismissable"
variant="inline"
dismissLabel="Dismiss token"
label="Inline dismissable token"
onDismiss={() => {}}
/>
<Token
variant="inline"
dismissLabel="Dismiss readonly token"
label="Inline dismissable readonly token"
readOnly={true}
onDismiss={() => {}}
/>
<Token
variant="inline"
dismissLabel="Dismiss disabled token"
label="Inline dismissable disabled token"
disabled={true}
onDismiss={() => {}}
/>

<Token
variant="inline"
dismissLabel="Dismiss readonly token with icon"
label="Inline dismissable readonly token"
icon={<Icon name="edit" size="small" />}
readOnly={true}
onDismiss={() => {}}
/>

<Token
variant="inline"
dismissLabel="Dismiss disabled token with icon"
label="Inline dismissable disabled token with icon"
icon={<Icon name="edit" size="small" />}
disabled={true}
onDismiss={() => {}}
/>
<div style={{ display: 'inline' }}>
<Token label="Inline test 1" variant="inline" />
<Token label="Inline test 2" variant="inline" />
<Token label="Inline test 3" variant="inline" />
</div>
</SpaceBetween>

<h2>Normal</h2>
<SpaceBetween size="l" direction="vertical">
<Token label="Standalone token" />
<Token label="Standalone token with icon" icon={<Icon name="bug" />} />
<Token
ariaLabel="Standalone token with popover"
data-testid="normal-token-with-popover"
label={
<Popover
triggerType="text-inline"
position="top"
header="test"
content={<Input placeholder="Enter value" value="" onChange={() => {}} />}
>
Standalone token with popover
</Popover>
}
labelTag="Test"
onDismiss={() => {}}
dismissLabel="Dismiss normal token with popover"
/>
<Token
ariaLabel="Standalone token with icon and popover"
dismissLabel="Dismiss normal token with popover and icon"
label={
<Popover
triggerType="text-inline"
position="top"
header="test"
content={<Input placeholder="Enter value" value="" onChange={() => {}} />}
>
Standalone token with icon and popover
</Popover>
}
icon={<Icon name="bug" />}
onDismiss={() => {}}
/>
<Token
data-testid="normal-token-dismissable"
dismissLabel="Dismiss normal token"
label="Dismissable token"
labelTag="test"
onDismiss={() => {}}
/>

<Token label={LONG_LABEL} />
<Token
data-testid="normal-token-with-icon-dismissable"
dismissLabel="Dismiss features token"
label="Dismissable token"
description="some description"
labelTag="test"
tags={['tag', 'tag']}
icon={<Icon name="bug" data-testid="token-bug-icon" />}
onDismiss={() => {}}
/>

<Token label="Standalone readonly token" readOnly={true} />

<Token
label="Standalone readonly dismissable token"
readOnly={true}
onDismiss={() => {}}
dismissLabel="Dismiss normal readonly token"
/>

<Token label="Standalone disabled token" disabled={true} />

<Token
label="Standalone disabled dismissable token"
disabled={true}
onDismiss={() => {}}
dismissLabel="Dismiss normal disabled token"
/>

<TokenList
alignment="vertical"
items={files}
i18nStrings={i18nStrings}
limit={5}
renderItem={(file, fileIndex) => (
<Token
ariaLabel={`File token ${fileIndex}`}
label={<FileOption file={file} />}
disabled={file === 0}
dismissLabel={`Remove file ${fileIndex + 1}`}
onDismiss={() => onDismiss(fileIndex)}
/>
)}
/>
</SpaceBetween>
</Box>
);
}

function FileOption({ file }: { file: number }) {
const fileName = `agreement-${file + 1}.pdf`;
return (
<div className={styles['file-option']}>
<Icon variant="success" name="status-positive" />

<div className={styles['file-option-metadata']}>
<SpaceBetween direction="vertical" size="xxxs">
{
<div className={styles['file-option-name']}>
<div className={styles['file-option-name-label']} title={fileName}>
{fileName}
</div>
</div>
}
<Box fontSize="body-s" color="text-body-secondary">
application/pdf
</Box>
<Box fontSize="body-s" color="text-body-secondary">
313.03 KB
</Box>
<Box fontSize="body-s" color="text-body-secondary">
2022-01-01T12:02:02
</Box>
</SpaceBetween>
</div>
</div>
);
}
File renamed without changes.
Loading
Loading