diff --git a/packages/components/src/components/tag/_tag.scss b/packages/components/src/components/tag/_tag.scss index 08e2ceff7eef..7e5393b3893e 100644 --- a/packages/components/src/components/tag/_tag.scss +++ b/packages/components/src/components/tag/_tag.scss @@ -33,7 +33,7 @@ min-width: rem(32px); // restricts size of contained elements max-width: 100%; - min-height: 1.5rem; + min-height: rem(24px); margin: $carbon--spacing-02; padding: $carbon--spacing-02 $carbon--spacing-03; word-break: break-word; @@ -218,6 +218,16 @@ fill: $disabled-02; } + // small tags + .#{$prefix}--tag--sm { + min-height: rem(18px); + padding: 0 $carbon--spacing-03; + } + + .#{$prefix}--tag--sm.#{$prefix}--tag--filter { + padding-right: rem(2px); + } + // Skeleton state .#{$prefix}--tag.#{$prefix}--skeleton { @include skeleton; diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 872455c87fe6..18d12911597d 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -5181,6 +5181,14 @@ Map { ], "type": "oneOfType", }, + "size": Object { + "args": Array [ + Array [ + "sm", + ], + ], + "type": "oneOf", + }, "title": Object { "type": "string", }, @@ -6587,6 +6595,14 @@ Map { "className": Object { "type": "string", }, + "size": Object { + "args": Array [ + Array [ + "sm", + ], + ], + "type": "oneOf", + }, }, }, "TextAreaSkeleton" => Object { diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js index 3bcbbb7e15e8..5c405db816b2 100644 --- a/packages/react/src/components/Tag/Tag-story.js +++ b/packages/react/src/components/Tag/Tag-story.js @@ -25,6 +25,11 @@ const iconMap = { Tag16, }; +const sizes = { + 'Default size': undefined, + 'Small size (sm)': 'sm', +}; + const props = { regular: () => ({ type: select( @@ -40,6 +45,7 @@ const props = { ) ), disabled: boolean('Disabled (disabled)', false), + size: select('Field size (size)', sizes, undefined) || undefined, title: text('Title (title)', 'Clear Filter'), }), filter() { @@ -123,6 +129,7 @@ CustomIcon.parameters = { export const Skeleton = () => (