From 44ef91575248892ed10f0afdaff6f920cd78bd64 Mon Sep 17 00:00:00 2001 From: Michal Murawski Date: Thu, 2 Apr 2026 12:31:08 +0200 Subject: [PATCH] refactor(design-system): remove deprecated DsChip and DsChipGroup components [AR-53409] --- .../ds-chip-group/ds-chip-group.module.scss | 59 --------- .../ds-chip-group.stories.module.scss | 24 ---- .../ds-chip-group/ds-chip-group.stories.tsx | 111 ---------------- .../ds-chip-group/ds-chip-group.tsx | 122 ------------------ .../ds-chip-group/ds-chip-group.types.ts | 60 --------- .../hooks/use-chip-row-calculation.ts | 81 ------------ .../src/components/ds-chip-group/index.ts | 3 - .../components/ds-chip/ds-chip.module.scss | 71 ---------- .../src/components/ds-chip/ds-chip.stories.ts | 62 --------- .../src/components/ds-chip/ds-chip.tsx | 74 ----------- .../src/components/ds-chip/ds-chip.types.ts | 59 --------- .../src/components/ds-chip/index.ts | 10 -- .../ds-select/ds-select.stories.tsx | 2 +- .../ds-select/select-items-chips.tsx | 7 +- .../create-checkbox-filter-adapter.tsx | 13 +- .../create-dual-range-filter-adapter.tsx | 16 +-- .../filters/adapters/create-filter-adapter.ts | 24 ++-- .../filters/hooks/use-table-filters.ts | 32 ++--- .../src/components/ds-table/filters/index.ts | 2 +- .../filters/types/filter-adapter.types.ts | 14 +- .../stories/filters-panel.stories.tsx | 62 ++++----- .../filters-panel/workflow-filters.config.tsx | 40 +++--- packages/design-system/src/index.ts | 2 - packages/design-system/vitest.config.ts | 2 - .../src/__tests__/no-deprecated.test.ts | 19 +-- packages/eslint-plugin/src/index.ts | 12 +- 26 files changed, 111 insertions(+), 872 deletions(-) delete mode 100644 packages/design-system/src/components/ds-chip-group/ds-chip-group.module.scss delete mode 100644 packages/design-system/src/components/ds-chip-group/ds-chip-group.stories.module.scss delete mode 100644 packages/design-system/src/components/ds-chip-group/ds-chip-group.stories.tsx delete mode 100644 packages/design-system/src/components/ds-chip-group/ds-chip-group.tsx delete mode 100644 packages/design-system/src/components/ds-chip-group/ds-chip-group.types.ts delete mode 100644 packages/design-system/src/components/ds-chip-group/hooks/use-chip-row-calculation.ts delete mode 100644 packages/design-system/src/components/ds-chip-group/index.ts delete mode 100644 packages/design-system/src/components/ds-chip/ds-chip.module.scss delete mode 100644 packages/design-system/src/components/ds-chip/ds-chip.stories.ts delete mode 100644 packages/design-system/src/components/ds-chip/ds-chip.tsx delete mode 100644 packages/design-system/src/components/ds-chip/ds-chip.types.ts delete mode 100644 packages/design-system/src/components/ds-chip/index.ts diff --git a/packages/design-system/src/components/ds-chip-group/ds-chip-group.module.scss b/packages/design-system/src/components/ds-chip-group/ds-chip-group.module.scss deleted file mode 100644 index 419d4dd86..000000000 --- a/packages/design-system/src/components/ds-chip-group/ds-chip-group.module.scss +++ /dev/null @@ -1,59 +0,0 @@ -.container { - display: flex; - align-items: center; - gap: var(--spacing-standard); - padding: var(--spacing-xs) var(--spacing-standard); - background: var(--color-background-selected-weak); - border: 1px solid var(--color-outline-weak); - border-radius: var(--spacing-3xs); -} - -.chipsWrapper { - display: flex; - flex: 1; - flex-wrap: wrap; - align-items: center; - gap: var(--spacing-xs); - max-height: var(--spacing-3xl); - overflow: hidden; - - .hidden { - visibility: hidden; - position: absolute; - pointer-events: none; - } -} - -.label { - color: var(--color-font-secondary); - white-space: nowrap; -} - -.expandChip { - cursor: pointer; -} - -.dialog { - position: fixed; - background: var(--color-background); - border: 1px solid var(--color-border-secondary); - border-radius: var(--spacing-3xs); - box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15); - padding: var(--spacing-xs); - max-height: 80vh; - overflow-y: auto; - z-index: 1001; - min-width: 300px; - max-width: 500px; -} - -.dialogContent { - display: flex; - flex-direction: column; - gap: 10px; -} - -.itemCheckbox { - display: flex; - align-items: center; -} diff --git a/packages/design-system/src/components/ds-chip-group/ds-chip-group.stories.module.scss b/packages/design-system/src/components/ds-chip-group/ds-chip-group.stories.module.scss deleted file mode 100644 index 8ccb864c8..000000000 --- a/packages/design-system/src/components/ds-chip-group/ds-chip-group.stories.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -.container { - display: flex; - flex-direction: column; - gap: 16px; -} - -.controlsContainer { - display: flex; - gap: 8px; -} - -.addButton { - padding: 8px 16px; - border-radius: 4px; - border: 1px solid #ccc; - background: white; - cursor: pointer; -} - -.infoText { - font-size: 12px; - color: #666; - align-self: center; -} diff --git a/packages/design-system/src/components/ds-chip-group/ds-chip-group.stories.tsx b/packages/design-system/src/components/ds-chip-group/ds-chip-group.stories.tsx deleted file mode 100644 index 709d61ee0..000000000 --- a/packages/design-system/src/components/ds-chip-group/ds-chip-group.stories.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; -import { useState } from 'react'; -import DsChipGroup from './ds-chip-group'; -import type { ChipItem } from './ds-chip-group.types'; -import styles from './ds-chip-group.stories.module.scss'; - -/** - * @deprecated This component is deprecated. Use `DsTagFilter` instead. - * @see {@link ../ds-tag-filter/ds-tag-filter.stories} for examples of the replacement component. - */ -const meta: Meta = { - title: 'Design System/ChipGroup (Deprecated)', - component: DsChipGroup, - parameters: { - layout: 'padded', - docs: { - description: { - component: - '**Deprecated**: This component is deprecated. Please use `DsTagFilter` instead. See the TagGroup stories for the replacement component.', - }, - }, - }, - tags: ['deprecated'], - argTypes: { - items: { - control: 'object', - description: 'Array of chip items to display', - }, - onClearAll: { - action: 'clear-all', - description: 'Callback when "Clear all" is clicked', - }, - onItemDelete: { - action: 'delete-item', - description: 'Callback when item is deleted', - }, - }, -}; - -export default meta; -type Story = StoryObj; - -const sampleFilters: ChipItem[] = [ - { id: '1', label: 'Status: Active' }, - { id: '2', label: 'Running: From 100 to 10,000' }, - { id: '3', label: 'Completed from 20,000 to 100,000' }, - { id: '4', label: 'Executor: Category 1, Layer 1 transporter' }, - { id: '5', label: 'Executor: Category 2, Layer 11 transporter' }, - { id: '6', label: 'Executor: Category 2, Layer 12 transporter' }, - { id: '7', label: 'Executor: Category 2, Layer 13 transporter' }, - { id: '8', label: 'Version: 000.0001-3' }, - { id: '9', label: 'Version: 000.0001-4' }, - { id: '10', label: 'Version: 000.0001-5' }, - { id: '11', label: 'Version: 000.0001-6' }, - { id: '12', label: 'Last editor: Mary Levin' }, - { id: '13', label: 'Last editor: Emery Franco' }, -]; - -export const Default: Story = { - render: function Render() { - const [filters, setFilters] = useState(sampleFilters); - - const handleClearAll = () => { - setFilters([]); - }; - - const handleAddFilter = () => { - const newId = `new-${String(Date.now())}`; - setFilters((prev) => [ - ...prev, - { - id: newId, - label: `New Filter ${String(prev.length + 1)}`, - }, - ]); - }; - - const handleFilterDelete = (filter: ChipItem) => { - setFilters((prev) => prev.filter((f) => f.id !== filter.id)); - }; - - const handleFilterSelect = (filter: ChipItem) => { - setFilters((prev) => prev.map((f) => (f.id === filter.id ? { ...f, selected: !f.selected } : f))); - }; - - return ( -
- -
- -

Total filters: {filters.length}

-

- Selected filters: [ - {filters - .filter((filter) => filter.selected) - .map((filter) => `"${filter.label}"`) - .join(', ')} - ] -

-
-
- ); - }, -}; diff --git a/packages/design-system/src/components/ds-chip-group/ds-chip-group.tsx b/packages/design-system/src/components/ds-chip-group/ds-chip-group.tsx deleted file mode 100644 index f11738afb..000000000 --- a/packages/design-system/src/components/ds-chip-group/ds-chip-group.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import type React from 'react'; -import { useRef, useState } from 'react'; -import * as RadixDialog from '@radix-ui/react-dialog'; -import { Root as VisuallyHidden } from '@radix-ui/react-visually-hidden'; -import classNames from 'classnames'; -import styles from './ds-chip-group.module.scss'; -import type { DsChipGroupProps } from './ds-chip-group.types'; -import { useChipRowCalculation } from './hooks/use-chip-row-calculation'; -import { DsTypography } from '../ds-typography'; -import { DsChip } from '../ds-chip'; -import { DsCheckbox } from '../ds-checkbox'; -import { DsButton } from '../ds-button'; -import { DsIcon } from '../ds-icon'; - -/** - * @deprecated This component is deprecated. Use `DsTagFilter` instead. - * @see {@link ../ds-tag-filter} for the replacement component. - */ -const DsChipGroup: React.FC = ({ - items, - label = 'Filtered by:', - onClearAll, - onItemDelete, - onItemSelect, - className, - style, -}) => { - const [dialogOpen, setDialogOpen] = useState(false); - const showAllChipsRef = useRef(null); - const chipsWrapperRef = useRef(null); - const visibleCount = useChipRowCalculation({ - chipsWrapperRef, - totalFilters: items.length, - }); - - if (items.length === 0) { - return null; - } - - const hiddenCount = items.length - visibleCount; - const showExpandButton = hiddenCount > 0; - - const handleOpenDialog = () => { - setDialogOpen(true); - }; - - let dialogStyle: React.CSSProperties = {}; - if (showExpandButton && showAllChipsRef.current) { - const rect = showAllChipsRef.current.getBoundingClientRect(); - dialogStyle = { - position: 'fixed', - top: rect.bottom + 4, - left: rect.left, - }; - } - - return ( -
- {label && ( - - {label} - - )} - -
- {items.map((item, index) => ( - onItemSelect?.(item)} - onDelete={() => onItemDelete?.(item)} - className={classNames({ - [styles.hidden]: index >= visibleCount, - })} - /> - ))} - {showExpandButton && ( - - )} -
- - {onClearAll && ( - - - Clear all - - )} - - - - - - - -
- {items - .filter((item, index) => index >= visibleCount) - .map((item) => ( -
- onItemSelect?.(item)} - label={item.label} - /> -
- ))} -
- - - -
- ); -}; - -export default DsChipGroup; diff --git a/packages/design-system/src/components/ds-chip-group/ds-chip-group.types.ts b/packages/design-system/src/components/ds-chip-group/ds-chip-group.types.ts deleted file mode 100644 index 6deec135d..000000000 --- a/packages/design-system/src/components/ds-chip-group/ds-chip-group.types.ts +++ /dev/null @@ -1,60 +0,0 @@ -import type { CSSProperties } from 'react'; - -/** - * @deprecated This interface is deprecated. Use `DsTagFilter` types instead. - * @see {@link ../ds-tag-filter} for the replacement types. - */ -export interface ChipItem { - /** - * Unique identifier for the chip - */ - id: string; - /** - * The label text to display in the chip - */ - label: string; - /** - * Additional metadata to store with the chip - */ - metadata?: Record; - /** - * Whether the chip is selected/checked - */ - selected?: boolean; -} - -/** - * @deprecated This interface is deprecated. Use `DsTagFilterProps` from `ds-tag-filter` instead. - * @see {@link ../ds-tag-filter/ds-tag-filter.types} for the replacement interface. - */ -export interface DsChipGroupProps { - /** - * Array of chip items to display - */ - items: ChipItem[]; - /** - * Label text to display before the chips (e.g., "Filtered by:") - * @default "Filtered by:" - */ - label?: string; - /** - * Callback when "Clear all" is clicked - */ - onClearAll?: () => void; - /** - * Callback when a chip is deleted/unchecked - */ - onItemDelete?: (item: ChipItem) => void; - /** - * Callback when a chip is selected - */ - onItemSelect?: (item: ChipItem) => void; - /** - * Additional CSS class names - */ - className?: string; - /** - * Additional styles to apply to the component - */ - style?: CSSProperties; -} diff --git a/packages/design-system/src/components/ds-chip-group/hooks/use-chip-row-calculation.ts b/packages/design-system/src/components/ds-chip-group/hooks/use-chip-row-calculation.ts deleted file mode 100644 index d53c99c76..000000000 --- a/packages/design-system/src/components/ds-chip-group/hooks/use-chip-row-calculation.ts +++ /dev/null @@ -1,81 +0,0 @@ -import { type RefObject, useLayoutEffect, useState } from 'react'; - -interface UseChipRowCalculationProps { - chipsWrapperRef: RefObject; - totalFilters: number; -} - -/** - * Custom hook to calculate how many chips can fit in 2 rows - * Uses a simple approach: render all, measure positions, hide overflow - */ -export const useChipRowCalculation = ({ chipsWrapperRef, totalFilters }: UseChipRowCalculationProps) => { - const [visibleCount, setVisibleCount] = useState(totalFilters); - - useLayoutEffect(() => { - const calculateVisibleChips = () => { - if (!chipsWrapperRef.current) { - return; - } - - const wrapper = chipsWrapperRef.current; - const children = Array.from(wrapper.children) as HTMLElement[]; - - if (children.length === 0) { - return; - } - - const cs = getComputedStyle(wrapper); - const gap = parseFloat(cs.columnGap || cs.gap || '0') || 8; - let index; - let line = 0; - let total = 0; - - for (index = 0; index < children.length; index++) { - const current = children[index]; - - if (!current) { - continue; - } - - const offset = current.offsetWidth === wrapper.clientWidth ? 0 : gap; - const next = offset + current.offsetWidth; - - if (total + next >= wrapper.clientWidth) { - line++; - if (line >= 2) { - break; - } - total = next; - } else { - total += next; - } - } - - const result = Math.max(1, line < 2 ? index : index - 1); - setVisibleCount(result); - }; - - // Use requestAnimationFrame to ensure DOM is fully laid out - const rafId = requestAnimationFrame(() => { - calculateVisibleChips(); - }); - - const resizeObserver = new ResizeObserver(() => { - requestAnimationFrame(() => { - calculateVisibleChips(); - }); - }); - - if (chipsWrapperRef.current) { - resizeObserver.observe(chipsWrapperRef.current); - } - - return () => { - cancelAnimationFrame(rafId); - resizeObserver.disconnect(); - }; - }, [chipsWrapperRef, totalFilters]); - - return visibleCount; -}; diff --git a/packages/design-system/src/components/ds-chip-group/index.ts b/packages/design-system/src/components/ds-chip-group/index.ts deleted file mode 100644 index 133bd29d9..000000000 --- a/packages/design-system/src/components/ds-chip-group/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default as DsChipGroup } from './ds-chip-group'; - -export type { DsChipGroupProps, ChipItem } from './ds-chip-group.types'; diff --git a/packages/design-system/src/components/ds-chip/ds-chip.module.scss b/packages/design-system/src/components/ds-chip/ds-chip.module.scss deleted file mode 100644 index fadec8eb4..000000000 --- a/packages/design-system/src/components/ds-chip/ds-chip.module.scss +++ /dev/null @@ -1,71 +0,0 @@ -@use '../../styles/typography'; - -.chip { - display: inline-flex; - align-items: center; - gap: var(--spacing-3xs); - padding: 1px var(--spacing-3xs) 1px var(--spacing-xs); - background: var(--color-background); - border: 1px solid var(--color-border-contrast); - border-radius: 100vmax; - color: var(--color-font-main); - cursor: default; - overflow: hidden; - transition: - background-color 0.2s, - border-color 0.2s, - color 0.2s; - - &.clickable { - cursor: pointer; - - &:hover { - background: var(--color-background-action-hover-weak); - border-color: var(--color-border-action-secondary-hover); - } - - &:focus-visible { - outline: 2px solid var(--color-background-selected); - outline-offset: 2px; - } - } - - &.small { - padding: 0 var(--spacing-4xs) 0 var(--spacing-3xs); - gap: var(--spacing-4xs); - } - - &[aria-pressed='true'] { - background: var(--color-background-selected-weak); - border-color: var(--color-border-action-primary); - color: var(--color-font-action); - } -} - -.label { - @include typography.ellipsis; - padding: var(--spacing-4xs) var(--spacing-3xs); - flex: 1; -} - -.deleteButton { - display: flex; - align-items: center; - justify-content: center; - border: none; - background: transparent; - color: var(--color-icon-information-main); - cursor: pointer; - transition: - background-color 0.2s, - color 0.2s; - flex-shrink: 0; - - &:hover { - color: var(--color-icon-secondary); - } - - .chip.small & { - padding: 1px var(--spacing-4xs); - } -} diff --git a/packages/design-system/src/components/ds-chip/ds-chip.stories.ts b/packages/design-system/src/components/ds-chip/ds-chip.stories.ts deleted file mode 100644 index 48d8f7def..000000000 --- a/packages/design-system/src/components/ds-chip/ds-chip.stories.ts +++ /dev/null @@ -1,62 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react-vite'; -import DsChip from './ds-chip'; -import { chipSizes } from './ds-chip.types'; - -/** - * @deprecated This component is deprecated. Use `DsTag` instead. - * @see {@link ../ds-tag/ds-tag.stories} for examples of the replacement component. - */ -const meta: Meta = { - title: 'Design System/Chip (Deprecated)', - component: DsChip, - parameters: { - layout: 'centered', - docs: { - description: { - component: - '**Deprecated**: This component is deprecated. Please use `DsTag` instead. See the Tag stories for the replacement component.', - }, - }, - }, - tags: ['deprecated'], - argTypes: { - label: { - control: 'text', - description: 'The label text to display in the chip', - }, - className: { - control: 'text', - description: 'Additional CSS class names', - }, - style: { - control: 'object', - description: 'Inline styles to apply to the component', - }, - onClick: { - action: 'clicked', - description: 'Function called when component is clicked', - }, - onDelete: { - action: 'deleted', - description: 'Function called when delete icon is clicked', - }, - size: { - control: 'select', - options: chipSizes, - description: 'Size of the chip', - }, - deleteIcon: { - control: false, - description: 'Custom delete icon element', - }, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - label: 'Default Label', - }, -}; diff --git a/packages/design-system/src/components/ds-chip/ds-chip.tsx b/packages/design-system/src/components/ds-chip/ds-chip.tsx deleted file mode 100644 index b2b4b422b..000000000 --- a/packages/design-system/src/components/ds-chip/ds-chip.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import type React from 'react'; -import classNames from 'classnames'; -import styles from './ds-chip.module.scss'; -import type { DsChipProps } from './ds-chip.types'; -import { DsIcon } from '../ds-icon'; -import { DsTypography } from '../ds-typography'; - -/** - * @deprecated This component is deprecated. Use `DsTag` instead. - * @see {@link ../ds-tag} for the replacement component. - */ -const DsChip: React.FC = ({ - ref, - label, - className, - style = {}, - onClick, - onDelete, - size = 'medium', - deleteIcon, - selected = false, -}) => { - const chipClass = classNames( - styles.chip, - { - [styles.clickable]: onClick !== undefined, - [styles.small]: size === 'small', - }, - className, - ); - - const handleDeleteClick = (event: React.MouseEvent) => { - event.stopPropagation(); - onDelete?.(event); - }; - - const handleKeyDown = (event: React.KeyboardEvent) => { - if (onDelete && (event.key === 'Backspace' || event.key === 'Delete')) { - event.preventDefault(); - onDelete(event); - } - }; - - return ( -
} - className={chipClass} - style={style} - onClick={onClick} - onKeyDown={handleKeyDown} - role={onClick || onDelete ? 'button' : undefined} - tabIndex={onClick || onDelete ? 0 : undefined} - aria-label={label} - aria-pressed={onClick && selected ? 'true' : undefined} - > - - {label} - - {onDelete && ( - - )} -
- ); -}; - -export default DsChip; diff --git a/packages/design-system/src/components/ds-chip/ds-chip.types.ts b/packages/design-system/src/components/ds-chip/ds-chip.types.ts deleted file mode 100644 index a466c63ff..000000000 --- a/packages/design-system/src/components/ds-chip/ds-chip.types.ts +++ /dev/null @@ -1,59 +0,0 @@ -import type { CSSProperties, KeyboardEvent, MouseEvent, Ref } from 'react'; -import type { IconType } from '../ds-icon'; - -/** - * @deprecated This type is deprecated. Use `DsTag` instead. - * @see {@link ../ds-tag} for the replacement component. - */ -export const chipSizes = ['medium', 'small'] as const; - -/** - * @deprecated This type is deprecated. Use `DsTag` instead. - * @see {@link ../ds-tag} for the replacement component. - */ -export type ChipSize = (typeof chipSizes)[number]; - -/** - * @deprecated This interface is deprecated. Use `DsTagProps` from `ds-tag` instead. - * @see {@link ../ds-tag/ds-tag.types} for the replacement interface. - */ -export interface DsChipProps { - /** - * Ref to the chip element - */ - ref?: Ref; - /** - * The label text to display in the chip - */ - label: string; - /** - * Additional CSS class names - */ - className?: string; - /** - * Additional styles to apply to the component - */ - style?: CSSProperties; - /** - * Optional click handler - */ - onClick?: (event: MouseEvent) => void; - /** - * Callback function when delete icon is clicked - */ - onDelete?: (event: MouseEvent | KeyboardEvent) => void; - /** - * Size of the chip - * @default 'medium' - */ - size?: ChipSize; - /** - * Custom delete icon element - */ - deleteIcon?: IconType; - /** - * Whether the chip is in a selected/pressed state - * @default false - */ - selected?: boolean; -} diff --git a/packages/design-system/src/components/ds-chip/index.ts b/packages/design-system/src/components/ds-chip/index.ts deleted file mode 100644 index 6d7de51e9..000000000 --- a/packages/design-system/src/components/ds-chip/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * @deprecated DsChip is deprecated. Use DsTag instead. - * @see {@link ../ds-tag} for the replacement component. - */ -export { default as DsChip } from './ds-chip'; -/** - * @deprecated These types are deprecated. Use DsTag types instead. - * @see {@link ../ds-tag} for the replacement types. - */ -export type { ChipSize, DsChipProps } from './ds-chip.types'; diff --git a/packages/design-system/src/components/ds-select/ds-select.stories.tsx b/packages/design-system/src/components/ds-select/ds-select.stories.tsx index 57a615dd1..332f0b605 100644 --- a/packages/design-system/src/components/ds-select/ds-select.stories.tsx +++ b/packages/design-system/src/components/ds-select/ds-select.stories.tsx @@ -276,7 +276,7 @@ export const MultiSelect: Story = { // Delete the first option by clicking its delete button const firstOption = mockOptions[0] as DsSelectOption; const firstOptionChip = screen.getByRole('button', { name: firstOption.label }); - const deleteButton = within(firstOptionChip).getByRole('button', { name: 'Delete chip' }); + const deleteButton = within(firstOptionChip).getByRole('button', { name: 'Delete tag' }); await userEvent.click(deleteButton); // Verify deleted option is no longer visible diff --git a/packages/design-system/src/components/ds-select/select-items-chips.tsx b/packages/design-system/src/components/ds-select/select-items-chips.tsx index d0147d971..55e3d96d8 100644 --- a/packages/design-system/src/components/ds-select/select-items-chips.tsx +++ b/packages/design-system/src/components/ds-select/select-items-chips.tsx @@ -1,8 +1,7 @@ import { useSelectContext, type UseSelectContext } from '@ark-ui/react/select'; import styles from './ds-select.module.scss'; import { DsButton } from '../ds-button'; -// TODO: Use DsTag instead. -import { DsChip } from '../ds-chip'; +import { DsTag } from '../ds-tag'; import type { DsSelectOption, SelectOptionValue } from './ds-select.types'; type SelectItemsChipsProps = { @@ -36,11 +35,11 @@ export function SelectItemsChips({ showAll, onShowAll, onValueChange, count }: S onValueChange?.(filteredValue); }; - return ; + return ; })} {!showAll && selectedItems.length > count && ( - + )} { * Optional custom chip label generator * @default (item) => `${label}: ${item.label}` */ - chipLabelTemplate?: (item: CheckboxFilterItem) => string; + tagLabelTemplate?: (item: CheckboxFilterItem) => string; /** * Optional custom cell renderer for table column @@ -58,7 +58,7 @@ export function createCheckboxFilterAdapter( label, items, renderer, - chipLabelTemplate = (item) => `${label}: ${item.label}`, + tagLabelTemplate = (item) => `${label}: ${item.label}`, cellRenderer, getRowValue = (row) => row.getValue(id), } = config; @@ -81,11 +81,10 @@ export function createCheckboxFilterAdapter( cellRenderer, - toChips: (selectedItems) => { - // Generate chips for all selected items + toTags: (selectedItems) => { return selectedItems.map((item) => ({ id: `${id}_${String(item.value)}`, - label: chipLabelTemplate(item), + label: tagLabelTemplate(item), metadata: { key: id, value: item.value, @@ -93,8 +92,8 @@ export function createCheckboxFilterAdapter( })); }, - fromChip: (chip, currentValue) => { - return currentValue.filter((item) => item.value !== chip.metadata?.value); + fromTag: (tag, currentValue) => { + return currentValue.filter((item) => item.value !== tag.metadata?.value); }, getActiveFiltersCount: (selectedItems) => { diff --git a/packages/design-system/src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx b/packages/design-system/src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx index 61296c5c8..811c74224 100644 --- a/packages/design-system/src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx +++ b/packages/design-system/src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx @@ -1,5 +1,5 @@ import type { Row } from '@tanstack/react-table'; -import type { ChipItem } from '../../../ds-chip-group'; +import type { TagFilterItem } from '../../../ds-tag-filter'; import type { FilterAdapter } from '../types/filter-adapter.types'; import { RangeFilter } from '../components/range-filter'; import { createFilterAdapter } from './create-filter-adapter'; @@ -31,7 +31,7 @@ export interface DualRangeFilterAdapterConfig { fields: Record; /** - * Optional formatter for chip display + * Optional formatter for tag display * @default (num) => num.toLocaleString('en-US') */ formatNumber?: (num: number) => string; @@ -91,8 +91,8 @@ export function createDualRangeFilterAdapter( cellRenderer: undefined, // Let the column definition handle rendering - toChips: (value) => { - const chips: ChipItem[] = []; + toTags: (value) => { + const tags: TagFilterItem[] = []; Object.entries(value).forEach(([fieldKey, range]) => { const hasFilter = range.from !== undefined || range.to !== undefined; @@ -102,7 +102,7 @@ export function createDualRangeFilterAdapter( const fromText = range.from !== undefined ? formatNumber(range.from) : ''; const toText = range.to !== undefined ? formatNumber(range.to) : ''; - chips.push({ + tags.push({ id: `${id}_${fieldKey}`, label: `${fieldLabel}: From ${fromText} to ${toText}`, metadata: { @@ -115,11 +115,11 @@ export function createDualRangeFilterAdapter( } }); - return chips; + return tags; }, - fromChip: (chip, currentValue) => { - const fieldKey = chip.metadata?.field as string; + fromTag: (tag, currentValue) => { + const fieldKey = tag.metadata?.field as string; if (!fieldKey) { return currentValue; } diff --git a/packages/design-system/src/components/ds-table/filters/adapters/create-filter-adapter.ts b/packages/design-system/src/components/ds-table/filters/adapters/create-filter-adapter.ts index acfb449e9..126599649 100644 --- a/packages/design-system/src/components/ds-table/filters/adapters/create-filter-adapter.ts +++ b/packages/design-system/src/components/ds-table/filters/adapters/create-filter-adapter.ts @@ -23,14 +23,14 @@ export interface FilterAdapterConfig filterFn: FilterAdapter['columnFilterFn']; /** - * Convert filter value to display chips + * Convert filter value to display tags */ - toChips: FilterAdapter['toChips']; + toTags: FilterAdapter['toTags']; /** - * Remove chip effect from filter value + * Remove tag effect from filter value */ - fromChip: FilterAdapter['fromChip']; + fromTag: FilterAdapter['fromTag']; /** * Calculate active filter count @@ -59,7 +59,7 @@ export interface FilterAdapterConfig * - Complex filtering logic (e.g., editor + date range) * - Unique UI that doesn't fit generic patterns * - Combining multiple sub-filters - * - Special chip generation requirements + * - Special tag generation requirements * * ## When to use specialized helpers instead: * - **Checkbox filters**: Use `createCheckboxFilterAdapter` for multi-select @@ -82,13 +82,13 @@ export interface FilterAdapterConfig * return matchesUsers && matchesDateRange; * }, * - * toChips: (value) => { - * // Generate chips from your filter value - * return chips; + * toTags: (value) => { + * // Generate tags from your filter value + * return tags; * }, * - * fromChip: (chip, currentValue) => { - * // Remove chip's effect from value + * fromTag: (tag, currentValue) => { + * // Remove tag's effect from value * return updatedValue; * }, * @@ -122,8 +122,8 @@ export function createFilterAdapter( initialValue: config.initialValue, columnFilterFn: config.filterFn, cellRenderer: config.cellRenderer, - toChips: config.toChips, - fromChip: config.fromChip, + toTags: config.toTags, + fromTag: config.fromTag, getActiveFiltersCount: config.getActiveFiltersCount, reset: () => config.initialValue, renderFilter: config.renderFilter, diff --git a/packages/design-system/src/components/ds-table/filters/hooks/use-table-filters.ts b/packages/design-system/src/components/ds-table/filters/hooks/use-table-filters.ts index bc31248b7..9307405c7 100644 --- a/packages/design-system/src/components/ds-table/filters/hooks/use-table-filters.ts +++ b/packages/design-system/src/components/ds-table/filters/hooks/use-table-filters.ts @@ -1,6 +1,6 @@ import { type ReactNode, useState } from 'react'; import type { CellContext, ColumnDef } from '@tanstack/react-table'; -import type { ChipItem } from '../../../ds-chip-group'; +import type { TagFilterItem } from '../../../ds-tag-filter'; import type { AnyAdapter, ColumnFilterState, @@ -29,7 +29,7 @@ export interface UseTableFiltersOptions { /** * Controlled mode: Callback when filters change. - * Called by applyFilters(), deleteChip(), clearAll(). + * Called by applyFilters(), deleteTag(), clearAll(). */ onFiltersChange?: (filters: FilterState) => void; } @@ -46,9 +46,9 @@ export interface UseTableFiltersResult { columnFilters: ColumnFilterState[]; /** - * Filter chips for display (derived from applied state) + * Filter tags for display (derived from applied state) */ - filterChips: ChipItem[]; + filterTags: TagFilterItem[]; /** * Filter navigation items with active counts @@ -70,8 +70,8 @@ export interface UseTableFiltersResult { applyFilters: () => void; /** Clear all filters */ clearAll: () => void; - /** Delete a specific filter chip */ - deleteChip: (chip: ChipItem) => void; + /** Delete a specific filter tag */ + deleteTag: (tag: TagFilterItem) => void; }; /** @@ -82,21 +82,21 @@ export interface UseTableFiltersResult { /** * Hook to orchestrate table filtering with adapters. - * Manages filter state, generates chips, and handles column definitions. + * Manages filter state, generates tags, and handles column definitions. * * **Uncontrolled mode** (default): Filters are managed internally. * **Controlled mode**: Filters are managed externally via appliedFilters/onFiltersChange. * * @example * // Uncontrolled mode - * const { filterChips, handlers } = useTableFilters({ + * const { filterTags, handlers } = useTableFilters({ * filterAdapters: adapters, * baseColumns: columns, * }); * * @example * // Controlled mode (e.g., URL-driven filtering) - * const { filterChips, handlers } = useTableFilters({ + * const { filterTags, handlers } = useTableFilters({ * filterAdapters: adapters, * baseColumns: columns, * appliedFilters: filtersFromUrl, @@ -134,9 +134,9 @@ export function useTableFilters({ }) .map(([id, value]) => ({ id, value })); - const filterChips = _filterAdapters.flatMap((adapter) => { + const filterTags = _filterAdapters.flatMap((adapter) => { const value = appliedFilters[adapter.id]; - return value !== undefined ? adapter.toChips(value) : []; + return value !== undefined ? adapter.toTags(value) : []; }); const filterNavItems: FilterNavItem[] = _filterAdapters.map((adapter) => ({ @@ -185,8 +185,8 @@ export function useTableFilters({ setAppliedFilters({}); }; - const deleteChip = (chip: ChipItem) => { - const filterKey = typeof chip.metadata?.key === 'string' ? chip.metadata.key : undefined; + const deleteTag = (tag: TagFilterItem) => { + const filterKey = typeof tag.metadata?.key === 'string' ? tag.metadata.key : undefined; if (!filterKey) { return; } @@ -201,7 +201,7 @@ export function useTableFilters({ return; } - const newValue = adapter.fromChip(chip, currentValue); + const newValue = adapter.fromTag(tag, currentValue); const newFilters = adapter.getActiveFiltersCount(newValue) === 0 @@ -226,14 +226,14 @@ export function useTableFilters({ return { filterState: draftFilters, columnFilters, - filterChips, + filterTags, filterNavItems, enhancedColumns, handlers: { updateFilter, applyFilters, clearAll, - deleteChip, + deleteTag, }, renderFilterContent, }; diff --git a/packages/design-system/src/components/ds-table/filters/index.ts b/packages/design-system/src/components/ds-table/filters/index.ts index f6699565c..03db798e4 100644 --- a/packages/design-system/src/components/ds-table/filters/index.ts +++ b/packages/design-system/src/components/ds-table/filters/index.ts @@ -20,7 +20,7 @@ * // 2. Use in component with useTableFilters hook * import { useTableFilters } from '../filters'; * - * const { columnFilters, filterChips, enhancedColumns, handlers } = + * const { columnFilters, filterTags, enhancedColumns, handlers } = * useTableFilters(myFilters, columns); * ``` * diff --git a/packages/design-system/src/components/ds-table/filters/types/filter-adapter.types.ts b/packages/design-system/src/components/ds-table/filters/types/filter-adapter.types.ts index 38bc04255..a9ad0db30 100644 --- a/packages/design-system/src/components/ds-table/filters/types/filter-adapter.types.ts +++ b/packages/design-system/src/components/ds-table/filters/types/filter-adapter.types.ts @@ -1,6 +1,6 @@ import type { ReactNode } from 'react'; import type { Row } from '@tanstack/react-table'; -import type { ChipItem } from '../../../ds-chip-group'; +import type { TagFilterItem } from '../../../ds-tag-filter'; // eslint-disable-next-line @typescript-eslint/no-explicit-any export type AnyAdapter = FilterAdapter; @@ -43,16 +43,16 @@ export interface FilterAdapter { cellRenderer?: (value: TCellValue) => ReactNode; /** - * Convert filter value to filter chips for display - * Returns empty array if no chips should be shown + * Convert filter value to filter tags for display + * Returns empty array if no tags should be shown */ - toChips: (value: TFilterValue) => ChipItem[]; + toTags: (value: TFilterValue) => TagFilterItem[]; /** - * Remove a chip from the filter value - * Returns updated filter value with the chip's effect removed + * Remove a tag from the filter value + * Returns updated filter value with the tag's effect removed */ - fromChip: (chip: ChipItem, currentValue: TFilterValue) => TFilterValue; + fromTag: (tag: TagFilterItem, currentValue: TFilterValue) => TFilterValue; /** * Calculate how many active filters are applied diff --git a/packages/design-system/src/components/ds-table/stories/filters-panel.stories.tsx b/packages/design-system/src/components/ds-table/stories/filters-panel.stories.tsx index 68195c4e3..08a9e7b03 100644 --- a/packages/design-system/src/components/ds-table/stories/filters-panel.stories.tsx +++ b/packages/design-system/src/components/ds-table/stories/filters-panel.stories.tsx @@ -8,7 +8,7 @@ import { DsButton } from '../../ds-button'; import { DsModal } from '../../ds-modal'; import { DsVerticalTabs } from '../../ds-vertical-tabs'; import { DsTypography } from '../../ds-typography'; -import { DsChipGroup } from '../../ds-chip-group'; +import { DsTagFilter } from '../../ds-tag-filter'; import { useTableFilters } from '../filters/hooks/use-table-filters'; import type { FilterNavItem } from '../filters/types/filter-adapter.types'; import { type Workflow, workflowFilters } from './filters-panel/workflow-filters.config'; @@ -239,7 +239,7 @@ A plug-and-play filter system using the **Filter Adapter Pattern** that eliminat - **Plug-and-play**: Add filters by adding to config array - **Type-safe**: Full TypeScript support -- **Automatic**: Chip generation, nav items, column enhancement +- **Automatic**: Tag generation, nav items, column enhancement - **Reusable**: Generic adapters work across tables - **Extensible**: Custom adapters for complex scenarios @@ -281,10 +281,10 @@ function MyTable() { const { columnFilters, // For TanStack Table - filterChips, // For DsChipGroup + filterTags, // For DsTagFilter filterNavItems, // For filter navigation (FilterNavItem[]) enhancedColumns, // Columns with filters - handlers, // { applyFilters, clearAll, deleteChip } + handlers, // { applyFilters, clearAll, deleteTag } renderFilterContent, // Render function } = useTableFilters({ filterAdapters: myFilters, @@ -297,11 +297,11 @@ function MyTable() { - {filterChips.length > 0 && ( - 0 && ( + )} @@ -329,7 +329,7 @@ createCheckboxFilterAdapter({ label: 'Display Label', items: [{ value: 'val1', label: 'Label 1' }], renderer?: (item) => , // Optional - chipLabelTemplate?: (item) => \`\${item.label}\`, // Optional + tagLabelTemplate?: (item) => \`\${item.label}\`, // Optional cellRenderer?: (value) => , // Optional }); \`\`\` @@ -354,8 +354,8 @@ createCustomFilterAdapter({ label: 'Display Label', initialValue: { /* your state */ }, filterFn: (row, columnId, filterValue) => boolean, - toChips: (value) => FilterChipItem[], - fromChip: (chip, currentValue) => newValue, + toTags: (value) => TagFilterItem[], + fromTag: (tag, currentValue) => newValue, getActiveFiltersCount: (value) => number, // 0 means none active renderFilter: (value, onChange) => ReactNode, cellRenderer?: (value) => ReactNode, // Optional @@ -364,7 +364,7 @@ createCustomFilterAdapter({ ## What You Get Automatically -- Chip generation from filter state +- Tag generation from filter state - Filter nav items with active counts - Column enhancement with filter functions - State management across all filters @@ -413,7 +413,7 @@ This story demonstrates the complete filter system with: - **Status Filter**: Checkbox multi-select with custom rendering (status badges) - **Running/Completed Filter**: Dual-range numeric filter - **Category Filter**: Simple checkbox multi-select -- **Version Filter**: Checkbox with custom chip labels +- **Version Filter**: Checkbox with custom tag labels #### Key Implementation Details: @@ -426,10 +426,10 @@ This story demonstrates the complete filter system with: \`\`\`typescript const { columnFilters, // Pass to DsTable - filterChips, // Pass to DsChipGroup + filterTags, // Pass to DsTagFilter filterNavItems, // Pass to DsVerticalTabs in modal enhancedColumns, // Pass to DsTable (includes filter functions) - handlers, // { applyFilters, clearAll, deleteChip } + handlers, // { applyFilters, clearAll, deleteTag } renderFilterContent, // Render function for modal content } = useTableFilters({ filterAdapters: workflowFilters, @@ -439,7 +439,7 @@ This story demonstrates the complete filter system with: 3. **What's Handled Automatically**: - Filter state management - - Chip generation and deletion + - Tag generation and deletion - Nav item counts (updates in real-time) - Column enhancement with filter functions - Type-safe filter values @@ -506,8 +506,8 @@ See the story code for complete implementation with styles. 1. Click the filter icon to open the modal 2. Select filters in different categories 3. Notice the nav item counts update as you make changes -4. Click "Apply" to see filtered data and chips -5. Delete individual chips or clear all filters +4. Click "Apply" to see filtered data and tags +5. Delete individual tags or clear all filters #### Adding More Filters: To add a new filter, just add one adapter to \`workflowFilters\` array. No other changes needed! @@ -517,7 +517,7 @@ To add a new filter, just add one adapter to \`workflowFilters\` array. No other }, render: function Render(args) { // useTableFilters hook orchestrates all filter logic - const { columnFilters, filterChips, filterNavItems, enhancedColumns, handlers, renderFilterContent } = + const { columnFilters, filterTags, filterNavItems, enhancedColumns, handlers, renderFilterContent } = useTableFilters({ filterAdapters: workflowFilters, baseColumns: args.columns, @@ -576,9 +576,9 @@ To add a new filter, just add one adapter to \`workflowFilters\` array. No other - {/* Filter chips (automatically generated from filter state) */} - {filterChips.length > 0 && ( - + {/* Filter tags (automatically generated from filter state) */} + {filterTags.length > 0 && ( + )} {/* Table with enhanced columns (includes filter functions) */} @@ -681,7 +681,7 @@ To add a new filter, just add one adapter to \`workflowFilters\` array. No other // 6. Apply filters await userEvent.click(screen.getByRole('button', { name: /apply/i })); - // Verify chips appear + // Verify tags appear await expect(canvas.getByText(/status: active/i)).toBeInTheDocument(); await expect(canvas.getByText(/status: running/i)).toBeInTheDocument(); await expect(canvas.getByText(/running.*0.*50/i)).toBeInTheDocument(); @@ -701,9 +701,9 @@ To add a new filter, just add one adapter to \`workflowFilters\` array. No other await userEvent.click(screen.getByRole('button', { name: /apply/i })); - // 9. Delete individual chip - const activeChip = canvas.getByRole('button', { name: /status: active/i }); - const deleteButton = within(activeChip).getByRole('button', { name: /delete/i }); + // 9. Delete individual tag + const activeTag = canvas.getByRole('button', { name: /status: active/i }); + const deleteButton = activeTag.querySelector('button[aria-label="Delete tag"]') as HTMLElement; await userEvent.click(deleteButton); await expect(canvas.queryByRole('button', { name: /status: active/i })).not.toBeInTheDocument(); @@ -736,7 +736,7 @@ This is useful for: \`\`\`typescript const [appliedFilters, setAppliedFilters] = useState({}); -const { filterChips, handlers } = useTableFilters({ +const { filterTags, handlers } = useTableFilters({ filterAdapters: workflowFilters, baseColumns: columns, appliedFilters, // External state @@ -753,7 +753,7 @@ The debug panel below shows the current filter state as JSON. // External filter state (controlled mode) const [appliedFilters, setAppliedFilters] = useState>({}); - const { columnFilters, filterChips, filterNavItems, enhancedColumns, handlers, renderFilterContent } = + const { columnFilters, filterTags, filterNavItems, enhancedColumns, handlers, renderFilterContent } = useTableFilters({ filterAdapters: workflowFilters, baseColumns: args.columns, @@ -817,8 +817,8 @@ The debug panel below shows the current filter state as JSON. - {filterChips.length > 0 && ( - + {filterTags.length > 0 && ( + )} @@ -894,7 +894,7 @@ The debug panel below shows the current filter state as JSON. // 2. Verify external state is updated (debug panel shows filter) await expect(canvas.getByText(/"status"/)).toBeInTheDocument(); - // 3. Verify chip appears + // 3. Verify tag appears await expect(canvas.getByText(/status: active/i)).toBeInTheDocument(); // 4. Clear all and verify state resets diff --git a/packages/design-system/src/components/ds-table/stories/filters-panel/workflow-filters.config.tsx b/packages/design-system/src/components/ds-table/stories/filters-panel/workflow-filters.config.tsx index 3ac723a68..9463acc39 100644 --- a/packages/design-system/src/components/ds-table/stories/filters-panel/workflow-filters.config.tsx +++ b/packages/design-system/src/components/ds-table/stories/filters-panel/workflow-filters.config.tsx @@ -6,18 +6,18 @@ * * 1. **Checkbox Filter** (statusFilterAdapter): * - Multi-select with custom rendering (status badges) - * - Custom chip labels + * - Custom tag labels * - Custom cell renderer * * 2. **Dual-Range Filter** (runningCompletedFilterAdapter): * - Multiple numeric range fields in one filter * - Number formatting - * - Automatic chip generation + * - Automatic tag generation * * 3. **Custom Filter** (lastEditedFilterAdapter): * - Complex filter with editor selection + date range * - Custom render component - * - Multiple chip types from one filter + * - Multiple tag types from one filter * - Custom cell renderer * * ## Usage Pattern: @@ -30,7 +30,7 @@ * export const workflowFilters = [myFilter, ...]; * * // 3. Use in component with useTableFilters hook - * const { columnFilters, filterChips, enhancedColumns, handlers } = + * const { columnFilters, filterTags, enhancedColumns, handlers } = * useTableFilters(workflowFilters, columns); * ``` * @@ -122,20 +122,20 @@ const renderStatusBadge = (status: DsStatus): ReactNode => { * * Demonstrates: * - Custom item rendering with DsStatusBadge - * - Custom chip label template + * - Custom tag label template * - Custom cell renderer for table column * * Features: * - Empty selection = show all (no filter applied) * - Selected items = show only those items - * - Automatic chip generation for each selected status + * - Automatic tag generation for each selected status */ const statusFilterAdapter = createCheckboxFilterAdapter({ id: 'status', label: 'Status', items: statusItems, renderer: (item) => renderStatusBadge(item.value), - chipLabelTemplate: (item) => `Status: ${item.label}`, + tagLabelTemplate: (item) => `Status: ${item.label}`, cellRenderer: (value) => renderStatusBadge(value), }); @@ -150,8 +150,8 @@ const statusFilterAdapter = createCheckboxFilterAdapter({ * Features: * - Each field can have independent from/to ranges * - All ranges must match (AND logic) - * - Automatic chip generation for each active range - * - Formatted numbers in chips + * - Automatic tag generation for each active range + * - Formatted numbers in tags */ const runningCompletedFilterAdapter = createDualRangeFilterAdapter({ id: 'runningCompleted', @@ -233,14 +233,14 @@ const parseTimestamp = (timestamp: string): Date => { * Demonstrates: * - Complex filter state (editor multi-select + time range) * - Custom filter function with multiple conditions - * - Multiple chip types from one filter + * - Multiple tag types from one filter * - Custom filter UI component * - Custom cell renderer * * Features: * - Filter by multiple editors (multi-select) * - Filter by time range (preset options + custom date range) - * - Separate chips for editors and time range + * - Separate tags for editors and time range * - Both conditions must match (AND logic) * * This is a reference implementation for building custom filters @@ -277,19 +277,17 @@ const lastEditedFilterAdapter = createFilterAdapter { - const chips = []; + toTags: (value) => { + const tags = []; - // Editor chips value.editors.forEach((editor) => { - chips.push({ + tags.push({ id: `editor-${editor}`, label: `Editor: ${editor}`, metadata: { key: 'lastEdited', type: 'editor', value: editor }, }); }); - // Time range chip if (value.timeRange) { let label = ''; switch (value.timeRange) { @@ -312,22 +310,22 @@ const lastEditedFilterAdapter = createFilterAdapter { - const { type, value: chipValue } = chip.metadata || {}; + fromTag: (tag, currentValue) => { + const { type, value: tagValue } = tag.metadata || {}; if (type === 'editor') { return { ...currentValue, - editors: currentValue.editors.filter((e) => e !== chipValue), + editors: currentValue.editors.filter((e) => e !== tagValue), }; } diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index 8c35e2937..5b3f1aa72 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -6,8 +6,6 @@ export * from './components/ds-breadcrumb'; export * from './components/ds-button'; export * from './components/ds-card'; export * from './components/ds-checkbox'; -export * from './components/ds-chip'; -export * from './components/ds-chip-group'; export * from './components/ds-comment-bubble'; export * from './components/ds-comment-card'; export * from './components/ds-comment-indicator'; diff --git a/packages/design-system/vitest.config.ts b/packages/design-system/vitest.config.ts index 825e9cb99..43ab3913b 100644 --- a/packages/design-system/vitest.config.ts +++ b/packages/design-system/vitest.config.ts @@ -21,8 +21,6 @@ export default defineConfig({ 'dist/**', // deprecated components - '**/ds-chip/**', - '**/ds-chip-group/**', '**/ds-confirmation/**', '**/ds-system-status/**', ], diff --git a/packages/eslint-plugin/src/__tests__/no-deprecated.test.ts b/packages/eslint-plugin/src/__tests__/no-deprecated.test.ts index 9a051c04a..a49a68a09 100644 --- a/packages/eslint-plugin/src/__tests__/no-deprecated.test.ts +++ b/packages/eslint-plugin/src/__tests__/no-deprecated.test.ts @@ -90,24 +90,13 @@ ruleTester.run('no-deprecated-ds-radio-group-legacy', plugin.rules['no-deprecate ], }); -ruleTester.run('no-deprecated-ds-chip', plugin.rules['no-deprecated-ds-chip'], { - valid: ['', ''], +ruleTester.run('no-deprecated-ds-date-input', plugin.rules['no-deprecated-ds-date-input'], { + valid: ['', ''], invalid: [ { - code: '', - errors: [{ message: `DsChip is deprecated. Use DsTag instead.` }], - }, - ], -}); - -ruleTester.run('no-deprecated-ds-chip-group', plugin.rules['no-deprecated-ds-chip-group'], { - valid: ['', ''], - - invalid: [ - { - code: '', - errors: [{ message: `DsChipGroup is deprecated. Use DsTagFilter instead.` }], + code: '', + errors: [{ message: `DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead.` }], }, ], }); diff --git a/packages/eslint-plugin/src/index.ts b/packages/eslint-plugin/src/index.ts index ac9fe3e4c..b84aedb0d 100644 --- a/packages/eslint-plugin/src/index.ts +++ b/packages/eslint-plugin/src/index.ts @@ -43,15 +43,9 @@ const eslintPlugin = createPlugin( }, { - name: 'no-deprecated-ds-chip', - selector: JSXElement('DsChip'), - message: `DsChip is deprecated. Use DsTag instead.`, - }, - - { - name: 'no-deprecated-ds-chip-group', - selector: JSXElement('DsChipGroup'), - message: `DsChipGroup is deprecated. Use DsTagFilter instead.`, + name: 'no-deprecated-ds-date-input', + selector: JSXElement('DsDateInput'), + message: `DsDateInput is deprecated. Use DsDatePicker or DsDateRangePicker instead.`, }, {