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
- ``
- component for hiding elements in specific media
+### Fixed
+
+- ``
+ - create more whitespace inside `small` tag
+ - reduce visual impact of border
+
### Changed
- automatically hide user interaction elements in print view
diff --git a/src/components/OverviewItem/stories/OverviewItem.stories.tsx b/src/components/OverviewItem/stories/OverviewItem.stories.tsx
index 6f1b582e8..7e0637486 100644
--- a/src/components/OverviewItem/stories/OverviewItem.stories.tsx
+++ b/src/components/OverviewItem/stories/OverviewItem.stories.tsx
@@ -6,15 +6,20 @@ import {
Badge,
Card,
Depiction,
+ OverflowText,
OverviewItem,
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 +81,26 @@ ItemWithDepictionElement.args = {
hasSpacing: true,
hasCardWrapper: true,
};
+
+export const ItemWithTags = Template.bind({});
+ItemWithTags.args = {
+ children: [
+ ,
+
+
+
+
+
+ Test
+ Tag
+ List
+
+
+
+ ,
+ ,
+ ],
+ 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 = (args) => ,
+ ,
,
],
};
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;
@@ -18,5 +18,5 @@ const Template: StoryFn = (args) => ;
export const List = Template.bind({});
List.args = {
label: "Tag list",
- children: [Short, List, Of, Tags],
+ children: [Short, List, Of, Tags],
};
diff --git a/src/components/Tag/tag.scss b/src/components/Tag/tag.scss
index 49e3dd222..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};
@@ -151,7 +155,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 +215,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 +235,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 {