diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js index 73511df043..80702296a5 100644 --- a/build-tools/utils/custom-css-properties.js +++ b/build-tools/utils/custom-css-properties.js @@ -184,5 +184,9 @@ const customCssPropertiesList = [ 'styleItemCardBorderRadius', 'styleItemCardBorderWidthDefault', 'styleItemCardBoxShadowDefault', + // Icon custom properties + 'iconSizeOverride', + 'iconStrokeWidthOverride', + 'iconStrokeScale', ]; module.exports = customCssPropertiesList; 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..5809b7ee56 --- /dev/null +++ b/pages/icon-provider/icon-scale-props.page.tsx @@ -0,0 +1,993 @@ +// 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 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 ToggleButton from '~components/toggle-button'; +import TreeView from '~components/tree-view'; + +import { filteringProperties, i18nStrings as propertyFilterI18nStrings } from '../property-filter/common-props'; +import { generateItems } from '../table/generate-data'; +import { columnsConfig } from '../table/shared-configs'; + +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); + } + }; +}; + +function Typography() { + return ( + Typography}> + + +

+ Heading 1 (icon size big) +

+

+ Heading 2 (icon size medium) +

+

+ Heading 3 (icon size normal) +

+

+ Heading 4 (icon size normal) +

+
+ Heading 5 (icon size normal) +
+

+ Paragraph (icon size normal) +

+ + Small (icon size 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 + + . + + + ); +} + +const iconNames: Array['name']> = [ + 'add-plus', + 'settings', + 'close', + 'check', + 'star', + 'send', + 'refresh', + 'edit', + 'remove', + 'copy', + 'share', + 'lock-private', + 'folder', + 'file', + 'notification', + 'search', +]; + +function IconSizes() { + return ( + Icon sizes}> + + + + X-Small (New size variant. Currently this variant is not used in any existing components) + + + {iconNames.map(name => ( + + ))} + + + + + Small + + + {iconNames.map(name => ( + + ))} + + + + + Normal + + + {iconNames.map(name => ( + + ))} + + + + + Medium + + + {iconNames.map(name => ( + + ))} + + + + + Big + + + {iconNames.map(name => ( + + ))} + + + + + Large + + + {iconNames.map(name => ( + + ))} + + + + + ); +} + +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 + + + +