feat(design-system): add DsTag and DsTagFilter components [AR-41960] #88

mmurawski-dn · 2026-01-13T22:17:58Z

https://drivenets.atlassian.net/browse/AR-39465

screen-capture.1.webm

…R-41960-tags

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

…ated dom [AR-41960]

packages/design-system/src/components/ds-chip/index.tsx

...esign-system/src/components/ds-form-control/stories/ds-form-control-input-number.stories.tsx

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

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

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

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

.changeset/cyan-kids-taste.md

…R-41960-tags

...esign-system/src/components/ds-form-control/stories/ds-form-control-input-number.stories.tsx

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

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

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

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

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

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

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

StyleShit · 2026-01-15T12:57:47Z

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

+ *
+ * Measures actual element widths to determine optimal placement.
+ */
+export const useTagOverflowCalculation = ({


can the internals somehow be extracted into small functions?
to make the hook easier to read

…R-41960-tags

StyleShit · 2026-01-18T06:42:44Z

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

+export const Exclude: Story = {
+	args: {
+		label: 'Exclude Tag',
+		variant: 'exclude',


so... why do we still have a variant?

I left it as a fallback in case it appears in the app designs 🤔 Icon will always overwrite the variant. wdyt?

StyleShit · 2026-01-18T06:44:55Z

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

+	const [row2TagCount, setRow2TagCount] = useState(0);
+	const [hasOverflow, setHasOverflow] = useState(false);
+
+	const calculateLayout = useCallback(() => {


why do we need the use callback here?

One big function, with one big body. I put it in the useCallback out of habit.

edit: I will extract those

Plus, it is a dependencty for the useLayoutHook

StyleShit · 2026-01-18T06:45:10Z

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

+		function getContainerAvailableWidth() {
+			const containerRect = container.getBoundingClientRect();
+			const containerStyle = getComputedStyle(container);
+			const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+			const paddingRight = parseFloat(containerStyle.paddingRight) || 0;
+			return containerRect.width - paddingLeft - paddingRight;
+		}
+
+		function getElementMeasurements() {
+			const tags = Array.from(measurementContainer.querySelectorAll('[data-measure-tag]'));
+			const label = measurementContainer.querySelector('[data-measure-label]');
+			const clearButton = measurementContainer.querySelector('[data-measure-clear]');
+			const expandTag = measurementContainer.querySelector('[data-measure-expand]');
+
+			const computedStyle = getComputedStyle(measurementContainer);
+			const gap = parseFloat(computedStyle.gap) || 8;
+
+			const tagWidths = tags.map((tag) => tag.getBoundingClientRect().width);
+			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;
+
+			return { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap };
+		}


can these 2 functions be extracted outside (pass parameters to them if needed)?

It felt cleaner and easier to reason when everything lived inside one scope. But I can extract to separate function (2-3 arguments each)

StyleShit · 2026-01-18T06:48:23Z

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

+interface FitTagsResult {
+	count: number;
+	usedWidth: number;
+}
+
+/**
+ * Calculate how many tags fit within the available width.
+ * Pure function for easy testing.
+ */
+export function fitTagsInRow(tagWidths: number[], availableWidth: number, gap: number): FitTagsResult {
+	let usedWidth = 0;
+	let count = 0;
+
+	for (const tagWidth of tagWidths) {
+		const widthWithGap = tagWidth + (count > 0 ? gap : 0);
+		if (usedWidth + widthWithGap <= availableWidth) {
+			usedWidth += widthWithGap;
+			count++;
+		} else {
+			break;
+		}
+	}
+
+	return { count, usedWidth };
+}


maybe extract to its own file

if you're extracting other functions as well, I would check what's the actual final API that's being exposed the hook and test it

OR

maybe test the whole hook as one unit? is it gonna be difficult?

I will extract the remaining two and see how it looks like 👍

StyleShit · 2026-01-18T06:50:13Z

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

+	if (expanded) {
+		return {
+			row1TagCount,
+			row2TagCount: totalItems - row1TagCount,
+			hasOverflow: true, // Keep expand button visible to allow collapse
+		};
+	}


why this logic needs to live here?
you can do it from outside, no?

const [expanded, setExpanded] = useState(false); const { ... } = useTagOverflowCalculation( ... ); const itemsToRender = expanded ? [ ... ] : props.items;

It feels easier to follow if we return the proper count from the hook, it's its job to calculate that. We only return the count of items per row. In the ds-tag-filter we take this as an input and slice the items to receive proper items

StyleShit · 2026-01-18T06:51:34Z

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

+		return {
+			row1TagCount,
+			row2TagCount: totalItems - row1TagCount,
+			hasOverflow: true, // Keep expand button visible to allow collapse


can hasOverflow be a derived state?

It could be, but feels harder to reason about
const hasOverflow = expanded || totalItems > row1TagCount + row2TagCount;
When we set the value explicitly:

// All tags fit in Row 1, no overflow setRow1TagCount(row1Result.count); setRow2TagCount(0); setHasOverflow(false); // So, I know right away if everything fits in 1 row I expect overflow to be false

For me it feels more intuitive and intentional. I do not need to reverse the logic inside the const declaration 🤔

Performance wise it should not matter, as everything will go into one batch update, I hope 😄

…R-41960-tags

mmurawski-dn added 3 commits January 12, 2026 11:19

feat(design-system): add DsTag component [AR-41960]

d33072f

save

91a467a

measurment container

786a251

github-actions bot added the design-system label Jan 13, 2026

Merge remote-tracking branch 'drivenets/main' into drivenets/michal/A…

a03f7b7

…R-41960-tags

mmurawski-dn force-pushed the drivenets/michal/AR-41960-tags branch from ace9149 to a03f7b7 Compare January 13, 2026 22:19

github-actions bot added the dependencies label Jan 13, 2026

mmurawski-dn force-pushed the drivenets/michal/AR-41960-tags branch 4 times, most recently from 078be28 to 8868ab0 Compare January 13, 2026 22:58

mmurawski-dn marked this pull request as ready for review January 14, 2026 08:30

mmurawski-dn force-pushed the drivenets/michal/AR-41960-tags branch from 8868ab0 to c210e18 Compare January 14, 2026 08:32

mmurawski-dn commented Jan 14, 2026

View reviewed changes

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

feat(design-system): put measurment wrapper in portal to avoid duplic…

49cffd1

…ated dom [AR-41960]

mmurawski-dn force-pushed the drivenets/michal/AR-41960-tags branch from c210e18 to 49cffd1 Compare January 14, 2026 08:44

StyleShit requested changes Jan 14, 2026

View reviewed changes

vpolessky-dn previously approved these changes Jan 14, 2026

View reviewed changes

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

a7f2606

mmurawski-dn dismissed vpolessky-dn’s stale review via a7f2606 January 15, 2026 11:03

github-actions bot added the eslint-plugin label Jan 15, 2026

Merge remote-tracking branch 'drivenets/main' into drivenets/michal/A…

b37606c

…R-41960-tags

StyleShit requested changes Jan 15, 2026

View reviewed changes

mmurawski-dn added 3 commits January 15, 2026 21:20

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

004cc38

Merge remote-tracking branch 'drivenets/main' into drivenets/michal/A…

9961342

…R-41960-tags

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

14142e0

StyleShit requested changes Jan 18, 2026

View reviewed changes

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

5e3e932

github-actions bot added the tooling label Jan 19, 2026

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

084538f

Merge remote-tracking branch 'drivenets/main' into drivenets/michal/A…

e2c0f3a

…R-41960-tags

feat(design-system): add DsTag and DsTagFilter components [AR-41960] #88

Are you sure you want to change the base?

feat(design-system): add DsTag and DsTagFilter components [AR-41960] #88

Uh oh!

Conversation

mmurawski-dn commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mmurawski-dn Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mmurawski-dn Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mmurawski-dn commented Jan 13, 2026 •

edited

Loading

mmurawski-dn Jan 19, 2026 •

edited

Loading

mmurawski-dn Jan 19, 2026 •

edited

Loading