From a44ef4b58a425b01b201e7036279d869282b7990 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 9 Dec 2025 15:36:20 +0100
Subject: [PATCH 1/4] add better tag examples

---
 .../stories/OverviewItem.stories.tsx          | 25 +++++++++++++++++++
 .../stories/OverviewItemActions.stories.tsx   |  4 +--
 .../OverviewItemDescription.stories.tsx       |  2 +-
 .../stories/OverviewItemLine.stories.tsx      |  2 +-
 .../Tag/stories/TagList.stories.tsx           |  4 +--
 5 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/OverviewItem/stories/OverviewItem.stories.tsx b/src/components/OverviewItem/stories/OverviewItem.stories.tsx
index 6f1b582e8..c91dc5b41 100644
--- a/src/components/OverviewItem/stories/OverviewItem.stories.tsx
+++ b/src/components/OverviewItem/stories/OverviewItem.stories.tsx
@@ -10,11 +10,15 @@ import {
     OverviewItemActions,
     OverviewItemDepiction,
     OverviewItemDescription,
+    OverviewItemLine,
+    Tag,
+    TagList,
 } from "./../../../../index";
 import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories";
 import { Default as ActionsExample } from "./OverviewItemActions.stories";
 import { AutoTransform as DepictionExample } from "./OverviewItemDepiction.stories";
 import { Default as DescriptionExample } from "./OverviewItemDescription.stories";
+import { Default as LineExample } from "./OverviewItemLine.stories";
 
 export default {
     title: "Components/OverviewItem",
@@ -76,3 +80,24 @@ ItemWithDepictionElement.args = {
     hasSpacing: true,
     hasCardWrapper: true,
 };
+
+export const ItemWithTags = Template.bind({});
+ItemWithTags.args = {
+    children: [
+        <OverviewItemDepiction {...DepictionExample.args} key={"depiction"} />,
+        <OverviewItemDescription key={"description"}>
+            <OverviewItemLine {...LineExample.args} />
+            <OverviewItemLine>
+                <TagList>
+                    <Tag small>Test</Tag>
+                    <Tag small>Tag</Tag>
+                    <Tag small>List</Tag>
+                </TagList>
+            </OverviewItemLine>
+        </OverviewItemDescription>,
+        <OverviewItemActions children={ActionsExample.args.children[0]} key={"actions"} />,
+    ],
+    densityHigh: false,
+    hasSpacing: true,
+    hasCardWrapper: true,
+};
diff --git a/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx b/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx
index 5420d7798..2cfef4478 100644
--- a/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx
+++ b/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx
@@ -9,7 +9,7 @@ export default {
     subcomponents: { Button, IconButton, ContextMenu },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "User-interactive elements.",
         },
     },
@@ -20,7 +20,7 @@ const Template: StoryFn<typeof OverviewItemActions> = (args) => <OverviewItemAct
 export const Default = Template.bind({});
 Default.args = {
     children: [
-        <IconButton name="item-remove" tooltip="Remove this item" disruptive />,
+        <IconButton name="item-remove" text="Remove this item" disruptive />,
         <Button affirmative>Other action</Button>,
     ],
 };
diff --git a/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx b/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx
index 82d501754..6d1d98fa6 100644
--- a/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx
+++ b/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx
@@ -12,7 +12,7 @@ export default {
     },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Elements for text content.",
         },
     },
diff --git a/src/components/OverviewItem/stories/OverviewItemLine.stories.tsx b/src/components/OverviewItem/stories/OverviewItemLine.stories.tsx
index 9b3efe6ed..f0f4a59f2 100644
--- a/src/components/OverviewItem/stories/OverviewItemLine.stories.tsx
+++ b/src/components/OverviewItem/stories/OverviewItemLine.stories.tsx
@@ -9,7 +9,7 @@ export default {
     component: OverviewItemLine,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Elements for line content.",
         },
     },
diff --git a/src/components/Tag/stories/TagList.stories.tsx b/src/components/Tag/stories/TagList.stories.tsx
index eaa0d8c15..27221c360 100644
--- a/src/components/Tag/stories/TagList.stories.tsx
+++ b/src/components/Tag/stories/TagList.stories.tsx
@@ -8,7 +8,7 @@ export default {
     component: TagList,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof TagList>;
@@ -18,5 +18,5 @@ const Template: StoryFn<typeof TagList> = (args) => <TagList {...args} />;
 export const List = Template.bind({});
 List.args = {
     label: "Tag list",
-    children: [<Tag>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag>Tags</Tag>],
+    children: [<Tag small>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag large>Tags</Tag>],
 };

From 4c46c6808b1db69591abc668a5add64bbf21a70d Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 9 Dec 2025 16:07:24 +0100
Subject: [PATCH 2/4] improve calculation of border color, reducing impact

---
 src/components/Tag/tag.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Tag/tag.scss b/src/components/Tag/tag.scss
index 49e3dd222..f17de80b3 100644
--- a/src/components/Tag/tag.scss
+++ b/src/components/Tag/tag.scss
@@ -151,7 +151,7 @@ $tag-round-adjustment: 0 !default;
             var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
             eccgui-color-var("identity", "background", "100")
         );
-        border-color: var(--eccgui-tag-border);
+        border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
         &.#{$eccgui}-tag--strongeremphasis {
             --eccgui-tag-emfactor: 95%;
@@ -211,7 +211,7 @@ $tag-round-adjustment: 0 !default;
                 var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
                 eccgui-color-var("identity", "background", "100")
             );
-            border-color: var(--eccgui-tag-border);
+            border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
             &.#{$eccgui}-tag--strongeremphasis {
                 --eccgui-tag-emfactor: 100%;
@@ -231,7 +231,7 @@ $tag-round-adjustment: 0 !default;
 
             &[class*="#{$eccgui}-intent--"] {
                 color: eccgui-color-rgba(var(--eccgui-tag-text), var(--eccgui-tag-emfactor));
-                border-color: eccgui-color-rgba(var(--eccgui-tag-border), var(--eccgui-tag-emfactor));
+                border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
             }
 
             &.#{$eccgui}-intent--primary {

From eecb823aabb212653a0ee50ea34f941611999dad Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 9 Dec 2025 16:44:13 +0100
Subject: [PATCH 3/4] create more whitespace in small tags

---
 .../stories/OverviewItem.stories.tsx             | 15 +++++++++------
 src/components/Tag/tag.scss                      | 16 ++++++++++------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/OverviewItem/stories/OverviewItem.stories.tsx b/src/components/OverviewItem/stories/OverviewItem.stories.tsx
index c91dc5b41..7e0637486 100644
--- a/src/components/OverviewItem/stories/OverviewItem.stories.tsx
+++ b/src/components/OverviewItem/stories/OverviewItem.stories.tsx
@@ -6,6 +6,7 @@ import {
     Badge,
     Card,
     Depiction,
+    OverflowText,
     OverviewItem,
     OverviewItemActions,
     OverviewItemDepiction,
@@ -87,12 +88,14 @@ ItemWithTags.args = {
         <OverviewItemDepiction {...DepictionExample.args} key={"depiction"} />,
         <OverviewItemDescription key={"description"}>
             <OverviewItemLine {...LineExample.args} />
-            <OverviewItemLine>
-                <TagList>
-                    <Tag small>Test</Tag>
-                    <Tag small>Tag</Tag>
-                    <Tag small>List</Tag>
-                </TagList>
+            <OverviewItemLine small>
+                <OverflowText>
+                    <TagList>
+                        <Tag small>Test</Tag>
+                        <Tag small>Tag</Tag>
+                        <Tag small>List</Tag>
+                    </TagList>
+                </OverflowText>
             </OverviewItemLine>
         </OverviewItemDescription>,
         <OverviewItemActions children={ActionsExample.args.children[0]} key={"actions"} />,
diff --git a/src/components/Tag/tag.scss b/src/components/Tag/tag.scss
index f17de80b3..8abfb2e12 100644
--- a/src/components/Tag/tag.scss
+++ b/src/components/Tag/tag.scss
@@ -30,12 +30,15 @@ $tag-round-adjustment: 0 !default;
 @import "~@blueprintjs/core/src/components/tag/tag";
 
 .#{$eccgui}-tag__item {
+    --eccgui-tag-border-width: 1px;
+
     flex-grow: 0;
     flex-shrink: 0;
     min-width: calc(#{$tag-height} - 2px);
     min-height: calc(#{$tag-height} - 2px);
     max-height: calc(#{$tag-height} - 2px);
     padding: 0 $tag-padding-top;
+    line-height: calc(#{$tag-height} - 2px);
 
     &.#{$ns}-round {
         border-radius: $tag-height * 0.5;
@@ -55,11 +58,12 @@ $tag-round-adjustment: 0 !default;
     }
 
     &.#{$eccgui}-tag--small {
-        min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        min-width: calc(#{$tag-height-small} + #{$tag-padding-small});
+        min-height: calc(#{$tag-height-small} + #{$tag-padding-small});
+        max-height: calc(#{$tag-height-small} + #{$tag-padding-small});
         padding: 0 $tag-padding-small;
-        line-height: calc(#{$tag-height-small} - 2px);
+        font-size: calc(#{$eccgui-size-typo-tag} - 1px);
+        line-height: calc(#{$tag-height-small} + #{$tag-padding-small});
 
         &.#{$ns}-round {
             border-radius: $tag-height-small * 0.5;
@@ -75,7 +79,7 @@ $tag-round-adjustment: 0 !default;
         min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         font-size: $eccgui-size-typo-tag-large;
-        line-height: calc(#{$tag-height-large} - 2px);
+        line-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
 
         &.#{$ns}-round {
             border-radius: $tag-height-large * 0.5;
@@ -138,7 +142,7 @@ $tag-round-adjustment: 0 !default;
 
 .#{$ns}-tag {
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--eccgui-tag-border-width);
 
     &:not([class*="#{$ns}-intent-"]) {
         --eccgui-tag-bg: #{$tag-default-color};

From 83d3347b4a8eebc85b8443c3cbb9e852ea8f7790 Mon Sep 17 00:00:00 2001
From: Michael Haschke <michael.haschke@eccenca.com>
Date: Tue, 9 Dec 2025 17:31:21 +0100
Subject: [PATCH 4/4] update changelog

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bdaf6182e..e4a8cf671 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<ApplicationViewability />`
     -   component for hiding elements in specific media
 
+### Fixed
+
+-   `<Tag />`
+    -   create more whitespace inside `small` tag
+    -   reduce visual impact of border
+
 ### Changed
 
 -   automatically hide user interaction elements in print view