From 033e55eb61ed0e1282fc129324edfcf3defae2b7 Mon Sep 17 00:00:00 2001 From: Lukas Weiss Date: Fri, 4 Oct 2024 10:01:04 +0200 Subject: [PATCH] new react material icons (#319) * update react-material-icons to version 2.0.0 * use new react-material icons --- package-lock.json | 8 +++---- package.json | 2 +- src/components/alert/Alert.stories.tsx | 22 +++++++++---------- src/components/alert/ConvenientAlerts.tsx | 14 ++++++------ src/components/button/Button.stories.tsx | 12 +++++----- src/components/button/ButtonIcon.stories.tsx | 10 ++++----- .../button/ButtonIconLink.stories.tsx | 10 ++++----- src/components/button/ButtonLink.stories.tsx | 16 ++++++++++---- .../button/SubmitButton.stories.tsx | 16 ++++++++++---- .../ContentMessage/ContentMessage.stories.tsx | 14 ++++++------ .../Dialog/ConvenientDialogContentMessage.tsx | 8 +++---- .../DialogHeader/DialogHeaderCloseAction.tsx | 4 ++-- .../DialogItem/DialogListItemButton.tsx | 4 ++-- src/components/form/InputField.stories.tsx | 18 +++++++-------- src/components/form/SearchField.tsx | 4 ++-- .../form/primitive/Checkbox/Checkbox.tsx | 16 +++++++++----- .../form/primitive/Input.stories.tsx | 22 +++++++++++-------- .../primitive/InputIcon/InputIcon.stories.tsx | 10 ++++----- src/components/form/primitive/Radio/Radio.tsx | 4 ++-- .../actions/HeaderBackAction.stories.mdx | 4 ++-- .../header/actions/HeaderBackAction.tsx | 4 ++-- .../actions/HeaderButtonIcon.stories.mdx | 8 +++---- .../actions/HeaderCloseAction.stories.mdx | 8 +++---- .../header/actions/HeaderCloseAction.tsx | 4 ++-- .../actions/HeaderLeftActionIcon.stories.mdx | 8 +++---- .../actions/HeaderRightActionIcon.stories.mdx | 8 +++---- .../header/areas/HeaderLeftArea.stories.mdx | 4 ++-- .../header/areas/HeaderRightArea.stories.mdx | 10 ++++----- src/components/menu/Menu.stories.tsx | 8 +++---- .../PaginationPreviousNextContent.tsx | 12 ++++++---- .../react-hook-form/DateFormField.stories.tsx | 8 +++---- .../FormSubmitFeedback.stories.mdx | 12 +++++----- .../react-hook-form/FormSubmitFeedback.tsx | 4 ++-- .../InputFormField.stories.tsx | 8 +++---- .../NumberFormField.stories.tsx | 8 +++---- .../react-hook-form/SearchFormField.tsx | 4 ++-- .../SelectItemFormFieldDialog.tsx | 4 ++-- .../SelectItemFormFieldInput.tsx | 8 +++---- .../ConvenientSectionContentMessage.tsx | 8 +++---- .../Section/SectionContentMessage.stories.mdx | 8 +++---- .../section/SectionItem/SectionListItem.tsx | 4 ++-- .../SectionListItemWithAction.stories.mdx | 22 +++++++++---------- src/examples/Form.stories.tsx | 4 ++-- src/examples/List.stories.tsx | 4 ++-- 44 files changed, 213 insertions(+), 185 deletions(-) diff --git a/package-lock.json b/package-lock.json index e9909faf..c4b9bc8c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "2.8.2", "dependencies": { "@aboutbits/pagination": "^2.0.2", - "@aboutbits/react-material-icons": "^1.2.5", + "@aboutbits/react-material-icons": "^2.0.0", "@aboutbits/react-toolbox": "^0.2.5", "@floating-ui/react": "^0.26.10", "@headlessui/react": "^1.7.18", @@ -168,9 +168,9 @@ } }, "node_modules/@aboutbits/react-material-icons": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/@aboutbits/react-material-icons/-/react-material-icons-1.2.5.tgz", - "integrity": "sha512-LX2BSqAPpE5e+caB6dPxahpBqxxkBi/3BMdQJfjEoHpSG5jx1GS4JXFCONuxejlu+tS2S8swYjDTl//B9dbnwQ==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@aboutbits/react-material-icons/-/react-material-icons-2.0.0.tgz", + "integrity": "sha512-ZIwT9pHOn8iHGgxKUfB1CCN7yEzhdBaFIYDqiZoang3yzYnkvHcWoqU32FtGXBz4SwunEmYAhQvggqL8iXK4QQ==", "engines": { "node": ">=16", "npm": ">=8" diff --git a/package.json b/package.json index d6541748..f586a54e 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ }, "dependencies": { "@aboutbits/pagination": "^2.0.2", - "@aboutbits/react-material-icons": "^1.2.5", + "@aboutbits/react-material-icons": "^2.0.0", "@aboutbits/react-toolbox": "^0.2.5", "@floating-ui/react": "^0.26.10", "@headlessui/react": "^1.7.18", diff --git a/src/components/alert/Alert.stories.tsx b/src/components/alert/Alert.stories.tsx index dd65dfb5..b6914065 100644 --- a/src/components/alert/Alert.stories.tsx +++ b/src/components/alert/Alert.stories.tsx @@ -1,6 +1,6 @@ -import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' -import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' +import IconCheckOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckOutlinedFilled' +import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled' +import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled' import { Controls, Markdown, @@ -26,9 +26,9 @@ const icons = { options: ['None', 'Warning', 'Check', 'Info'], mapping: { None: undefined, - Warning: IconWarning, - Check: IconCheck, - Info: IconInfo, + Warning: IconWarningOutlinedFilled, + Check: IconCheckOutlinedFilled, + Info: IconInfoOutlinedFilled, }, control: { type: 'select' }, } @@ -88,7 +88,7 @@ const meta = { children: 'This alert component can be used to highlight a message to the user.', tone: Tone.Critical, - icon: IconWarning, + icon: IconWarningOutlinedFilled, }, argTypes: { title: { control: 'text' }, @@ -169,7 +169,7 @@ export const ConvinientAlertComponents: Story = { export const ActionsResponsive: Story = { args: { - icon: IconCheck, + icon: IconCheckOutlinedFilled, tone: Tone.Success, actions: DissmissSuccessButton, actionsPosition: AlertActionsPosition.Responsive, @@ -186,7 +186,7 @@ export const ActionsResponsive: Story = { export const ActionsFixedRight: Story = { args: { - icon: IconCheck, + icon: IconCheckOutlinedFilled, tone: Tone.Success, actions: DissmissSuccessButton, actionsPosition: AlertActionsPosition.FixedRight, @@ -207,7 +207,7 @@ export const ActionsFixedRight: Story = { export const ActionsFixedBottom: Story = { args: { - icon: IconCheck, + icon: IconCheckOutlinedFilled, tone: Tone.Success, actions: DissmissSuccessButton, actionsPosition: AlertActionsPosition.FixedBottom, @@ -228,7 +228,7 @@ export const ActionsFixedBottom: Story = { export const VeryLongMessage: Story = { args: { - icon: IconWarning, + icon: IconWarningOutlinedFilled, tone: Tone.Critical, }, render: (args) => ( diff --git a/src/components/alert/ConvenientAlerts.tsx b/src/components/alert/ConvenientAlerts.tsx index 00646b9d..f0d054bb 100644 --- a/src/components/alert/ConvenientAlerts.tsx +++ b/src/components/alert/ConvenientAlerts.tsx @@ -1,6 +1,6 @@ -import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' -import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' +import IconCheckOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckOutlinedFilled' +import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled' +import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled' import { ReactElement } from 'react' import { Tone } from '../types' import { Alert } from './Alert' @@ -11,7 +11,7 @@ export function AlertSuccess({ ...props }: Omit): ReactElement { return ( - + {children} ) @@ -22,7 +22,7 @@ export function AlertWarning({ ...props }: Omit): ReactElement { return ( - + {children} ) @@ -33,7 +33,7 @@ export function AlertCritical({ ...props }: Omit): ReactElement { return ( - + {children} ) @@ -44,7 +44,7 @@ export function AlertInformative({ ...props }: Omit): ReactElement { return ( - + {children} ) diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx index def02892..1a308d14 100644 --- a/src/components/button/Button.stories.tsx +++ b/src/components/button/Button.stories.tsx @@ -1,5 +1,5 @@ -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled' +import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled' import { Controls, Description, @@ -22,8 +22,8 @@ const icons = { options: ['None', 'Add', 'Info'], mapping: { None: undefined, - Add: IconAdd, - Info: IconInfo, + Add: IconAddOutlinedFilled, + Info: IconInfoOutlinedFilled, }, } @@ -111,12 +111,12 @@ export const Disabled: Story = { export const IconStart: Story = { args: { - iconStart: IconInfo, + iconStart: IconInfoOutlinedFilled, }, } export const IconEnd: Story = { args: { - iconEnd: IconInfo, + iconEnd: IconInfoOutlinedFilled, }, } diff --git a/src/components/button/ButtonIcon.stories.tsx b/src/components/button/ButtonIcon.stories.tsx index 88e08138..11d9e4d9 100644 --- a/src/components/button/ButtonIcon.stories.tsx +++ b/src/components/button/ButtonIcon.stories.tsx @@ -1,5 +1,5 @@ -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled' +import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled' import { Controls, Description, @@ -19,8 +19,8 @@ import { ButtonVariant } from './types' const icons = { options: ['Info', 'Add'], mapping: { - Info: IconInfo, - Add: IconAdd, + Info: IconInfoOutlinedFilled, + Add: IconAddOutlinedFilled, }, } @@ -32,7 +32,7 @@ const meta = { variant: ButtonVariant.Solid, size: Size.Md, tone: Tone.Primary, - icon: IconAdd, + icon: IconAddOutlinedFilled, }, argTypes: { icon: icons, diff --git a/src/components/button/ButtonIconLink.stories.tsx b/src/components/button/ButtonIconLink.stories.tsx index 1503005a..a85adcbf 100644 --- a/src/components/button/ButtonIconLink.stories.tsx +++ b/src/components/button/ButtonIconLink.stories.tsx @@ -1,5 +1,5 @@ -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled' +import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled' import { Controls, Description, @@ -22,7 +22,7 @@ const meta = { variant: ButtonVariant.Solid, size: Size.Md, tone: Tone.Primary, - icon: IconAdd, + icon: IconAddOutlinedFilled, }, argTypes: { mode: { @@ -44,8 +44,8 @@ const meta = { icon: { options: ['Info', 'Add'], mapping: { - Info: IconInfo, - Add: IconAdd, + Info: IconInfoOutlinedFilled, + Add: IconAddOutlinedFilled, }, control: { type: 'select' }, }, diff --git a/src/components/button/ButtonLink.stories.tsx b/src/components/button/ButtonLink.stories.tsx index c190c93f..fe86bad9 100644 --- a/src/components/button/ButtonLink.stories.tsx +++ b/src/components/button/ButtonLink.stories.tsx @@ -1,5 +1,5 @@ -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled' +import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled' import { Controls, Description, @@ -48,12 +48,20 @@ const meta = { }, iconStart: { options: ['None', 'Add', 'Info'], - mapping: { None: undefined, Add: IconAdd, Info: IconInfo }, + mapping: { + None: undefined, + Add: IconAddOutlinedFilled, + Info: IconInfoOutlinedFilled, + }, control: { type: 'select' }, }, iconEnd: { options: ['None', 'Add', 'Info'], - mapping: { None: undefined, Add: IconAdd, Info: IconInfo }, + mapping: { + None: undefined, + Add: IconAddOutlinedFilled, + Info: IconInfoOutlinedFilled, + }, control: { type: 'select' }, }, }, diff --git a/src/components/button/SubmitButton.stories.tsx b/src/components/button/SubmitButton.stories.tsx index fa2ecbb2..a96312ce 100644 --- a/src/components/button/SubmitButton.stories.tsx +++ b/src/components/button/SubmitButton.stories.tsx @@ -1,5 +1,5 @@ -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled' +import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled' import { Controls, Description, @@ -18,12 +18,20 @@ const meta = { argTypes: { iconStart: { options: ['None', 'Add', 'Info'], - mapping: { None: undefined, Add: IconAdd, Info: IconInfo }, + mapping: { + None: undefined, + Add: IconAddOutlinedFilled, + Info: IconInfoOutlinedFilled, + }, control: { type: 'select' }, }, iconEnd: { options: ['None', 'Add', 'Info'], - mapping: { None: undefined, Add: IconAdd, Info: IconInfo }, + mapping: { + None: undefined, + Add: IconAddOutlinedFilled, + Info: IconInfoOutlinedFilled, + }, control: { type: 'select' }, }, }, diff --git a/src/components/content/ContentMessage/ContentMessage.stories.tsx b/src/components/content/ContentMessage/ContentMessage.stories.tsx index a9840315..e863dea5 100644 --- a/src/components/content/ContentMessage/ContentMessage.stories.tsx +++ b/src/components/content/ContentMessage/ContentMessage.stories.tsx @@ -1,6 +1,6 @@ -import IconError from '@aboutbits/react-material-icons/dist/IconError' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' -import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' +import IconErrorOutlinedFilled from '@aboutbits/react-material-icons/dist/IconErrorOutlinedFilled' +import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled' +import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled' import { Controls, Description, @@ -19,16 +19,16 @@ const meta = { args: { title: 'No items', text: 'No data available for this view', - icon: IconInfo, + icon: IconInfoOutlinedFilled, }, argTypes: { icon: { options: ['None', 'Info', 'Warning', 'Error'], mapping: { None: undefined, - Info: IconInfo, - Warning: IconWarning, - Error: IconError, + Info: IconInfoOutlinedFilled, + Warning: IconWarningOutlinedFilled, + Error: IconErrorOutlinedFilled, }, control: { type: 'select' }, }, diff --git a/src/components/dialog/Dialog/ConvenientDialogContentMessage.tsx b/src/components/dialog/Dialog/ConvenientDialogContentMessage.tsx index 77d1ff99..28b8231f 100644 --- a/src/components/dialog/Dialog/ConvenientDialogContentMessage.tsx +++ b/src/components/dialog/Dialog/ConvenientDialogContentMessage.tsx @@ -1,5 +1,5 @@ -import IconList from '@aboutbits/react-material-icons/dist/IconList' -import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' +import IconListOutlinedFilled from '@aboutbits/react-material-icons/dist/IconListOutlinedFilled' +import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled' import { ReactElement } from 'react' import { Tone } from '../../types' import { @@ -8,14 +8,14 @@ import { } from './DialogContentMessage' export function DialogContentError({ - icon: Icon = IconWarning, + icon: Icon = IconWarningOutlinedFilled, ...props }: Omit): ReactElement { return } export function DialogContentEmpty({ - icon: Icon = IconList, + icon: Icon = IconListOutlinedFilled, ...props }: Omit): ReactElement { return diff --git a/src/components/dialog/DialogHeader/DialogHeaderCloseAction.tsx b/src/components/dialog/DialogHeader/DialogHeaderCloseAction.tsx index 366c63ee..fbc75852 100644 --- a/src/components/dialog/DialogHeader/DialogHeaderCloseAction.tsx +++ b/src/components/dialog/DialogHeader/DialogHeaderCloseAction.tsx @@ -1,4 +1,4 @@ -import IconClose from '@aboutbits/react-material-icons/dist/IconClose' +import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled' import { ComponentType, ReactElement } from 'react' import { useInternationalization } from '../../../framework' import { IconProps } from '../../types' @@ -18,7 +18,7 @@ export type DialogHeaderCloseActionProps = Omit< } export function DialogHeaderCloseAction({ - icon = IconClose, + icon = IconCloseOutlinedFilled, label, ...props }: DialogHeaderCloseActionProps): ReactElement { diff --git a/src/components/dialog/DialogItem/DialogListItemButton.tsx b/src/components/dialog/DialogItem/DialogListItemButton.tsx index a2686d71..116aea4a 100644 --- a/src/components/dialog/DialogItem/DialogListItemButton.tsx +++ b/src/components/dialog/DialogItem/DialogListItemButton.tsx @@ -1,4 +1,4 @@ -import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight' +import IconKeyboardArrowRightOutlinedFilled from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRightOutlinedFilled' import classNames from 'classnames' import { MouseEventHandler, forwardRef } from 'react' import { useTheme } from '../../../framework' @@ -32,7 +32,7 @@ export const DialogListItemButton = forwardRef< {...props} > {children} - (
- - + +
), } diff --git a/src/components/form/SearchField.tsx b/src/components/form/SearchField.tsx index 1f5d05ee..56ecfc7c 100644 --- a/src/components/form/SearchField.tsx +++ b/src/components/form/SearchField.tsx @@ -1,4 +1,4 @@ -import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' +import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled' import { forwardRef } from 'react' import { useInternationalization } from '../../framework' import { InputField, InputFieldProps } from './InputField' @@ -18,7 +18,7 @@ export const SearchField = forwardRef( name={name} ref={ref} placeholder={messages['search.placeholder']} - iconStart={IconSearch} + iconStart={IconSearchOutlinedFilled} {...props} /> ) diff --git a/src/components/form/primitive/Checkbox/Checkbox.tsx b/src/components/form/primitive/Checkbox/Checkbox.tsx index 26b8a710..307e52b5 100644 --- a/src/components/form/primitive/Checkbox/Checkbox.tsx +++ b/src/components/form/primitive/Checkbox/Checkbox.tsx @@ -1,5 +1,5 @@ -import IconCheckBoxOutlineBlankRounded from '@aboutbits/react-material-icons/dist/IconCheckBoxOutlineBlankRounded' -import IconCheckBoxRounded from '@aboutbits/react-material-icons/dist/IconCheckBoxRounded' +import IconCheckBoxOutlineBlankRoundedFilled from '@aboutbits/react-material-icons/dist/IconCheckBoxOutlineBlankRoundedFilled' +import IconCheckBoxRoundedFilled from '@aboutbits/react-material-icons/dist/IconCheckBoxRoundedFilled' import classNames from 'classnames' import { ReactNode, forwardRef } from 'react' import { useTheme } from '../../../../framework' @@ -80,13 +80,17 @@ export const Checkbox = forwardRef( required={required} className={checkboxInputCss} /> - + ) }, ) -export const IconCheckbox = ({ +export const IconCheckboxOutlinedFilled = ({ size, mode, disabled, @@ -115,7 +119,7 @@ export const IconCheckbox = ({ return ( <> - - (
- - + +
), } diff --git a/src/components/form/primitive/InputIcon/InputIcon.stories.tsx b/src/components/form/primitive/InputIcon/InputIcon.stories.tsx index 8b1ca549..9945b26c 100644 --- a/src/components/form/primitive/InputIcon/InputIcon.stories.tsx +++ b/src/components/form/primitive/InputIcon/InputIcon.stories.tsx @@ -1,5 +1,5 @@ -import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' -import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' +import IconBadgeOutlinedFilled from '@aboutbits/react-material-icons/dist/IconBadgeOutlinedFilled' +import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled' import { Controls, Description, @@ -16,15 +16,15 @@ import { IconPosition } from './types' const meta = { component: InputIcon, args: { - icon: IconSearch, + icon: IconSearchOutlinedFilled, position: IconPosition.Start, }, argTypes: { icon: { options: ['Search', 'Badge'], mapping: { - Search: IconSearch, - Badge: IconBadge, + Search: IconSearchOutlinedFilled, + Badge: IconBadgeOutlinedFilled, }, control: { type: 'select' }, }, diff --git a/src/components/form/primitive/Radio/Radio.tsx b/src/components/form/primitive/Radio/Radio.tsx index d76f2a30..22bd2b4f 100644 --- a/src/components/form/primitive/Radio/Radio.tsx +++ b/src/components/form/primitive/Radio/Radio.tsx @@ -59,13 +59,13 @@ export const Radio = forwardRef(function Radio( disabled={disabled} className={radioInputCss} /> - + {Boolean(label) && {label}} ) }) -const IconRadio = ({ +const IconRadioOutlinedFilled = ({ size, mode, disabled, diff --git a/src/components/header/actions/HeaderBackAction.stories.mdx b/src/components/header/actions/HeaderBackAction.stories.mdx index dc9bb268..29242b5e 100644 --- a/src/components/header/actions/HeaderBackAction.stories.mdx +++ b/src/components/header/actions/HeaderBackAction.stories.mdx @@ -1,4 +1,4 @@ -import IconClose from '@aboutbits/react-material-icons/dist/IconClose' +import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled' import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' import { InternationalizationMessages } from '../../../../.storybook/components' import { HeaderBackAction } from './HeaderBackAction' @@ -22,7 +22,7 @@ export const Template = (args) => options: ['Default', 'Close'], mapping: { Default: undefined, - Close: IconClose, + Close: IconCloseOutlinedFilled, }, control: { type: 'select' }, }, diff --git a/src/components/header/actions/HeaderBackAction.tsx b/src/components/header/actions/HeaderBackAction.tsx index 8674dac0..242d8480 100644 --- a/src/components/header/actions/HeaderBackAction.tsx +++ b/src/components/header/actions/HeaderBackAction.tsx @@ -1,4 +1,4 @@ -import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBack' +import IconArrowBackOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackOutlinedFilled' import { ComponentProps, ComponentType } from 'react' import { useInternationalization } from '../../../framework' import { IconProps } from '../../types' @@ -35,7 +35,7 @@ export type HeaderBackActionOnClickOrFallbackUrlProps = } export function HeaderBackAction({ - icon = IconArrowBack, + icon = IconArrowBackOutlinedFilled, label, onClick, fallbackUrl, diff --git a/src/components/header/actions/HeaderButtonIcon.stories.mdx b/src/components/header/actions/HeaderButtonIcon.stories.mdx index 1e634347..c9a1c563 100644 --- a/src/components/header/actions/HeaderButtonIcon.stories.mdx +++ b/src/components/header/actions/HeaderButtonIcon.stories.mdx @@ -1,5 +1,5 @@ -import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBack' -import IconClose from '@aboutbits/react-material-icons/dist/IconClose' +import IconArrowBackOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackOutlinedFilled' +import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled' import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' import { Theme } from '../../../../.storybook/components' import { HeaderButtonIcon } from './HeaderButtonIcon' @@ -20,8 +20,8 @@ export const Template = (args) => icon: { options: ['ArrowBack', 'Close'], mapping: { - ArrowBack: IconArrowBack, - Close: IconClose, + ArrowBack: IconArrowBackOutlinedFilled, + Close: IconCloseOutlinedFilled, }, control: { type: 'select' }, }, diff --git a/src/components/header/actions/HeaderCloseAction.stories.mdx b/src/components/header/actions/HeaderCloseAction.stories.mdx index 1fabf53a..e3ccce5a 100644 --- a/src/components/header/actions/HeaderCloseAction.stories.mdx +++ b/src/components/header/actions/HeaderCloseAction.stories.mdx @@ -1,5 +1,5 @@ -import IconArrowBackIos from '@aboutbits/react-material-icons/dist/IconArrowBackIos' -import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBack' +import IconArrowBackIosOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackIosOutlinedFilled' +import IconArrowBackOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackOutlinedFilled' import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' import { InternationalizationMessages } from '../../../../.storybook/components' import { HeaderCloseAction } from './HeaderCloseAction' @@ -26,8 +26,8 @@ export const Template = (args) => options: ['Default', 'ArrowBack', 'ArrowBackIos'], mapping: { Default: undefined, - ArrowBack: IconArrowBack, - ArrowBackIos: IconArrowBackIos, + ArrowBack: IconArrowBackOutlinedFilled, + ArrowBackIos: IconArrowBackIosOutlinedFilled, }, control: { type: 'select' }, }, diff --git a/src/components/header/actions/HeaderCloseAction.tsx b/src/components/header/actions/HeaderCloseAction.tsx index 088be826..a92eb56c 100644 --- a/src/components/header/actions/HeaderCloseAction.tsx +++ b/src/components/header/actions/HeaderCloseAction.tsx @@ -1,4 +1,4 @@ -import IconClose from '@aboutbits/react-material-icons/dist/IconClose' +import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled' import { ComponentType, ReactElement } from 'react' import { useInternationalization } from '../../../framework' import { IconProps } from '../../types' @@ -15,7 +15,7 @@ export type HeaderCloseActionProps = Omit & { } export function HeaderCloseAction({ - icon = IconClose, + icon = IconCloseOutlinedFilled, label, ...props }: HeaderCloseActionProps): ReactElement { diff --git a/src/components/header/actions/HeaderLeftActionIcon.stories.mdx b/src/components/header/actions/HeaderLeftActionIcon.stories.mdx index 0a4e2cdc..e00c22f8 100644 --- a/src/components/header/actions/HeaderLeftActionIcon.stories.mdx +++ b/src/components/header/actions/HeaderLeftActionIcon.stories.mdx @@ -1,5 +1,5 @@ -import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBack' -import IconClose from '@aboutbits/react-material-icons/dist/IconClose' +import IconArrowBackOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackOutlinedFilled' +import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled' import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' import { Theme } from '../../../../.storybook/components' import { HeaderLeftActionIcon } from './HeaderLeftActionIcon' @@ -25,8 +25,8 @@ export const Template = (args) => icon: { options: ['ArrowBack', 'Close'], mapping: { - ArrowBack: IconArrowBack, - Close: IconClose, + ArrowBack: IconArrowBackOutlinedFilled, + Close: IconCloseOutlinedFilled, }, control: { type: 'select' }, }, diff --git a/src/components/header/actions/HeaderRightActionIcon.stories.mdx b/src/components/header/actions/HeaderRightActionIcon.stories.mdx index a27c23c2..b9c07739 100644 --- a/src/components/header/actions/HeaderRightActionIcon.stories.mdx +++ b/src/components/header/actions/HeaderRightActionIcon.stories.mdx @@ -1,5 +1,5 @@ -import IconSave from '@aboutbits/react-material-icons/dist/IconSave' -import IconForward from '@aboutbits/react-material-icons/dist/IconForward' +import IconSaveOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSaveOutlinedFilled' +import IconForwardOutlinedFilled from '@aboutbits/react-material-icons/dist/IconForwardOutlinedFilled' import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' import { Theme } from '../../../../.storybook/components' import { HeaderRightActionIcon } from './HeaderRightActionIcon' @@ -25,8 +25,8 @@ export const Template = (args) => icon: { options: ['Save', 'Forward'], mapping: { - Save: IconSave, - Forward: IconForward, + Save: IconSaveOutlinedFilled, + Forward: IconForwardOutlinedFilled, }, control: { type: 'select' }, }, diff --git a/src/components/header/areas/HeaderLeftArea.stories.mdx b/src/components/header/areas/HeaderLeftArea.stories.mdx index 19905fc8..f61ab051 100644 --- a/src/components/header/areas/HeaderLeftArea.stories.mdx +++ b/src/components/header/areas/HeaderLeftArea.stories.mdx @@ -1,5 +1,5 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import IconArrowBack from '@aboutbits/react-material-icons/dist/IconArrowBack' +import IconArrowBackOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowBackOutlinedFilled' import { action } from '@storybook/addon-actions' import { Theme } from '../../../../.storybook/components' import { HeaderButtonIcon } from '../actions/HeaderButtonIcon' @@ -26,7 +26,7 @@ export const Template = ({ children, ...args }) => ( mapping: { HeaderButtonIcon: ( diff --git a/src/components/header/areas/HeaderRightArea.stories.mdx b/src/components/header/areas/HeaderRightArea.stories.mdx index c9f4776a..2450c4d3 100644 --- a/src/components/header/areas/HeaderRightArea.stories.mdx +++ b/src/components/header/areas/HeaderRightArea.stories.mdx @@ -1,7 +1,7 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import IconEdit from '@aboutbits/react-material-icons/dist/IconEdit' +import IconEditOutlinedFilled from '@aboutbits/react-material-icons/dist/IconEditOutlinedFilled' import { action } from '@storybook/addon-actions' -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' +import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled' import { Theme } from '../../../../.storybook/components' import { HeaderButtonIcon } from '../actions/HeaderButtonIcon' import { HeaderRightArea } from './HeaderRightArea' @@ -27,7 +27,7 @@ export const Template = ({ children, ...args }) => ( mapping: { HeaderButtonIcon: ( @@ -55,12 +55,12 @@ export const Template = ({ children, ...args }) => ( diff --git a/src/components/menu/Menu.stories.tsx b/src/components/menu/Menu.stories.tsx index 9cb55095..22329de4 100644 --- a/src/components/menu/Menu.stories.tsx +++ b/src/components/menu/Menu.stories.tsx @@ -1,5 +1,5 @@ -import IconArrowDropUp from '@aboutbits/react-material-icons/dist/IconArrowDropUp' -import IconMoreVert from '@aboutbits/react-material-icons/dist/IconMoreVert' +import IconArrowDropUpOutlinedFilled from '@aboutbits/react-material-icons/dist/IconArrowDropUpOutlinedFilled' +import IconMoreVertOutlinedFilled from '@aboutbits/react-material-icons/dist/IconMoreVertOutlinedFilled' import { action } from '@storybook/addon-actions' import { Controls, @@ -120,7 +120,7 @@ export const WithCustomButtonAndArrow: Story = { button: ({ placement, open }) => ( Menu - diff --git a/src/components/pagination/PaginationPreviousNextContent.tsx b/src/components/pagination/PaginationPreviousNextContent.tsx index c6c36fc4..9172668b 100644 --- a/src/components/pagination/PaginationPreviousNextContent.tsx +++ b/src/components/pagination/PaginationPreviousNextContent.tsx @@ -1,5 +1,5 @@ -import IconKeyboardArrowLeft from '@aboutbits/react-material-icons/dist/IconKeyboardArrowLeft' -import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight' +import IconKeyboardArrowLeftOutlinedFilled from '@aboutbits/react-material-icons/dist/IconKeyboardArrowLeftOutlinedFilled' +import IconKeyboardArrowRightOutlinedFilled from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRightOutlinedFilled' import { ReactElement } from 'react' import { useInternationalization, useTheme } from '../../framework' @@ -9,7 +9,9 @@ export function PaginationPreviousContent(): ReactElement { return ( <> - + {messages['pagination.prev']} @@ -26,7 +28,9 @@ export function PaginationNextContent(): ReactElement { {messages['pagination.next']} - + ) } diff --git a/src/components/react-hook-form/DateFormField.stories.tsx b/src/components/react-hook-form/DateFormField.stories.tsx index 1ecbd93c..9c7bcabf 100644 --- a/src/components/react-hook-form/DateFormField.stories.tsx +++ b/src/components/react-hook-form/DateFormField.stories.tsx @@ -1,5 +1,5 @@ -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' -import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' +import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled' +import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled' import { zodResolver } from '@hookform/resolvers/zod' import { action } from '@storybook/addon-actions' import { @@ -20,8 +20,8 @@ const icons = { options: ['None', 'Warning', 'Info'], mapping: { None: undefined, - Warning: IconWarning, - Info: IconInfo, + Warning: IconWarningOutlinedFilled, + Info: IconInfoOutlinedFilled, }, } diff --git a/src/components/react-hook-form/FormSubmitFeedback.stories.mdx b/src/components/react-hook-form/FormSubmitFeedback.stories.mdx index 3e201bd8..0f416f39 100644 --- a/src/components/react-hook-form/FormSubmitFeedback.stories.mdx +++ b/src/components/react-hook-form/FormSubmitFeedback.stories.mdx @@ -1,11 +1,11 @@ -import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircle' -import IconSave from '@aboutbits/react-material-icons/dist/IconSave' +import IconCheckCircleOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckCircleOutlinedFilled' +import IconSaveOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSaveOutlinedFilled' import { action } from '@storybook/addon-actions' import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' import { useForm } from 'react-hook-form' import { - InternationalizationMessages, - Theme, + InternationalizationMessages, + Theme, } from '../../../.storybook/components' import { SubmitButton } from '../button/SubmitButton' import { Form } from './Form' @@ -46,8 +46,8 @@ export const Template = ({ children, ...args }) => ( options: ['None', 'CheckCircle', 'Save'], mapping: { None: null, - CheckCircle: IconCheckCircle, - Save: IconSave, + CheckCircle: IconCheckCircleOutlinedFilled, + Save: IconSaveOutlinedFilled, }, control: { type: 'select' }, }, diff --git a/src/components/react-hook-form/FormSubmitFeedback.tsx b/src/components/react-hook-form/FormSubmitFeedback.tsx index 43384ebf..2464d66b 100644 --- a/src/components/react-hook-form/FormSubmitFeedback.tsx +++ b/src/components/react-hook-form/FormSubmitFeedback.tsx @@ -1,4 +1,4 @@ -import IconCheckCircle from '@aboutbits/react-material-icons/dist/IconCheckCircle' +import IconCheckCircleOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckCircleOutlinedFilled' import classNames from 'classnames' import { ComponentType, ReactElement, ReactNode } from 'react' import { useInternationalization, useTheme } from '../../framework' @@ -14,7 +14,7 @@ export type FormSubmitFeedbackProps = { export function FormSubmitFeedback({ savedMessage, - icon: Icon = IconCheckCircle, + icon: Icon = IconCheckCircleOutlinedFilled, successDelay, className, }: FormSubmitFeedbackProps): ReactElement | null { diff --git a/src/components/react-hook-form/InputFormField.stories.tsx b/src/components/react-hook-form/InputFormField.stories.tsx index 675ce44c..7934c6a1 100644 --- a/src/components/react-hook-form/InputFormField.stories.tsx +++ b/src/components/react-hook-form/InputFormField.stories.tsx @@ -1,5 +1,5 @@ -import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' -import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' +import IconBadgeOutlinedFilled from '@aboutbits/react-material-icons/dist/IconBadgeOutlinedFilled' +import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled' import { zodResolver } from '@hookform/resolvers/zod' import { action } from '@storybook/addon-actions' import { @@ -20,8 +20,8 @@ const icons = { options: ['None', 'Badge', 'Search'], mapping: { None: undefined, - Badge: IconBadge, - Search: IconSearch, + Badge: IconBadgeOutlinedFilled, + Search: IconSearchOutlinedFilled, }, } diff --git a/src/components/react-hook-form/NumberFormField.stories.tsx b/src/components/react-hook-form/NumberFormField.stories.tsx index 1e571c45..164dda4c 100644 --- a/src/components/react-hook-form/NumberFormField.stories.tsx +++ b/src/components/react-hook-form/NumberFormField.stories.tsx @@ -1,5 +1,5 @@ -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' -import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' +import IconInfoOutlinedFilled from '@aboutbits/react-material-icons/dist/IconInfoOutlinedFilled' +import IconWarningOutlinedFilled from '@aboutbits/react-material-icons/dist/IconWarningOutlinedFilled' import { zodResolver } from '@hookform/resolvers/zod' import { action } from '@storybook/addon-actions' import { @@ -20,8 +20,8 @@ const icons = { options: ['None', 'Warning', 'Info'], mapping: { None: undefined, - Warning: IconWarning, - Info: IconInfo, + Warning: IconWarningOutlinedFilled, + Info: IconInfoOutlinedFilled, }, } diff --git a/src/components/react-hook-form/SearchFormField.tsx b/src/components/react-hook-form/SearchFormField.tsx index c0420c99..3ec1693e 100644 --- a/src/components/react-hook-form/SearchFormField.tsx +++ b/src/components/react-hook-form/SearchFormField.tsx @@ -1,4 +1,4 @@ -import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' +import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled' import { ForwardedRef, forwardRef } from 'react' import { FieldPath, FieldValues } from 'react-hook-form' import { useInternationalization } from '../../framework' @@ -30,7 +30,7 @@ export const SearchFormField = forwardRef(function SearchFormField< name={name} ref={ref} placeholder={messages['search.placeholder']} - iconStart={IconSearch} + iconStart={IconSearchOutlinedFilled} {...props} /> ) diff --git a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx index 8330199b..130bafc0 100644 --- a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx +++ b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx @@ -1,5 +1,5 @@ import { IndexType } from '@aboutbits/pagination' -import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' +import IconSearchOutlinedFilled from '@aboutbits/react-material-icons/dist/IconSearchOutlinedFilled' import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/routers/inMemory' import { AsyncView } from '@aboutbits/react-toolbox' import { ReactElement, ReactNode } from 'react' @@ -162,7 +162,7 @@ export function SelectItemDialogSearch({ diff --git a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx index 0def1c95..f196cd5f 100644 --- a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx +++ b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx @@ -1,5 +1,5 @@ -import IconClose from '@aboutbits/react-material-icons/dist/IconClose' -import IconKeyboardArrowDown from '@aboutbits/react-material-icons/dist/IconKeyboardArrowDown' +import IconCloseOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCloseOutlinedFilled' +import IconKeyboardArrowDownOutlinedFilled from '@aboutbits/react-material-icons/dist/IconKeyboardArrowDownOutlinedFilled' import classNames from 'classnames' import { ReactNode, useMemo, useRef } from 'react' import { useInternationalization, useTheme } from '../../../framework' @@ -98,7 +98,7 @@ export function SelectItemFormFieldInput< {placeholder} - - ): ReactElement { return } export function SectionContentEmpty({ - icon: Icon = IconList, + icon: Icon = IconListOutlinedFilled, ...props }: Omit): ReactElement { return diff --git a/src/components/section/Section/SectionContentMessage.stories.mdx b/src/components/section/Section/SectionContentMessage.stories.mdx index 4b92a168..ae2e0c21 100644 --- a/src/components/section/Section/SectionContentMessage.stories.mdx +++ b/src/components/section/Section/SectionContentMessage.stories.mdx @@ -1,11 +1,11 @@ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import IconList from '@aboutbits/react-material-icons/dist/IconList' +import IconListOutlinedFilled from '@aboutbits/react-material-icons/dist/IconListOutlinedFilled' import { Theme } from '../../../../.storybook/components' import { Tone } from '../../types' import { SectionContentMessage } from './SectionContentMessage' import { - SectionContentEmpty, - SectionContentError, + SectionContentEmpty, + SectionContentError, } from './ConvenientSectionContentMessage' options: ['None', 'List'], mapping: { None: undefined, - List: IconList, + List: IconListOutlinedFilled, }, control: { type: 'select' }, }, diff --git a/src/components/section/SectionItem/SectionListItem.tsx b/src/components/section/SectionItem/SectionListItem.tsx index cbc46311..836ffb1f 100644 --- a/src/components/section/SectionItem/SectionListItem.tsx +++ b/src/components/section/SectionItem/SectionListItem.tsx @@ -1,4 +1,4 @@ -import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight' +import IconKeyboardArrowRightOutlinedFilled from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRightOutlinedFilled' import classNames from 'classnames' import { ReactNode, forwardRef } from 'react' import { @@ -26,7 +26,7 @@ function SectionListItemIcon() { const { section } = useTheme() return ( - ( name="Default" args={{ children: 'Jane Doe', - action: , + action: , }} argTypes={{ action: { control: false }, @@ -55,7 +55,7 @@ export const Template = ({ children, action }) => ( args={{ children: 'This list item has a very long text. The text should wrap, there should be a space between text and action. And the action should not shrink.', - action: , + action: , }} > {Template.bind({})} @@ -71,21 +71,21 @@ export const Template = ({ children, action }) => ( + } > Jane Doe + } > John Doe + } > Mary Doe diff --git a/src/examples/Form.stories.tsx b/src/examples/Form.stories.tsx index b4a24166..faf51abd 100644 --- a/src/examples/Form.stories.tsx +++ b/src/examples/Form.stories.tsx @@ -1,5 +1,5 @@ import { IndexType } from '@aboutbits/pagination' -import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck' +import IconCheckOutlinedFilled from '@aboutbits/react-material-icons/dist/IconCheckOutlinedFilled' import { zodResolver } from '@hookform/resolvers/zod' import { action } from '@storybook/addon-actions' import { Markdown, Primary, Title } from '@storybook/addon-docs' @@ -362,7 +362,7 @@ export const UserEdit: Story = () => { {showSuccess && ( Submitted! diff --git a/src/examples/List.stories.tsx b/src/examples/List.stories.tsx index 75e96522..4a3124a9 100644 --- a/src/examples/List.stories.tsx +++ b/src/examples/List.stories.tsx @@ -1,5 +1,5 @@ import { IndexType } from '@aboutbits/pagination' -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' +import IconAddOutlinedFilled from '@aboutbits/react-material-icons/dist/IconAddOutlinedFilled' import { useMatchMediaQuery } from '@aboutbits/react-toolbox' import { action } from '@storybook/addon-actions' import { Markdown } from '@storybook/addon-docs' @@ -166,7 +166,7 @@ export const ListWithFilter: Story = () => { List of users