From c9acd9616715699e97a424f5c4417af9e75882ad Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Tue, 29 Aug 2023 16:31:58 +0300 Subject: [PATCH 01/10] Trying to add back Tile --- packages/itwinui-react/src/core/Tile/Tile.tsx | 208 +++++++++++++++++- 1 file changed, 202 insertions(+), 6 deletions(-) diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx index 6cca0d7da9a..59d51ede3ad 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.tsx @@ -66,7 +66,7 @@ TileContext.displayName = 'TileContext'; // ---------------------------------------------------------------------------- // Main Tile component -type TileOwnProps = { +type TileWrapperOwnProps = { /** * Status of the tile. */ @@ -101,7 +101,7 @@ type TileOwnProps = { isDisabled?: boolean; }; -const TileComponent = React.forwardRef((props, forwardedRef) => { +const TileWrapper = React.forwardRef((props, forwardedRef) => { const { className, status, @@ -147,8 +147,8 @@ const TileComponent = React.forwardRef((props, forwardedRef) => { /> ); -}) as PolymorphicForwardRefComponent<'div', TileOwnProps>; -TileComponent.displayName = 'Tile'; +}) as PolymorphicForwardRefComponent<'div', TileWrapperOwnProps>; +TileWrapper.displayName = 'Tile.Wrapper'; // ---------------------------------------------------------------------------- // Tile.Action component @@ -397,10 +397,187 @@ TileMoreOptions.displayName = 'Tile.MoreOptions'; const TileButtons = polymorphic('iui-tile-buttons'); TileButtons.displayName = 'Tile.Buttons'; +// ---------------------------------------------------------------------------- +type TileOwnProps = { + /** + * Name or title of the tile. + */ + name: React.ReactNode; + /** + * Description text of the tile. + * Gets truncated if it can't fit in the tile. + */ + description?: React.ReactNode; + /** + * Metadata section located below description. + * @example + * 2021-01-01, 04:30 AM} + * // or + * metadata={<> + * + * Tag 1Tag 2 + * } + * /> + */ + metadata?: React.ReactNode; + /** + * Thumbnail image url, a custom component or an svg. + * @example + * } />} + * // or + * thumbnail={} + * /> + */ + thumbnail?: string | React.ReactNode; + /** + * `Badge` shown on the bottom right of thumbnail. + */ + badge?: React.ReactNode; + /** + * Icon shown on top left of the tile. Also known as "type indicator". + * Recommended to use an invisible `IconButton`. + */ + leftIcon?: React.ReactNode; + /** + * Icon shown on top right of the tile. Also known as "quick action". + * Recommended to use an invisible `IconButton`. + */ + rightIcon?: React.ReactNode; + /** + * Upto two buttons shown at the bottom of the tile. + */ + buttons?: [React.ReactNode?, React.ReactNode?]; + /** + * Dropdown menu containing `MenuItem`s. + */ + moreOptions?: React.ReactNode[]; + /** + * Status of the tile. + */ + status?: 'positive' | 'warning' | 'negative'; + /** + * Whether the tile is selected or in "active" state. + * Gets highlighted and shows a checkmark icon near tile name. + */ + isSelected?: boolean; + /** + * Whether the tile is "new". Tile name becomes bold and gets a new status icon. + */ + isNew?: boolean; + /** + * Default tile variant or the folder layout. + * @default 'default' + */ + variant?: 'default' | 'folder'; + /** + * Any custom nodes that will be appended to the tile's main content. + */ + children?: React.ReactNode; + /** + * Whether the tile is expected to be interactable (i.e. `onClick`). + * It becomes focusable and gets on hover styling. + */ + isActionable?: boolean; + /** + * Display a loading state. + * @default false + */ + isLoading?: boolean; + /** + * Flag whether the tile is disabled. + * + * Note: This only affects the tile. You need to manually disable + * the buttons and other interactive elements inside the tile. + * + * @default false + */ + isDisabled?: boolean; + onClick?: React.MouseEventHandler; +}; + +const TileComponent = React.forwardRef((props, forwardedRef) => { + const { + name, + description, + status, + isNew, + isLoading, + isSelected, + thumbnail, + badge, + leftIcon, + rightIcon, + buttons, + metadata, + moreOptions, + children, + isActionable, + isDisabled, + onClick, + ...rest + } = props; + return ( + + + {(status || isNew || isLoading || isSelected) && } + + {isActionable ? ( + + {name} + + ) : ( + name + )} + + + + + {typeof thumbnail !== 'string' ? ( + {thumbnail} + ) : ( + + )} + {badge && {badge}} + {rightIcon && {rightIcon}} + {leftIcon && {leftIcon}} + + + + {description && {description}} + {moreOptions && {moreOptions}} + {metadata && {metadata}} + {children} + + + {buttons && {buttons}} + + ); +}) as PolymorphicForwardRefComponent<'div', TileOwnProps>; +TileComponent.displayName = 'Tile'; + /** * Tile with customizable Thumbnail, Name, Content and Buttons subcomponents * @example - * + * * * * @@ -417,9 +594,28 @@ TileButtons.displayName = 'Tile.Buttons'; * * * - * + * + * + * @example + * Tag 1} + * thumbnail='/url/to/image.jpg' + * badge={Badge label} + * buttons={[, ]} + * moreOptions={[Item 1, Item 2]} + * leftIcon={} + * rightIcon={} + * isSelected={true} + * isNew={false} + * /> */ export const Tile = Object.assign(TileComponent, { + /** + * + */ + Wrapper: TileWrapper, /** * ThumbnailArea subcomponent that contains `ThumbnailPicture`, `QuickAction`, `TypeIndicator` or `BadgeContainer` * @example From 49790b6146ea55bbfe3e58186c58a7fc1740a065 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Tue, 29 Aug 2023 16:37:45 +0300 Subject: [PATCH 02/10] Fix examples --- examples/Tile.actionable.tsx | 4 ++-- examples/Tile.disabled.tsx | 4 ++-- examples/Tile.loading.tsx | 4 ++-- examples/Tile.status.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/Tile.actionable.tsx b/examples/Tile.actionable.tsx index 7b3dd6603e6..73cbb8060ab 100644 --- a/examples/Tile.actionable.tsx +++ b/examples/Tile.actionable.tsx @@ -9,7 +9,7 @@ import { SvgTag } from '@itwin/itwinui-icons-react'; export default () => { const [selected, setSelected] = React.useState(true); return ( - + @@ -36,6 +36,6 @@ export default () => { - + ); }; diff --git a/examples/Tile.disabled.tsx b/examples/Tile.disabled.tsx index a15d1ce95d1..3c3156da6a2 100644 --- a/examples/Tile.disabled.tsx +++ b/examples/Tile.disabled.tsx @@ -8,7 +8,7 @@ import { SvgImodelHollow } from '@itwin/itwinui-icons-react'; export default () => { return ( - + @@ -31,6 +31,6 @@ export default () => { - + ); }; diff --git a/examples/Tile.loading.tsx b/examples/Tile.loading.tsx index 42469baca8f..4929a389a32 100644 --- a/examples/Tile.loading.tsx +++ b/examples/Tile.loading.tsx @@ -8,7 +8,7 @@ import { SvgImodelHollow } from '@itwin/itwinui-icons-react'; export default () => { return ( - + @@ -25,6 +25,6 @@ export default () => { Loading tile - + ); }; diff --git a/examples/Tile.status.tsx b/examples/Tile.status.tsx index 21f2c6b01aa..0622437087a 100644 --- a/examples/Tile.status.tsx +++ b/examples/Tile.status.tsx @@ -8,7 +8,7 @@ import { SvgImodelHollow } from '@itwin/itwinui-icons-react'; export default () => { return ( - + @@ -25,6 +25,6 @@ export default () => { Tile with status - + ); }; From 5e4346fbf831468d98c1ccfbbb855cf2876e8cf0 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Tue, 29 Aug 2023 16:37:55 +0300 Subject: [PATCH 03/10] Rename props --- packages/itwinui-react/src/core/Tile/Tile.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx index 59d51ede3ad..18a37447e39 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.tsx @@ -398,7 +398,7 @@ const TileButtons = polymorphic('iui-tile-buttons'); TileButtons.displayName = 'Tile.Buttons'; // ---------------------------------------------------------------------------- -type TileOwnProps = { +type TileLegacyProps = { /** * Name or title of the tile. */ @@ -571,7 +571,7 @@ const TileComponent = React.forwardRef((props, forwardedRef) => { {buttons && {buttons}} ); -}) as PolymorphicForwardRefComponent<'div', TileOwnProps>; +}) as PolymorphicForwardRefComponent<'div', TileLegacyProps>; TileComponent.displayName = 'Tile'; /** From cac5e6b69e465b91cee65ddfe73e9f63f7c5aaf2 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Tue, 29 Aug 2023 16:58:17 +0300 Subject: [PATCH 04/10] Tests fix --- .../itwinui-react/src/core/Tile/Tile.test.tsx | 144 +++++++++++++----- packages/itwinui-react/src/core/Tile/Tile.tsx | 4 +- 2 files changed, 112 insertions(+), 36 deletions(-) diff --git a/packages/itwinui-react/src/core/Tile/Tile.test.tsx b/packages/itwinui-react/src/core/Tile/Tile.test.tsx index af446694d9a..2c8e5997df5 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.test.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.test.tsx @@ -3,7 +3,7 @@ * See LICENSE.md in the project root for license terms and full copyright notice. *--------------------------------------------------------------------------------------------*/ import * as React from 'react'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { Tile } from './Tile.js'; import { Badge } from '../Badge/index.js'; @@ -14,10 +14,10 @@ import userEvent from '@testing-library/user-event'; it('should render in its most basic state', () => { const { container } = render( - + - , + , ); expect(container.querySelector('.iui-tile')).toBeTruthy(); @@ -30,23 +30,23 @@ it('should render in its most basic state', () => { it('should render new and selected states', () => { const { container } = render( - + - , + , ); expect(container.querySelector('.iui-tile.iui-selected')).toBeTruthy(); const { container: container2 } = render( - + - , + , ); expect(container2.querySelector('.iui-tile.iui-new')).toBeTruthy(); }); it('should render main text content correctly', () => { const { container } = render( - + @@ -58,7 +58,7 @@ it('should render main text content correctly', () => { test-description test-metadata - , + , ); expect(container.querySelector('.iui-tile')).toBeTruthy(); @@ -81,12 +81,12 @@ it('should render main text content correctly', () => { it('should render thumbnail correctly (url)', () => { const { container } = render( - + - , + , ); expect(container.querySelector('.iui-tile-thumbnail')).toBeTruthy(); const picture = container.querySelector( @@ -98,14 +98,14 @@ it('should render thumbnail correctly (url)', () => { it('should render thumbnail correctly ()', () => { const { container } = render( - + - , + , ); expect(container.querySelector('.iui-tile-thumbnail')).toBeTruthy(); const img = container.querySelector('.iui-thumbnail-icon') @@ -116,14 +116,14 @@ it('should render thumbnail correctly ()', () => { it('should render thumbnail correctly (svg)', () => { const { container } = render( - + - , + , ); const { container: placeholderIcon } = render(); expect(container.querySelector('.iui-tile-thumbnail svg')).toBeTruthy(); @@ -136,7 +136,7 @@ it('should work with buttons correctly', () => { const onClickMock = jest.fn(); const { container, getByText } = render( - + @@ -151,7 +151,7 @@ it('should work with buttons correctly', () => { test-button 2 - , + , ); expect(container.querySelector('.iui-tile')).toBeTruthy(); expect(container.querySelector('.iui-tile-buttons')).toBeTruthy(); @@ -171,7 +171,7 @@ it('should work with icons correctly', () => { const onClickMock = jest.fn(); const { container } = render( - + @@ -188,7 +188,7 @@ it('should work with icons correctly', () => { - , + , ); expect(container.querySelector('.iui-tile')).toBeTruthy(); @@ -208,7 +208,7 @@ it('should work with icons correctly', () => { it('should render options dropdown correctly', async () => { const onClickMock = jest.fn(); const { container } = render( - + @@ -223,7 +223,7 @@ it('should render options dropdown correctly', async () => { Item 1 - , + , ); expect(container.querySelector('.iui-tile')).toBeTruthy(); @@ -247,7 +247,7 @@ it('should render options dropdown correctly', async () => { it('should propagate misc props correctly', () => { const { container } = render( - + @@ -257,7 +257,7 @@ it('should propagate misc props correctly', () => { test-content - , + , ); const tile = container.querySelector('.iui-tile.test-class') as HTMLElement; @@ -273,45 +273,121 @@ it('should propagate misc props correctly', () => { it('should render actionable tile', () => { const { container } = render( - + test-name - , + , ); expect(container.querySelector('.iui-tile.iui-actionable')).toBeTruthy(); }); it.each(['positive', 'warning', 'negative'] as const)( - 'should render tile with %s status', + 'should render Tile with %s status', (status) => { const { container } = render( - + - , + , ); expect(container.querySelector(`.iui-tile.iui-${status}`)).toBeTruthy(); }, ); -it('should render tile with loading status', () => { +it('should render Tile with loading status', () => { const { container } = render( - + - , + , ); expect(container.querySelector(`.iui-tile.iui-loading`)).toBeTruthy(); }); -it('should render tile with disabled status', () => { +it('should render Tile with disabled status', () => { const { container } = render( - + - , + , ); const tile = container.querySelector(`.iui-tile`) as HTMLElement; expect(tile).toBeTruthy(); expect(tile).toHaveAttribute('aria-disabled', 'true'); }); + +it('should support Tile with legacy props', () => { + render( + Badge label} + buttons={[ + , + , + ]} + moreOptions={[ + Item 1, + Item 2, + ]} + leftIcon={ + + + + } + rightIcon={ + + + + } + isSelected={true} + isNew={false} + />, + ); + + render( + + + + Tile name + + + + + Badge label + + + + + + + + + + + + + + + Tile description that takes upto 3 lines + + + Item 1 + Item 2 + + basic metadata + + + + + + , + ); + + expect(screen.getByTestId('1').innerHTML).toEqual( + screen.getByTestId('2').innerHTML, + ); +}); diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx index 18a37447e39..dc13954055d 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.tsx @@ -557,8 +557,8 @@ const TileComponent = React.forwardRef((props, forwardedRef) => { )} {badge && {badge}} - {rightIcon && {rightIcon}} {leftIcon && {leftIcon}} + {rightIcon && {rightIcon}} @@ -587,7 +587,7 @@ TileComponent.displayName = 'Tile'; * * * - * + * * * * From 2a401d3be62cb9f762d3e3c7be9f09c6f81e453f Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Tue, 29 Aug 2023 17:05:38 +0300 Subject: [PATCH 05/10] Type fix? --- packages/itwinui-react/src/core/Tile/Tile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx index dc13954055d..37b0e9eab31 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.tsx @@ -344,7 +344,7 @@ TileMetadata.displayName = 'Tile.Metadata'; // Tile.MoreOptions component type TileMoreOptionsOwnProps = { buttonProps?: React.ComponentPropsWithoutRef; - children?: React.ReactElement[]; + children?: React.ReactNode[]; }; const TileMoreOptions = React.forwardRef((props, forwardedRef) => { From 923a276a61cc04fb0e40642ed95582fe5bef3a8c Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Tue, 29 Aug 2023 17:29:38 +0300 Subject: [PATCH 06/10] Update changeset --- .changeset/polite-walls-rush.md | 4 ++-- packages/itwinui-react/src/core/Tile/Tile.tsx | 2 -- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/.changeset/polite-walls-rush.md b/.changeset/polite-walls-rush.md index 0f7a22729f3..d8d66397c29 100644 --- a/.changeset/polite-walls-rush.md +++ b/.changeset/polite-walls-rush.md @@ -2,6 +2,6 @@ '@itwin/itwinui-react': major --- -Updated Tile component to be composition of customizable subcomponents: , , , , , , , , , , , , +Updated Tile component to allow composition of customizable subcomponents: , , , , , , , , , , , , , -Certain props have been removed as they are now subcomponents: `name`, `description`, `metadata`, `thumbnail`, `badge`, `leftIcon`, `rightIcon`, `button`, `moreOptions`, `isActionable` props have been removed. + used in a must be replaced with . diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx index 37b0e9eab31..b138bbb349a 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.tsx @@ -621,8 +621,6 @@ export const Tile = Object.assign(TileComponent, { * @example * * - * // or - * * * * From 913d854e3790295b6e72fd92be6549c59f6b4c6a Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Wed, 30 Aug 2023 16:46:01 +0300 Subject: [PATCH 07/10] jsdocs --- packages/itwinui-react/src/core/Tile/Tile.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx index b138bbb349a..3d180907daa 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.tsx @@ -500,6 +500,9 @@ type TileLegacyProps = { * @default false */ isDisabled?: boolean; + /** + * Adds onClick to the TileAction component. + */ onClick?: React.MouseEventHandler; }; @@ -613,7 +616,7 @@ TileComponent.displayName = 'Tile'; */ export const Tile = Object.assign(TileComponent, { /** - * + * Wrapper subcomponent for fully customisable Tile. */ Wrapper: TileWrapper, /** From 993270ff7514c2865d1dd44069bd583a3043eb02 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Wed, 30 Aug 2023 16:59:21 +0300 Subject: [PATCH 08/10] Added size small to iconButton --- packages/itwinui-react/src/core/Tile/Tile.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/itwinui-react/src/core/Tile/Tile.test.tsx b/packages/itwinui-react/src/core/Tile/Tile.test.tsx index 2c8e5997df5..fea5145ccc8 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.test.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.test.tsx @@ -334,14 +334,14 @@ it('should support Tile with legacy props', () => { Item 2, ]} leftIcon={ - + - + } rightIcon={ - + - + } isSelected={true} isNew={false} From d6fd2d53560d75aa42550c260ebd1720563700c3 Mon Sep 17 00:00:00 2001 From: Greta <83585998+gretanausedaite@users.noreply.github.com> Date: Wed, 30 Aug 2023 17:34:53 +0300 Subject: [PATCH 09/10] oopsie --- packages/itwinui-react/src/core/Tile/Tile.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/itwinui-react/src/core/Tile/Tile.test.tsx b/packages/itwinui-react/src/core/Tile/Tile.test.tsx index fea5145ccc8..fba5b710602 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.test.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.test.tsx @@ -334,12 +334,12 @@ it('should support Tile with legacy props', () => { Item 2, ]} leftIcon={ - + } rightIcon={ - + } From a85e5ab81d8babc4bd09e02bbe00b3cea1693e02 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Wed, 30 Aug 2023 11:16:41 -0400 Subject: [PATCH 10/10] update missed references --- apps/storybook/src/Tile.stories.tsx | 40 +++++++++---------- examples/Tile.anchorlink.tsx | 4 +- examples/Tile.avatar.tsx | 4 +- examples/Tile.condensed.tsx | 4 +- examples/Tile.folder.tsx | 4 +- examples/Tile.main.tsx | 4 +- packages/itwinui-react/src/core/Tile/Tile.tsx | 18 ++++----- 7 files changed, 39 insertions(+), 39 deletions(-) diff --git a/apps/storybook/src/Tile.stories.tsx b/apps/storybook/src/Tile.stories.tsx index c163cacb5ca..d13fb50340e 100644 --- a/apps/storybook/src/Tile.stories.tsx +++ b/apps/storybook/src/Tile.stories.tsx @@ -42,7 +42,7 @@ export default { export const Basic: Story = (args) => { return ( - + @@ -71,13 +71,13 @@ export const Basic: Story = (args) => { - + ); }; export const AllProps: Story = (args) => { return ( - + Stadium @@ -127,7 +127,7 @@ export const AllProps: Story = (args) => { Projects - + ); }; AllProps.argTypes = { @@ -142,7 +142,7 @@ AllProps.args = { export const Actionable: Story = (args) => { const [selected, setSelected] = React.useState(false); return ( - + @@ -169,7 +169,7 @@ export const Actionable: Story = (args) => { - + ); }; Actionable.argTypes = { ...Basic.argTypes }; @@ -179,7 +179,7 @@ Actionable.args = { export const AnchorLink: Story = (args) => { return ( - + @@ -206,7 +206,7 @@ export const AnchorLink: Story = (args) => { - + ); }; AnchorLink.argTypes = { ...Basic.argTypes }; @@ -216,7 +216,7 @@ AnchorLink.args = { export const Condensed: Story = (args) => { return ( - + Condensed @@ -236,7 +236,7 @@ export const Condensed: Story = (args) => { - + ); }; Condensed.argTypes = { @@ -248,7 +248,7 @@ Condensed.args = { export const WithAvatar: Story = (args) => { return ( - + Some User @@ -281,7 +281,7 @@ export const WithAvatar: Story = (args) => { - + ); }; WithAvatar.argTypes = { @@ -293,7 +293,7 @@ WithAvatar.args = { export const Folder: Story = (args) => { return ( - + @@ -317,7 +317,7 @@ export const Folder: Story = (args) => { Folder metadata - + ); }; Folder.argTypes = { @@ -331,7 +331,7 @@ Folder.args = { export const Status: Story = (args) => { return ( - + Tile Name @@ -355,7 +355,7 @@ export const Status: Story = (args) => { Tile with status - + ); }; Status.argTypes = { @@ -369,7 +369,7 @@ Status.args = { export const Loading: Story = (args) => { return ( - + Tile Name @@ -393,7 +393,7 @@ export const Loading: Story = (args) => { Loading tile - + ); }; Loading.argTypes = { @@ -408,7 +408,7 @@ Loading.args = { export const Disabled: Story = (args) => { return ( - + Tile Name @@ -442,7 +442,7 @@ export const Disabled: Story = (args) => { - + ); }; Disabled.argTypes = { diff --git a/examples/Tile.anchorlink.tsx b/examples/Tile.anchorlink.tsx index acd9605b5d1..7e4d58983c9 100644 --- a/examples/Tile.anchorlink.tsx +++ b/examples/Tile.anchorlink.tsx @@ -8,7 +8,7 @@ import { SvgTag } from '@itwin/itwinui-icons-react'; export default () => { return ( - + @@ -34,6 +34,6 @@ export default () => { - + ); }; diff --git a/examples/Tile.avatar.tsx b/examples/Tile.avatar.tsx index 3996187eab0..23986ec9d0f 100644 --- a/examples/Tile.avatar.tsx +++ b/examples/Tile.avatar.tsx @@ -13,7 +13,7 @@ import { export default () => { return ( - + @@ -39,6 +39,6 @@ export default () => { Item 2 - + ); }; diff --git a/examples/Tile.condensed.tsx b/examples/Tile.condensed.tsx index 29886fb916d..52f32bd6933 100644 --- a/examples/Tile.condensed.tsx +++ b/examples/Tile.condensed.tsx @@ -8,7 +8,7 @@ import { SvgImodelHollow } from '@itwin/itwinui-icons-react'; export default () => { return ( - + @@ -21,6 +21,6 @@ export default () => { Item 2 - + ); }; diff --git a/examples/Tile.folder.tsx b/examples/Tile.folder.tsx index c3f66e759bc..901488b279a 100644 --- a/examples/Tile.folder.tsx +++ b/examples/Tile.folder.tsx @@ -8,7 +8,7 @@ import { SvgFolder } from '@itwin/itwinui-icons-react'; export default () => { return ( - + @@ -25,6 +25,6 @@ export default () => { Folder metadata - + ); }; diff --git a/examples/Tile.main.tsx b/examples/Tile.main.tsx index c207d893424..1c78e92d44b 100644 --- a/examples/Tile.main.tsx +++ b/examples/Tile.main.tsx @@ -8,7 +8,7 @@ import { SvgStar, SvgInfo } from '@itwin/itwinui-icons-react'; export default () => { return ( - + @@ -34,6 +34,6 @@ export default () => { - + ); }; diff --git a/packages/itwinui-react/src/core/Tile/Tile.tsx b/packages/itwinui-react/src/core/Tile/Tile.tsx index 3d180907daa..6ad9d67d7ff 100644 --- a/packages/itwinui-react/src/core/Tile/Tile.tsx +++ b/packages/itwinui-react/src/core/Tile/Tile.tsx @@ -633,14 +633,14 @@ export const Tile = Object.assign(TileComponent, { /** * Thumbnail image url, a custom component or an svg for thumbnail avatar. * @example - * + * * // ... * * * - * + * * or - * + * * // ... * * @@ -677,21 +677,21 @@ export const Tile = Object.assign(TileComponent, { /** * `NameIcon` next to name of the tile. Goes under * @example - * + * * * * - * + * */ NameIcon: TileNameIcon, /* * `NameLabel` of the tile * @example - * + * * * Tile Name * - * + * */ NameLabel: TileNameLabel, /** @@ -708,13 +708,13 @@ export const Tile = Object.assign(TileComponent, { /** * Tile content area that contains `Description`, `Metadata` and `MoreOptions` Tile subcomponents * @example - * + * * * * * * - * + * */ ContentArea: TileContentArea, /**