feat(design-system): CR changes [AR-41960]

Author: mmurawski-dn

.changeset/odd-hats-shine.md

@@ -0,0 +1,6 @@
+---
+'@drivenets/eslint-plugin-design-system': patch
+---
+
+- Add depracation rule for `DsChip`
+- Add deprecation rule for `DsChipGroup`

packages/design-system/src/components/ds-chip-group/index.ts

@@ -1,10 +1,3 @@
-/**
- * @deprecated DsChipGroup is deprecated. Use DsTagFilter instead.
- * @see {@link ../ds-tag-filter} for the replacement component.
- */
 export { default as DsChipGroup } from './ds-chip-group';
-/**
- * @deprecated These types are deprecated. Use DsTagFilter types instead.
- * @see {@link ../ds-tag-filter} for the replacement types.
- */
+
 export type { DsChipGroupProps, ChipItem } from './ds-chip-group.types';

packages/design-system/src/components/ds-tag-filter/ds-tag-filter.module.scss

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-xs);
-
 	padding: var(--spacing-xs) var(--spacing-standard);
 	background: var(--color-background-selected-weak);
 	border: 1px solid var(--color-outline-weak);
@@ -60,13 +59,14 @@
 // Hidden container for measuring element widths
 // Must render all elements to get accurate measurements
 .measurementContainer {
-	position: absolute;
-	visibility: hidden;
 	pointer-events: none;
 	display: flex;
 	align-items: center;
 	gap: var(--spacing-xs);
+
 	// Ensure it doesn't affect layout
 	height: 0;
 	overflow: hidden;
+	position: absolute;
+	visibility: hidden;
 }

packages/design-system/src/components/ds-tag-filter/ds-tag-filter.stories.tsx

@@ -392,8 +392,8 @@ export const CustomLocale: Story = {
 			<DsTagFilter
 				items={filters}
 				locale={{
-					label: 'Active criteria:',
-					clearButton: 'Reset all',
+					label: 'Aktywne filtry:',
+					clearButton: 'Zresetuj',
 				}}
 				onClearAll={handleClearAll}
 				onItemDelete={handleFilterDelete}
@@ -409,9 +409,9 @@ export const CustomLocale: Story = {
 		});
 
 		// Verify custom label is rendered
-		await expect(canvas.getByText('Active criteria:')).toBeInTheDocument();
+		await expect(canvas.getByText('Aktywne filtry:')).toBeInTheDocument();
 
-		await expect(canvas.getByRole('button', { name: /Reset all/ })).toBeInTheDocument();
+		await expect(canvas.getByRole('button', { name: /Zresetuj/ })).toBeInTheDocument();
 
 		await expect(canvas.queryByText('Filtered by:')).not.toBeInTheDocument();
 		await expect(canvas.queryByRole('button', { name: /Clear all filters/ })).not.toBeInTheDocument();

packages/design-system/src/components/ds-tag-filter/ds-tag-filter.tsx

@@ -1,8 +1,8 @@
-import { useState, useRef, useMemo } from 'react';
+import { useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import styles from './ds-tag-filter.module.scss';
-import type { DsTagFilterProps } from './ds-tag-filter.types';
+import type { DsTagFilterProps, TagFilterItem } from './ds-tag-filter.types';
 import { useTagOverflowCalculation } from './hooks/use-tag-overflow-calculation';
 import { DsTypography } from '../ds-typography';
 import { DsTag } from '../ds-tag';
@@ -36,20 +36,18 @@ const DsTagFilter = ({
 		expanded,
 	});
 
-	const { label = 'Filtered by:', clearButton = 'Clear all filters' } = locale;
+	const {
+		label = 'Filtered by:',
+		clearButton = 'Clear all filters',
+		hiddenCountPlural = 'filters',
+		hiddenCountSingular = 'filter',
+		collapseTagLabel = 'Collapse',
+	} = locale;
 
 	// Split items into row sections
-	const { row1Tags, row2Tags, hiddenTags } = useMemo(() => {
-		const row1Tags = items.slice(0, row1TagCount);
-		const row2Tags = items.slice(row1TagCount, row1TagCount + row2TagCount);
-		const hiddenTags = expanded ? [] : items.slice(row1TagCount + row2TagCount);
-
-		return {
-			row1Tags,
-			row2Tags,
-			hiddenTags,
-		};
-	}, [expanded, items, row1TagCount, row2TagCount]);
+	const row1Tags = items.slice(0, row1TagCount);
+	const row2Tags = items.slice(row1TagCount, row1TagCount + row2TagCount);
+	const hiddenTags = expanded ? [] : items.slice(row1TagCount + row2TagCount);
 
 	if (items.length === 0) {
 		return null;
@@ -58,24 +56,30 @@ const DsTagFilter = ({
 	const hiddenCount = hiddenTags.length;
 	const hasRow2Content = row2Tags.length > 0 || hasOverflow;
 
-	const renderTag = (item: (typeof items)[0]) => (
-		<DsTag
-			key={item.id}
-			label={item.label}
-			selected={item.selected}
-			onClick={onItemSelect ? () => onItemSelect(item) : undefined}
-			onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
-		/>
-	);
+	const renderTag = (item: TagFilterItem) => {
+		const tagProps = item.tagProps || {};
+
+		return (
+			<DsTag
+				{...tagProps}
+				key={item.id}
+				label={item.label}
+				selected={item.selected}
+				onClick={onItemSelect ? () => onItemSelect(item) : undefined}
+				onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
+			/>
+		);
+	};
 
 	const handleExpandToggle = () => {
 		const newExpanded = !expanded;
 		setExpanded(newExpanded);
 		onExpand?.(newExpanded);
 	};
 
-	// Measurement container rendered via portal to keep it outside component's DOM tree
+	// Measurement container rendered via portal to keep it outside the component's DOM tree
 	// This prevents Testing Library from finding duplicate elements
+	// We use it to calculate the number of remaining tags to render
 	const measurementContainer = (
 		<div ref={measurementRef} className={styles.measurementContainer} aria-hidden="true">
 			{label && (
@@ -86,36 +90,38 @@ const DsTagFilter = ({
 				</span>
 			)}
 			{items.map((item) => (
-				<span key={item.id} data-measure-tag="">
-					<DsTag
-						label={item.label}
-						selected={item.selected}
-						onClick={onItemSelect ? () => onItemSelect(item) : undefined}
-						onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
-					/>
-				</span>
+				<DsTag
+					key={item.id}
+					data-measure-tag=""
+					label={item.label}
+					selected={item.selected}
+					onClick={onItemSelect ? () => onItemSelect(item) : undefined}
+					onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
+				/>
 			))}
 			{onClearAll && (
-				<span data-measure-clear="">
-					<DsButton
-						design="v1.2"
-						buttonType="tertiary"
-						variant="ghost"
-						className={styles.clearButton}
-						contentClassName={styles.clearContent}
-						size="small"
-					>
-						<DsIcon icon="close" />
-						{clearButton}
-					</DsButton>
-				</span>
+				<DsButton
+					data-measure-clear=""
+					design="v1.2"
+					buttonType="tertiary"
+					variant="ghost"
+					className={styles.clearButton}
+					contentClassName={styles.clearContent}
+					size="small"
+				>
+					<DsIcon icon="close" />
+					{clearButton}
+				</DsButton>
 			)}
-			<span data-measure-expand="">
-				<DsTag label="+99 filters" className={styles.expandTag} />
-			</span>
+			<DsTag data-measure-expand="" label="+99 filters" className={styles.expandTag} />
 		</div>
 	);
 
+	/**
+	 * IMPORTANT!
+	 * If you make any changes to this layout (styling, JSX, anything that affects it.)
+	 * Please, apply the exact same changes to the "measurementContainer"
+	 */
 	return (
 		<>
 			<div
@@ -153,8 +159,8 @@ const DsTagFilter = ({
 							<DsTag
 								label={
 									expanded
-										? 'Collapse'
-										: `+${String(hiddenCount)} ${hiddenCount === 1 ? 'filter' : 'filters'}`
+										? collapseTagLabel
+										: `+${String(hiddenCount)} ${hiddenCount === 1 ? hiddenCountSingular : hiddenCountPlural}`
 								}
 								selected={expanded}
 								className={styles.expandTag}

packages/design-system/src/components/ds-tag-filter/ds-tag-filter.types.ts

@@ -1,4 +1,5 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties } from 'react';
+import type { DsTagProps } from '../ds-tag';
 
 export interface TagFilterItem {
 	/**
@@ -17,20 +18,26 @@ export interface TagFilterItem {
 	 * Whether the tag is selected/checked
 	 */
 	selected?: boolean;
+	/**
+	 * Additional props to pass to the tag component
+	 */
+	tagProps?: Partial<DsTagProps>;
 }
 
 export interface DsTagFilterProps {
 	/**
 	 * Array of tag items to display
 	 */
 	items: TagFilterItem[];
-
 	/**
-	 * Represents locale-specific options
+	 * Locale object (you can pass custom strings for localization)
 	 */
 	locale?: {
-		label?: ReactNode;
-		clearButton?: ReactNode;
+		label?: string;
+		clearButton?: string;
+		collapseTagLabel?: string;
+		hiddenCountSingular?: string;
+		hiddenCountPlural?: string;
 	};
 	/**
 	 * Callback when "Clear all" is clicked

packages/design-system/src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts

@@ -1,4 +1,4 @@
-import { type RefObject, useLayoutEffect, useState, useCallback } from 'react';
+import { type RefObject, useCallback, useLayoutEffect, useState } from 'react';
 
 interface UseTagOverflowCalculationProps {
 	containerRef: RefObject<HTMLDivElement | null>;
@@ -11,7 +11,6 @@ interface UseTagOverflowCalculationResult {
 	row1TagCount: number;
 	row2TagCount: number;
 	hasOverflow: boolean;
-	isCalculating: boolean;
 }
 
 // Extra space needed per row for animated delete button that appears on hover
@@ -34,7 +33,6 @@ export const useTagOverflowCalculation = ({
 	const [row1TagCount, setRow1TagCount] = useState(0);
 	const [row2TagCount, setRow2TagCount] = useState(0);
 	const [hasOverflow, setHasOverflow] = useState(false);
-	const [isCalculating, setIsCalculating] = useState(true);
 
 	const calculateLayout = useCallback(() => {
 		if (!containerRef.current || !measurementRef.current) {
@@ -54,7 +52,6 @@ export const useTagOverflowCalculation = ({
 			setRow1TagCount(0);
 			setRow2TagCount(0);
 			setHasOverflow(false);
-			setIsCalculating(false);
 			return;
 		}
 
@@ -65,17 +62,14 @@ export const useTagOverflowCalculation = ({
 		const paddingRight = parseFloat(containerStyle.paddingRight) || 0;
 		const containerWidth = containerRect.width - paddingLeft - paddingRight;
 
-		// Get computed gap from CSS
 		const computedStyle = getComputedStyle(measurementContainer);
 		const gap = parseFloat(computedStyle.gap) || 8;
 
-		// Measure fixed elements
 		const labelWidth = label ? label.getBoundingClientRect().width + gap : 0;
 		const clearButtonWidth = clearButton ? clearButton.getBoundingClientRect().width + gap : 0;
 		// Fallback width for expand tag (~100px for "+99 filters" text) if measurement fails
 		const expandTagWidth = expandTag ? expandTag.getBoundingClientRect().width + gap : 100;
 
-		// Measure all tag widths
 		const tagWidths = tags.map((tag) => tag.getBoundingClientRect().width);
 
 		// Calculate Row 1 available space (Label + Tags + Clear Button)
@@ -103,7 +97,6 @@ export const useTagOverflowCalculation = ({
 			setRow1TagCount(row1Count);
 			setRow2TagCount(0);
 			setHasOverflow(false);
-			setIsCalculating(false);
 			return;
 		}
 
@@ -157,13 +150,9 @@ export const useTagOverflowCalculation = ({
 				setHasOverflow(false);
 			}
 		}
-
-		setIsCalculating(false);
 	}, [containerRef, measurementRef]);
 
 	useLayoutEffect(() => {
-		setIsCalculating(true);
-
 		// Use requestAnimationFrame to ensure DOM is fully laid out
 		const rafId = requestAnimationFrame(() => {
 			calculateLayout();
@@ -191,14 +180,12 @@ export const useTagOverflowCalculation = ({
 			row1TagCount,
 			row2TagCount: totalItems - row1TagCount,
 			hasOverflow: true, // Keep expand button visible to allow collapse
-			isCalculating,
 		};
 	}
 
 	return {
 		row1TagCount,
 		row2TagCount,
 		hasOverflow,
-		isCalculating,
 	};
 };

packages/design-system/src/components/ds-tag/ds-tag.stories.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-
 import DsTag from './ds-tag';
 import { tagSizes, tagVariants } from './ds-tag.types';