From 3d21eff52e859d571a61a2c3ccd872086b843bca Mon Sep 17 00:00:00 2001 From: at-susie Date: Wed, 13 May 2026 10:25:46 +0200 Subject: [PATCH 1/2] chore: Add icon size and stroke width props --- pages/app/index.tsx | 1 + pages/icon-provider/icon-scale-props.page.tsx | 1165 +++++++++++++++++ pages/theming/themed-stroke-width.page.tsx | 2 +- src/__a11y__/run-a11y-tests.ts | 2 +- src/expandable-section/styles.scss | 2 + src/icon-provider/context.ts | 32 + src/icon-provider/interfaces.ts | 56 + src/icon-provider/internal.tsx | 84 +- src/icon/internal.tsx | 113 +- src/icon/mixins.scss | 22 +- 10 files changed, 1464 insertions(+), 15 deletions(-) create mode 100644 pages/icon-provider/icon-scale-props.page.tsx diff --git a/pages/app/index.tsx b/pages/app/index.tsx index 10dcf497e5..14d484e424 100644 --- a/pages/app/index.tsx +++ b/pages/app/index.tsx @@ -54,6 +54,7 @@ function isAppLayoutPage(pageId?: string) { 'error-boundary/demo-async-load', 'error-boundary/demo-components', 'feature-notifications', + 'icon-provider/icon-scale-props', ]; return pageId !== undefined && appLayoutPages.some(match => pageId.includes(match)); } diff --git a/pages/icon-provider/icon-scale-props.page.tsx b/pages/icon-provider/icon-scale-props.page.tsx new file mode 100644 index 0000000000..17f92a61bd --- /dev/null +++ b/pages/icon-provider/icon-scale-props.page.tsx @@ -0,0 +1,1165 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useState } from 'react'; + +import { useCollection } from '@cloudscape-design/collection-hooks'; + +import { PromptInput } from '~components'; +import Alert from '~components/alert'; +import AppLayoutToolbar from '~components/app-layout-toolbar'; +import Box from '~components/box'; +import BreadcrumbGroup from '~components/breadcrumb-group'; +import Button from '~components/button'; +import ButtonDropdown from '~components/button-dropdown'; +import ButtonGroup from '~components/button-group'; +import ColumnLayout from '~components/column-layout'; +import Container from '~components/container'; +import CopyToClipboard from '~components/copy-to-clipboard'; +import DatePicker from '~components/date-picker'; +import Flashbar, { FlashbarProps } from '~components/flashbar'; +import Form from '~components/form'; +import FormField from '~components/form-field'; +import Header from '~components/header'; +import Icon from '~components/icon'; +import IconProvider from '~components/icon-provider'; +import Input, { InputProps } from '~components/input'; +import { NonCancelableCustomEvent } from '~components/internal/events'; +import Link from '~components/link'; +import Multiselect, { MultiselectProps } from '~components/multiselect'; +import PropertyFilter, { PropertyFilterProps } from '~components/property-filter'; +import SegmentedControl from '~components/segmented-control'; +import Select from '~components/select'; +import SideNavigation from '~components/side-navigation'; +import SpaceBetween from '~components/space-between'; +import SplitPanel from '~components/split-panel'; +import StatusIndicator from '~components/status-indicator'; +import Table from '~components/table'; +import Tabs from '~components/tabs'; +import TextContent from '~components/text-content'; +import TextFilter from '~components/text-filter'; +import Tiles from '~components/tiles'; +import ToggleButton from '~components/toggle-button'; +import TreeView from '~components/tree-view'; + +const createNumericHandler = (setter: (value: string) => void, min?: number, max?: number) => { + return (evt: NonCancelableCustomEvent) => { + const val = evt.detail.value; + if (val === '') { + setter(val); + return; + } + const numValue = parseFloat(val); + if (!isNaN(numValue)) { + if (min !== undefined && numValue < min) { + return; + } + if (max !== undefined && numValue > max) { + return; + } + setter(val); + } + }; +}; + +// ─── Typography ─────────────────────────────────────────────────────────────── +function Typography() { + return ( + Typography & Iconography}> + + +

+ Heading 1 +

+

+ Heading 2 +

+

+ Heading 3 +

+

+ Heading 4 +

+
+ Heading 5 +
+

+ Paragraph +

+ + Small + + + + + Paragraph –{' '} + + Amazon EC2 + {' '} + provides each instance with a consistent and predictable amount of CPU capacity, regardless of its{' '} + + underlying hardware + + . + + + Paragraph –{' '} + + Amazon EC2 + {' '} + provides each instance with a consistent and predictable amount of CPU capacity, regardless of its{' '} + + underlying hardware + + . + + + Icons – Normal size + + + + + + + + + + + + + + + + + + + + + + ); +} + +// ─── Buttons, Inputs, Dropdowns ─────────────────────────────────────────────── +function ButtonsInputsDropdowns() { + const [selectedSegment, setSelectedSegment] = useState('seg-1'); + const [toggle1, setToggle1] = useState(true); + const [toggle2, setToggle2] = useState(false); + const [dateValue, setDateValue] = useState('2024-01-15'); + const [filteringText, setFilteringText] = useState('instance'); + const multiSelectOptions: MultiselectProps.Options = [ + { + label: 'Option 1', + value: '1', + description: 'This is a description', + }, + { + label: 'Option 2', + value: '2', + iconName: 'unlocked', + labelTag: 'This is a label tag', + }, + { + label: 'Option 3 (disabled)', + value: '3', + iconName: 'share', + tags: ['Tags go here', 'Tag1', 'Tag2'], + }, + { + label: 'Option 4', + value: '4', + filteringTags: ['filtering', 'tags', 'these are filtering tags'], + }, + { label: 'Option 5', value: '5' }, + ]; + const [selectedItems, setSelectedItems] = useState([ + multiSelectOptions[1], + multiSelectOptions[3], + ]); + + const [query, setQuery] = React.useState({ + tokens: [ + { propertyKey: 'state', operator: '=', value: 'Running' }, + { propertyKey: 'instancetype', operator: '=', value: 't3.small' }, + ], + operation: 'and', + }); + const [value, setValue] = React.useState(''); + + return ( + Buttons, inputs, and dropdowns}> + + + + + + + Actions + + + +