feat(Tag): implement short tag size (#7619)

* feat(Tag): support short tag

* docs(Tag): add size knob

* feat(Tag): add short tag skeleton

* chore: update snapshots

* fix(tag): restore line-height

* refactor(tag): remove unused styles

* refactor(Tag): rename small size

* chore: update snapshots

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: emyarod

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;

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 {

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 = () => (
   <div>
     <TagSkeleton />
+    <TagSkeleton size="sm" />
   </div>
 );
 

packages/react/src/components/Tag/Tag.Skeleton.js

@@ -12,10 +12,12 @@ import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
-function TagSkeleton({ className, ...rest }) {
+function TagSkeleton({ className, size, ...rest }) {
   return (
     <span
-      className={cx(`${prefix}--tag`, `${prefix}--skeleton`, className)}
+      className={cx(`${prefix}--tag`, `${prefix}--skeleton`, className, {
+        [`${prefix}--tag--${size}`]: size,
+      })}
       {...rest}
     />
   );
@@ -26,6 +28,12 @@ TagSkeleton.propTypes = {
    * Specify an optional className to add.
    */
   className: PropTypes.string,
+
+  /**
+   * Specify the size of the Tag. Currently supports either `sm` or
+   * default sizes.
+   */
+  size: PropTypes.oneOf(['sm']),
 };
 
 export default TagSkeleton;

packages/react/src/components/Tag/Tag.js

@@ -38,12 +38,14 @@ const Tag = ({
   title,
   disabled,
   onClose,
+  size,
   ...other
 }) => {
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = classNames(`${prefix}--tag`, className, {
     [`${prefix}--tag--disabled`]: disabled,
     [`${prefix}--tag--filter`]: filter,
+    [`${prefix}--tag--${size}`]: size,
     [`${prefix}--tag--${type}`]: type,
   });
   const handleClose = (event) => {
@@ -131,6 +133,12 @@ Tag.propTypes = {
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
+  /**
+   * Specify the size of the Tag. Currently supports either `sm` or
+   * default sizes.
+   */
+  size: PropTypes.oneOf(['sm']),
+
   /**
    * Text to show on clear filters
    */