Skip to content

Commit 84e9280

Browse files
ernst-devernst-dev
authored
feat: Add IconProvider component (#3703)
1 parent 0960991 commit 84e9280

File tree

11 files changed

+1206
-4
lines changed

11 files changed

+1206
-4
lines changed

‎build-tools/utils/pluralize.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const pluralizationMap = {
4141
HelpPanel: 'HelpPanels',
4242
Hotspot: 'Hotspots',
4343
Icon: 'Icons',
44+
IconProvider: 'IconProviders',
4445
Input: 'Inputs',
4546
KeyValuePairs: 'KeyValuePairs',
4647
LineChart: 'LineCharts',

‎pages/icon-provider/simple.page.tsx

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React, { useState } from 'react';
4+
5+
import Alert from '~components/alert';
6+
import Button from '~components/button';
7+
import CollectionPreferences from '~components/collection-preferences';
8+
import I18nProvider from '~components/i18n';
9+
import messages from '~components/i18n/messages/all.en';
10+
import Icon from '~components/icon';
11+
import IconProvider from '~components/icon-provider/internal';
12+
import SpaceBetween from '~components/space-between';
13+
import StatusIndicator from '~components/status-indicator';
14+
import TextFilter from '~components/text-filter';
15+
16+
import {
17+
baseProperties,
18+
contentDensityPreference,
19+
customPreference,
20+
pageSizePreference,
21+
wrapLinesPreference,
22+
} from '../collection-preferences/shared-configs';
23+
import { contentDisplayPreferenceI18nStrings } from '../common/i18n-strings';
24+
import ScreenshotArea from '../utils/screenshot-area';
25+
26+
const CUSTOM_SVG = (
27+
<svg focusable={false}>
28+
<circle cx="8" cy="8" r="7" />
29+
<circle cx="8" cy="8" r="3.5" />
30+
</svg>
31+
);
32+
33+
const CUSTOM_SIMPLE_SVG = (
34+
<svg focusable={false}>
35+
<circle cx="8" cy="8" r="7" />
36+
</svg>
37+
);
38+
39+
export default function SimpleContainers() {
40+
const [filteringText, setFilteringText] = useState('Icon test');
41+
return (
42+
<I18nProvider messages={[messages]} locale="en">
43+
<article>
44+
<h1>Simple Icon Provider</h1>
45+
<ScreenshotArea>
46+
{/* Global icon override */}
47+
<IconProvider
48+
icons={{
49+
close: CUSTOM_SIMPLE_SVG,
50+
}}
51+
>
52+
<SpaceBetween size="m">
53+
{/* Basic icon override */}
54+
<IconProvider
55+
icons={{
56+
search: CUSTOM_SVG,
57+
}}
58+
>
59+
<TextFilter
60+
filteringText={filteringText}
61+
filteringAriaLabel="Test filter"
62+
onChange={({ detail }) => setFilteringText(detail.filteringText)}
63+
/>
64+
</IconProvider>
65+
66+
{/* Multi-component icon override */}
67+
<IconProvider
68+
icons={{
69+
'status-positive': CUSTOM_SVG,
70+
'status-negative': CUSTOM_SVG,
71+
}}
72+
>
73+
<SpaceBetween size="m">
74+
<SpaceBetween size="s" direction="horizontal" alignItems="center">
75+
{/* Use close override from parent Provider */}
76+
<Button iconName="close">Icon test</Button>
77+
<StatusIndicator type="success">Icon test</StatusIndicator>
78+
</SpaceBetween>
79+
<Alert type="error" dismissible={true}>
80+
Icon test
81+
</Alert>
82+
</SpaceBetween>
83+
</IconProvider>
84+
85+
{/* Icon reset */}
86+
<IconProvider icons={{ 'add-plus': CUSTOM_SVG, close: CUSTOM_SIMPLE_SVG }}>
87+
<SpaceBetween direction="vertical" size="l">
88+
<Icon name={'add-plus'} />
89+
<Icon name={'close'} />
90+
{/* Restore icons in the below Provider back to the built-in set */}
91+
<IconProvider icons={null}>
92+
<SpaceBetween direction="horizontal" size="s">
93+
<Icon name={'add-plus'} />
94+
<Icon name={'close'} />
95+
</SpaceBetween>
96+
</IconProvider>
97+
{/* Restore specific icons in the below Provider back to the built-in icons */}
98+
<IconProvider icons={{ close: null }}>
99+
<SpaceBetween direction="horizontal" size="s">
100+
<Icon name={'add-plus'} />
101+
<Icon name={'close'} />
102+
</SpaceBetween>
103+
</IconProvider>
104+
</SpaceBetween>
105+
</IconProvider>
106+
107+
{/* Modal icon override */}
108+
<IconProvider
109+
icons={{
110+
'drag-indicator': CUSTOM_SVG,
111+
close: CUSTOM_SIMPLE_SVG,
112+
}}
113+
>
114+
<CollectionPreferences
115+
{...baseProperties}
116+
pageSizePreference={pageSizePreference}
117+
wrapLinesPreference={wrapLinesPreference}
118+
contentDensityPreference={contentDensityPreference}
119+
customPreference={customPreference}
120+
contentDisplayPreference={{
121+
title: 'Column preferences',
122+
description: 'Customize the columns visibility and order.',
123+
options: [
124+
{ id: 'id1', label: 'Item 1' },
125+
{ id: 'id2', label: 'Item 2' },
126+
{ id: 'id3', label: 'Item 3' },
127+
{ id: 'id4', label: 'Item 4' },
128+
],
129+
...contentDisplayPreferenceI18nStrings,
130+
}}
131+
/>
132+
</IconProvider>
133+
</SpaceBetween>
134+
</IconProvider>
135+
</ScreenshotArea>
136+
</article>
137+
</I18nProvider>
138+
);
139+
}

‎src/__tests__/functional-tests/test-utils.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ afterEach(() => {
3030
});
3131

3232
const componentWithMultipleRootElements = ['top-navigation', 'app-layout', 'app-layout-toolbar'];
33-
const componentsWithExceptions = ['annotation-context', ...componentWithMultipleRootElements];
33+
const componentsWithExceptions = ['annotation-context', 'icon-provider', ...componentWithMultipleRootElements];
3434
const components = getAllComponents().filter(component => !componentsWithExceptions.includes(component));
3535

3636
const RENDER_COMPONENTS_DEFAULT_PROPS: Record<string, unknown>[] = [

0 commit comments

Comments
 (0)