Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion docs/deprecation-migration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ The following section provides migration guidance for deprecated components that
- For `Hr`, [`Divider`](?path=/docs/divider--docs) is recommended as the preferred alternative.
- For `VerticalDivider`, [`Divider`](?path=/docs/divider--docs) is recommended as the preferred alternative.
- For `LoaderBar`, `LoaderStar` and `LoaderSpinner`: the new [`Loader`](?path=/docs/loader--docs) is recommended as the preferred alternative.
- For `TileSelect`, no like-for-like replacement has been validated. Do not reproduce its card-like selection treatment in new work; use the approved, product-specific Fusion pattern instead. Where the need is a conventional form choice, [`RadioButton`](?path=/docs/radio-button--docs) or [`Checkbox`](?path=/docs/checkbox--docs) may be appropriate, according to the selection semantics.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This section doesn't read well, tone it down to more simplistic language


## Alternative Patterns

Expand All @@ -40,6 +41,18 @@ The following sections provide migration guidance for deprecated components that
- [Setting sRow](#settings-row)
- [Hr](#hr)
- [VerticalDivider](#vertical-divider)
- [Tile Select](#tile-select)

## Tile Select

`TileSelect` and `TileSelectGroup` are deprecated. The components have low adoption, their two known product implementations do not use the pattern as intended, and the pattern has not shown a good UX fit. Their overlap with existing Fusion patterns also creates unnecessary duplication and confusion. Carbon Tile Select is primarily a radio-style control, while the potentially overlapping Fusion pattern is more checkbox-like; they are not interchangeable.

### Migration

- There is no prescribed like-for-like replacement. Assess the user need and use the approved product-specific Fusion pattern rather than carrying the Carbon pattern forward.
- If the need is a conventional form choice, use `RadioButtonGroup` and `RadioButton` for mutually exclusive choices, or `CheckboxGroup` and `Checkbox` for independent choices. This is semantic guidance, not a replacement for Tile Select's card-like treatment.
- Keep the existing Report implementation unchanged until its approved replacement is available. Do not introduce Tile Select into new Report work.
- Migrate Client Management as part of its planned redesign; the redesign should use the approved Fusion pattern rather than a like-for-like Tile Select replacement.

## Alert

Expand Down Expand Up @@ -187,4 +200,4 @@ The `Hr` component can be replaced by a `Divider` with type `horizontal`. The `D

The `VerticalDivider` component can be replaced by a `Divider`. The `Divider` component will provide consistent styling while maintaining the same functionality.

<Canvas of={DeprecationMigrationStories.VerticalDivider} />
<Canvas of={DeprecationMigrationStories.VerticalDivider} />
4 changes: 4 additions & 0 deletions skills/carbon-react/components/tile-select-group.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ description: Carbon TileSelectGroup component props and usage examples.
## Source
- Export: `./components/tile-select`
- Props interface: `TileSelectGroupProps`
- Deprecated: Yes
- Deprecation reason: `TileSelectGroup` is deprecated with `TileSelect`. No
like-for-like replacement has been validated; use a product-specific Fusion
pattern. See the Carbon deprecation migration documentation for consumer-specific guidance.

## Props
| Name | Type | Required | Literals | Description | Default |
Expand Down
5 changes: 5 additions & 0 deletions skills/carbon-react/components/tile-select.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ description: Carbon TileSelect component props and usage examples.
## Source
- Export: `./components/tile-select`
- Props interface: `TileSelectProps`
- Deprecated: Yes
- Deprecation reason: `TileSelect` has low adoption and is a poor fit for its intended
selection UX. No like-for-like replacement has been validated; use a
product-specific Fusion pattern. See the Carbon deprecation migration
documentation for consumer-specific guidance.

## Props
| Name | Type | Required | Literals | Description | Default |
Expand Down
4 changes: 2 additions & 2 deletions skills/carbon-react/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,8 +152,8 @@
- [TileContent](components/tile-content.md)
- [TileFooter](components/tile-footer.md)
- [TileHeader](components/tile-header.md)
- [TileSelect](components/tile-select.md)
- [TileSelectGroup](components/tile-select-group.md)
- [TileSelect](components/tile-select.md) (deprecated)
- [TileSelectGroup](components/tile-select-group.md) (deprecated)
- [Time](components/time.md)
- [Toast](components/toast.md) (deprecated)
- [Tooltip](components/tooltip.md) (deprecated)
Expand Down
15 changes: 14 additions & 1 deletion skills/carbon-react/references/docs/deprecation-migration.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ The following section provides migration guidance for deprecated components that
- For `Hr`, [`Divider`](?path=/docs/divider--docs) is recommended as the preferred alternative.
- For `VerticalDivider`, [`Divider`](?path=/docs/divider--docs) is recommended as the preferred alternative.
- For `LoaderBar`, `LoaderStar` and `LoaderSpinner`: the new [`Loader`](?path=/docs/loader--docs) is recommended as the preferred alternative.
- For `TileSelect`, no like-for-like replacement has been validated. Do not reproduce its card-like selection treatment in new work; use the approved, product-specific Fusion pattern instead. Where the need is a conventional form choice, [`RadioButton`](?path=/docs/radio-button--docs) or [`Checkbox`](?path=/docs/checkbox--docs) may be appropriate, according to the selection semantics.

## Alternative Patterns

Expand All @@ -40,6 +41,18 @@ The following sections provide migration guidance for deprecated components that
- [Setting sRow](#settings-row)
- [Hr](#hr)
- [VerticalDivider](#vertical-divider)
- [Tile Select](#tile-select)

## Tile Select

`TileSelect` and `TileSelectGroup` are deprecated. The components have low adoption, their two known product implementations do not use the pattern as intended, and the pattern has not shown a good UX fit. Their overlap with existing Fusion patterns also creates unnecessary duplication and confusion. Carbon Tile Select is primarily a radio-style control, while the potentially overlapping Fusion pattern is more checkbox-like; they are not interchangeable.

### Migration

- There is no prescribed like-for-like replacement. Assess the user need and use the approved product-specific Fusion pattern rather than carrying the Carbon pattern forward.
- If the need is a conventional form choice, use `RadioButtonGroup` and `RadioButton` for mutually exclusive choices, or `CheckboxGroup` and `Checkbox` for independent choices. This is semantic guidance, not a replacement for Tile Select's card-like treatment.
- Keep the existing Report implementation unchanged until its approved replacement is available. Do not introduce Tile Select into new Report work.
- Migrate Client Management as part of its planned redesign; the redesign should use the approved Fusion pattern rather than a like-for-like Tile Select replacement.

## Alert

Expand Down Expand Up @@ -187,4 +200,4 @@ The `Hr` component can be replaced by a `Divider` with type `horizontal`. The `D

The `VerticalDivider` component can be replaced by a `Divider`. The `Divider` component will provide consistent styling while maintaining the same functionality.

<Canvas of={DeprecationMigrationStories.VerticalDivider} />
<Canvas of={DeprecationMigrationStories.VerticalDivider} />
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ import {
import { filterStyledSystemMarginProps } from "../../../style/utils";
import { TileSelectDeselectEvent } from "../tile-select.component";

/**
* @deprecated `TileSelectGroup` is deprecated with `TileSelect`. No
* like-for-like replacement has been validated; use a product-specific Fusion
* pattern. See the Carbon deprecation migration documentation for consumer-specific guidance.
*/
export interface TileSelectGroupProps extends MarginProps, TagProps {
/** The TileSelect components to be rendered in the group */
children: React.ReactNode;
Expand All @@ -35,6 +40,11 @@ export interface TileSelectGroupProps extends MarginProps, TagProps {
multiSelect?: boolean;
}

/**
* @deprecated `TileSelectGroup` is deprecated with `TileSelect`. No
* like-for-like replacement has been validated; use a product-specific Fusion
* pattern. See the Carbon deprecation migration documentation for consumer-specific guidance.
*/
export const TileSelectGroup = ({
children,
name,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import DefaultDecorator from "../../../.storybook/utils/default-decorator";
type Story = StoryObj;

export default {
title: "Tile Select/Interactions",
title: "Deprecated/Tile Select/Interactions",
parameters: {
themeProvider: { chromatic: { theme: "sage" } },
},
Expand Down
12 changes: 12 additions & 0 deletions src/components/tile-select/tile-select.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ export interface TileSelectDeselectEvent {
};
}

/**
* @deprecated `TileSelect` has low adoption and is a poor fit for its intended

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: good shout adding the deprecation annotation to the components themselves and their respective interfaces 👍

* selection UX. No like-for-like replacement has been validated; use a
* product-specific Fusion pattern. See the Carbon deprecation migration
* documentation for consumer-specific guidance.
*/
export interface TileSelectProps extends MarginProps, TagProps {
/** title of the TileSelect */
title?: React.ReactNode;
Expand Down Expand Up @@ -85,6 +91,12 @@ export interface TileSelectProps extends MarginProps, TagProps {
accordionExpanded?: boolean;
}

/**
* @deprecated `TileSelect` has low adoption and is a poor fit for its intended
* selection UX. No like-for-like replacement has been validated; use a
* product-specific Fusion pattern. See the Carbon deprecation migration
* documentation for consumer-specific guidance.
*/
const TileSelect = React.forwardRef<HTMLInputElement, TileSelectProps>(
(
{
Expand Down
7 changes: 7 additions & 0 deletions src/components/tile-select/tile-select.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@ import TranslationKeysTable from "../../../.storybook/utils/translation-keys-tab

import * as TileSelectGroupStories from "./tile-select-group/tile-select-group.stories";
import * as TileSelectStories from "./tile-select.stories";
import DeprecationWarning from "../../../.storybook/utils/deprecation-warning.component";

<Meta of={TileSelectStories} />

# TileSelect

<DeprecationWarning>
Tile Select is deprecated. It has low adoption and has proved to be a poor fit for selection UX. No like-for-like replacement has been validated: use an approved product-specific Fusion pattern for new work. See <a style={{ color: "white" }} href="../?path=/docs/documentation-deprecation-migration--docs#tile-select">the migration guidance</a> for existing consumers.
</DeprecationWarning>

<a
target="_blank"
href="https://designsystem.sage.com/fusion/latest/pages/components/tile-select/"
Expand All @@ -28,6 +33,8 @@ Tile Select is an input visualized as a single or grouped set of tiles. It behav

## Quick Start

Tile Select remains available for existing consumers while they migrate. Do not use it in new features.

To use this component, import the `TileSelect` and `TileSelectGroup` if you want to have `TileSelects` grouped.

```javascript
Expand Down
2 changes: 1 addition & 1 deletion src/components/tile-select/tile-select.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const styledSystemProps = generateStyledSystemProps({
});

const meta: Meta<typeof TileSelect> = {
title: "Tile Select",
title: "Deprecated/Tile Select",
component: TileSelect,
argTypes: {
...styledSystemProps,
Expand Down
Loading