- {buttonAndIconSizesMap.map(({ size, iconSize }) => (
+ {Object.keys(config.variants.size).map((size) => (
-
-
-
+
{size}
))}
@@ -135,7 +113,7 @@ function renderAllSizesFn(
export const Default: Story = {
args: {
onPress: fn(),
- children:
,
+ iconName: 'search',
},
play: async ({ canvas, userEvent, args }) => {
await userEvent.click(canvas.getByRole('button'))
@@ -283,6 +261,7 @@ export const Examples: Story = {
)
},
}
+
export const Filled: Story = {
args: {
...Default.args,
@@ -319,9 +298,7 @@ export const FilledOnDarkBackground: Story = {
export const FilledWithEmphasis: Story = {
args: {
...Filled.args,
- children: (
-
- ),
+ iconName: 'arrow_forward',
emphasis: true,
},
play: async ({ canvas, userEvent, args }) => {
@@ -344,9 +321,7 @@ export const FilledWithEmphasisDisabled: Story = {
export const Outlined: Story = {
args: {
...Default.args,
- children: (
-
- ),
+ iconName: 'arrow_forward',
variant: 'Outlined',
},
play: async ({ canvas, userEvent, args }) => {
@@ -369,9 +344,7 @@ export const OutlinedDisabled: Story = {
export const Elevated: Story = {
args: {
...Default.args,
- children: (
-
- ),
+ iconName: 'arrow_forward',
variant: 'Elevated',
},
play: async ({ canvas, userEvent, args }) => {
@@ -395,9 +368,7 @@ export const Faded: Story = {
globals: globalStoryPropsInverted,
args: {
...Default.args,
- children: (
-
- ),
+ iconName: 'arrow_forward',
variant: 'Faded',
},
play: async ({ canvas, userEvent, args }) => {
@@ -422,9 +393,7 @@ export const Muted: Story = {
globals: globalStoryPropsInverted,
args: {
...Default.args,
- children: (
-
- ),
+ iconName: 'arrow_forward',
variant: 'Muted',
},
play: async ({ canvas, userEvent, args }) => {
diff --git a/packages/design-system/lib/components/IconButton/IconButton.tsx b/packages/design-system/lib/components/IconButton/IconButton.tsx
index 71156aada..e1edb2b2f 100644
--- a/packages/design-system/lib/components/IconButton/IconButton.tsx
+++ b/packages/design-system/lib/components/IconButton/IconButton.tsx
@@ -1,16 +1,14 @@
import { Button as ButtonRAC } from 'react-aria-components'
-import { VariantProps } from 'class-variance-authority'
-import { ComponentProps } from 'react'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { IconButtonProps } from './types'
import { variants } from './variants'
-interface IconButtonProps
- extends ComponentProps
, VariantProps {}
-
export function IconButton({
variant,
emphasis,
size,
+ iconName,
className,
...props
}: IconButtonProps) {
@@ -21,5 +19,27 @@ export function IconButton({
className,
})
- return
+ return (
+
+
+
+ )
+}
+
+function getIconSize(size: IconButtonProps['size']) {
+ switch (size) {
+ case 'sm':
+ return 16
+ case 'md':
+ return 20
+ case 'xl':
+ return 28
+ case 'lg':
+ default:
+ return 24
+ }
}
diff --git a/packages/design-system/lib/components/IconButton/iconButton.module.css b/packages/design-system/lib/components/IconButton/iconButton.module.css
index 64f97c1b3..30f31872f 100644
--- a/packages/design-system/lib/components/IconButton/iconButton.module.css
+++ b/packages/design-system/lib/components/IconButton/iconButton.module.css
@@ -73,7 +73,7 @@
&.emphasis {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
- color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
+ color: inherit;
&[data-disabled] {
background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
@@ -231,7 +231,7 @@
}
&.emphasis {
- color: var(--Component-Button-Muted-On-fill-Default);
+ color: inherit;
&[data-disabled] {
background-color: var(--Component-Button-Muted-Fill-Disabled-inverted);
diff --git a/packages/design-system/lib/components/IconButton/types.ts b/packages/design-system/lib/components/IconButton/types.ts
new file mode 100644
index 000000000..bdc2f60c9
--- /dev/null
+++ b/packages/design-system/lib/components/IconButton/types.ts
@@ -0,0 +1,39 @@
+import { Button as ButtonRAC } from 'react-aria-components'
+
+import type { VariantProps } from 'class-variance-authority'
+import type { ComponentProps } from 'react'
+
+import type { SymbolCodepoints } from '../Icons/MaterialIcon/MaterialSymbol/types'
+import type { variants } from './variants'
+
+export const iconButtonIconNames = [
+ 'arrow_forward',
+ 'arrow_back',
+ 'remove',
+ 'close',
+ 'add',
+ 'search',
+ 'info_circle',
+ 'help_circle',
+ 'info',
+ 'delete',
+ 'visibility',
+ 'visibility_off',
+ 'keyboard_arrow_down',
+ 'keyboard_arrow_up',
+ 'cancel',
+ 'chevron_left',
+ 'chevron_right',
+] as const
+
+export type IconButtonIconName = Extract<
+ SymbolCodepoints,
+ (typeof iconButtonIconNames)[number]
+>
+
+export interface IconButtonProps
+ extends
+ Omit, 'children'>,
+ VariantProps {
+ iconName: IconButtonIconName
+}
diff --git a/packages/design-system/lib/components/InfoCard/InfoCard.tsx b/packages/design-system/lib/components/InfoCard/InfoCard.tsx
index b5474cea1..37fc1c07d 100644
--- a/packages/design-system/lib/components/InfoCard/InfoCard.tsx
+++ b/packages/design-system/lib/components/InfoCard/InfoCard.tsx
@@ -71,9 +71,8 @@ export function InfoCard({
{primaryButton ? (
= {
defaultValue: { summary: 'false' },
},
},
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
} as any,
}
@@ -147,6 +148,7 @@ export const Default: Story = {
leftIconName: 'person',
rightIconName: 'lock',
showWarning: false,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
} as any,
render: (args) => {
// Extract custom Storybook args
diff --git a/packages/design-system/lib/components/Input/Input.tsx b/packages/design-system/lib/components/Input/Input.tsx
index 328d575e4..0af149e30 100644
--- a/packages/design-system/lib/components/Input/Input.tsx
+++ b/packages/design-system/lib/components/Input/Input.tsx
@@ -13,7 +13,6 @@ import { InputLabel } from '../InputLabel'
import styles from './input.module.css'
import { IconButton } from '../IconButton'
-import { MaterialIcon } from '../Icons/MaterialIcon'
import { Typography } from '../Typography'
import type { InputProps } from './types'
import { clearInput, useInputHasValue } from './utils'
@@ -113,9 +112,8 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
onPress={onClearContent}
// eslint-disable-next-line formatjs/no-literal-string-in-jsx
aria-label="Clear content"
- >
-
-
+ iconName="cancel"
+ />
)}
{rightIcon && !(showClearContentIcon && hasValue) && (
@@ -162,9 +160,8 @@ const InputComponent = forwardRef(function AriaInputWithLabelComponent(
onPress={onClearContent}
// eslint-disable-next-line formatjs/no-literal-string-in-jsx
aria-label="Clear content"
- >
-
-
+ iconName="cancel"
+ />
@@ -156,9 +145,8 @@ export default function Gallery({
id: 'lightbox.previousImage',
defaultMessage: 'Previous image',
})}
- >
-
-
+ iconName="arrow_back"
+ />
-
-
+ iconName="arrow_forward"
+ />