diff --git a/src/components/buttons/BackToButton/types.ts b/src/components/buttons/BackToButton/types.ts index 79a922cf..1fdd7473 100644 --- a/src/components/buttons/BackToButton/types.ts +++ b/src/components/buttons/BackToButton/types.ts @@ -4,7 +4,7 @@ import { NavigateOptions } from 'react-router' import { IconButtonProps } from '../IconButton/types' -export interface BackToButtonProps extends IconButtonProps { +export interface BackToButtonProps extends Omit { /** * Path where browser will be directed to when the button is clicked. */ diff --git a/src/components/buttons/UploadButton/types.ts b/src/components/buttons/UploadButton/types.ts index e63e2094..4913288f 100644 --- a/src/components/buttons/UploadButton/types.ts +++ b/src/components/buttons/UploadButton/types.ts @@ -4,7 +4,7 @@ import { IconButtonProps } from '../IconButton/types' import { SvgIconComponent } from '@mui/icons-material' import { F } from 'ts-toolbelt' -export interface UploadButtonProps extends IconButtonProps { +export interface UploadButtonProps extends Omit { /** * @default BackupIcon * The Icon to display. diff --git a/src/components/feedback/Toast/ToastContainer.tsx b/src/components/feedback/Toast/ToastContainer.tsx index da5de3c8..d3417ae5 100644 --- a/src/components/feedback/Toast/ToastContainer.tsx +++ b/src/components/feedback/Toast/ToastContainer.tsx @@ -39,14 +39,6 @@ const ToastContainer: React.FC = ({ } ToastContainer.propTypes = { - /** - * Set the delay in ms to close the toast automatically. - * Use `false` to prevent the toast from closing. - * @default false - */ - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - autoClose: PropTypes.oneOf([PropTypes.number, false]), /** * Limit the number of toast displayed at the same time * @default 5 diff --git a/src/components/feedback/Toast/useToast.tsx b/src/components/feedback/Toast/useToast.tsx index a4065e36..15bd1ba4 100644 --- a/src/components/feedback/Toast/useToast.tsx +++ b/src/components/feedback/Toast/useToast.tsx @@ -25,7 +25,6 @@ const useToast = () => { [classes[variant]]: variant, [classes['default']]: true }) - const options: ToastOptionsBase = { ...restOptions, transition: getTransitionType(transitionType), diff --git a/src/stories/feedback/Toast/TextSizePreview.tsx b/src/stories/feedback/Toast/TextSizePreview.tsx new file mode 100644 index 00000000..b6c457b5 --- /dev/null +++ b/src/stories/feedback/Toast/TextSizePreview.tsx @@ -0,0 +1,29 @@ +// Copyright (c) TotalSoft. +// This source code is licensed under the MIT license. + +import React from 'react' +import { Button, ToastContainer, useToast } from 'components' +import Grid from '@mui/material/Grid2' + +const TextSizePreview = (args: any) => { + const addToast = useToast() + + return ( + + + + + ) +} + +export default TextSizePreview diff --git a/src/stories/feedback/Toast/Toast.stories.tsx b/src/stories/feedback/Toast/Toast.stories.tsx index f7849090..4c0286c7 100644 --- a/src/stories/feedback/Toast/Toast.stories.tsx +++ b/src/stories/feedback/Toast/Toast.stories.tsx @@ -8,6 +8,7 @@ import VariantsPreview from './VariantsPreview' import PositionsPreview from './PositionsPreview' import TransitionsPreview from './TransitionsPreview' import ActionsPreview from './ActionsPreview' +import TextSizePreview from './TextSizePreview' const meta: Meta = { title: 'Components/Feedback/Toast', @@ -113,7 +114,7 @@ export const Variants: Story = { } } }, - render: args => + render: args => } /** * Different positions are available for rendering toast. @@ -188,7 +189,7 @@ export const Positions: Story = { } } }, - render: args => + render: args => } /** @@ -290,3 +291,34 @@ export const Actions: Story = { }, render: args => } + +/** + * You can change the content font size by changing the ToastContainer textSize parameter of the application + * Available options are: + * - small + * - medium + * - large + * Default is set to 'small'. + */ +export const TextSize: Story = { + parameters: { + docs: { + source: { + code: ` + `, + format: true + } + } + }, + render: args => +} diff --git a/src/stories/surfaces/Accordion/Accordion.stories.tsx b/src/stories/surfaces/Accordion/Accordion.stories.tsx index 9bd1f227..1398e78e 100644 --- a/src/stories/surfaces/Accordion/Accordion.stories.tsx +++ b/src/stories/surfaces/Accordion/Accordion.stories.tsx @@ -136,7 +136,6 @@ export const Actions: Story = { options={options} value={value} onChange={handleChange} - stopEventPropagation /> diff --git a/src/stories/surfaces/Accordion/ActionsPreview.tsx b/src/stories/surfaces/Accordion/ActionsPreview.tsx index 1f14f5b2..b4681e8c 100644 --- a/src/stories/surfaces/Accordion/ActionsPreview.tsx +++ b/src/stories/surfaces/Accordion/ActionsPreview.tsx @@ -32,7 +32,6 @@ const ActionsPreview = () => { options={options} value={value} onChange={handleChange} - stopEventPropagation isClearable /> {`Selected value: ${JSON.stringify(value)}`} diff --git a/src/stories/surfaces/Card/Card.stories.tsx b/src/stories/surfaces/Card/Card.stories.tsx index 5ee0a698..8b5dcbc3 100644 --- a/src/stories/surfaces/Card/Card.stories.tsx +++ b/src/stories/surfaces/Card/Card.stories.tsx @@ -46,7 +46,6 @@ const actions = ( */ export const Card: Story = { args: { title, subheader, children, icon: People, footer, actions }, - parameters: { docs: { source: { diff --git a/src/stories/surfaces/CollapseCard/CollapseCard.stories.tsx b/src/stories/surfaces/CollapseCard/CollapseCard.stories.tsx index fbb4727a..a0d8cab4 100644 --- a/src/stories/surfaces/CollapseCard/CollapseCard.stories.tsx +++ b/src/stories/surfaces/CollapseCard/CollapseCard.stories.tsx @@ -142,7 +142,7 @@ export const Filled: Story = { } } }, - render: () => + render: args => } /** @@ -178,7 +178,7 @@ export const Controlled: Story = { } } }, - render: () => + render: args => } /** diff --git a/src/stories/surfaces/CollapseCard/ControlledPreview.tsx b/src/stories/surfaces/CollapseCard/ControlledPreview.tsx index b7ee1363..0c02d631 100644 --- a/src/stories/surfaces/CollapseCard/ControlledPreview.tsx +++ b/src/stories/surfaces/CollapseCard/ControlledPreview.tsx @@ -33,7 +33,7 @@ const uncontrolled = ` } ` -const ControlledPreview = () => { +const ControlledPreview = (args: any) => { const [expanded, setExpanded] = useState(false) const handleToggle = useCallback(() => setExpanded(current => !current), []) @@ -55,6 +55,7 @@ const ControlledPreview = () => { } + {...args} /> diff --git a/src/stories/surfaces/CollapseCard/FilledPreview.tsx b/src/stories/surfaces/CollapseCard/FilledPreview.tsx index 6c3ce7be..9c0a6e27 100644 --- a/src/stories/surfaces/CollapseCard/FilledPreview.tsx +++ b/src/stories/surfaces/CollapseCard/FilledPreview.tsx @@ -3,7 +3,7 @@ import { Button, IconButton, Typography, CollapseCard } from 'components' import QuestionMark from '@mui/icons-material/QuestionMark' import { Grid2 as Grid, TextField } from '@mui/material' -const FilledPreview = () => { +const FilledPreview = (args: any) => { return ( { } + {...args} > diff --git a/src/stories/surfaces/StatsCard/StatsCard.stories.tsx b/src/stories/surfaces/StatsCard/StatsCard.stories.tsx index 936a63cd..86d80bad 100644 --- a/src/stories/surfaces/StatsCard/StatsCard.stories.tsx +++ b/src/stories/surfaces/StatsCard/StatsCard.stories.tsx @@ -57,6 +57,7 @@ export const Default: Story = { * Stats Card component allows displaying any type of data, string, numeric, React Node, etc. */ export const VariousContents: Story = { + args: { icon, title, footer }, parameters: { controls: { hideNoControlsWarning: true }, docs: { @@ -86,11 +87,11 @@ export const VariousContents: Story = { } } }, - render: () => ( + render: args => ( <> - +