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 {