Add noMargin prop to Tag component

documentation-site/components/yard/config/tag.ts

@@ -169,6 +169,12 @@ const TagConfig: TConfig = {
       type: PropTypes.Function,
       description: `A component rendered at the start of the tag.`,
     },
+    noMargin: {
+      value: false,
+      defaultValue: false,
+      type: PropTypes.Boolean,
+      description: `Removes the Tag's default margin. Useful when composing tags in a custom layout.`,
+    },
     overrides: {
       value: undefined,
       type: PropTypes.Custom,

documentation-site/examples/tag/no-margin.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Tag } from "baseui/tag";
+
+export default function Example() {
+  return (
+    <div style={{ display: "flex" }}>
+      <Tag noMargin>no margin</Tag>
+      <Tag noMargin>no margin</Tag>
+    </div>
+  );
+}

documentation-site/pages/components/tag.mdx

@@ -12,6 +12,7 @@ import Disabled from "examples/tag/disabled.tsx";
 import NonCloseable from "examples/tag/non-closeable.tsx";
 import ClickableNonCloseable from "examples/tag/clickable-non-closeable.tsx";
 import CustomColor from "examples/tag/custom-color.tsx";
+import NoMargin from "examples/tag/no-margin.tsx";
 
 import { Tag } from "baseui/tag";
 import * as TagExports from "baseui/tag";
@@ -97,6 +98,12 @@ You can change the color of the tag by passing a value to the `kind` prop. Suppo
   <CustomColor />
 </Example>
 
+Tag has a default margin so that adjacent tags are spaced out automatically. Set `noMargin` to remove it, for example when composing tags in a custom layout or flex container.
+
+<Example title="Tag with no margin" path="tag/no-margin.tsx">
+  <NoMargin />
+</Example>
+
 ## Accessibility
 
 - When the tag is closable or clickable and not disabled it gets the role button and is focusable.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "18.1.0",
+  "version": "18.2.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

src/tag-group/tag-group.tsx

@@ -35,7 +35,7 @@
         }
 
         return React.cloneElement(child, {
           hierarchy,
           size,
           // All tags in tag group are display only
           onActionClick: undefined,
@@ -43,11 +43,11 @@
           onClick: undefined,
           onKeyDown: undefined,
           closeable: false,
+          // Single Tag has default margin, reset it to 0 in TagGroup
+          noMargin: true,
           overrides: {
             Root: {
               style: {
-                // Single Tag has default margin, reset it to 0 in TagGroup
-                margin: 0,
                 ...(wrap ? { maxWidth: '100%' } : {}), // ensure wrapping works correctly even if Tag itself has a custom maxWidth(Tag has a default maxWidth 128px on Text inside)
                 ...child.props.overrides?.Root?.style,
               },

src/tag/__tests__/tag.test.tsx

@@ -55,6 +55,20 @@ describe('Tag', () => {
     expect(actionClickMock.mock.calls.length).toBe(1);
   });
 
+  it('removes default margin when noMargin is set', () => {
+    const { container } = render(
+      <Tag noMargin overrides={{ Root: { props: { 'data-testid': 'root' } } }}>
+        content
+      </Tag>
+    );
+    const root = getByTestId(container, 'root');
+    const style = getComputedStyle(root);
+    expect(style.marginTop).toBe('0px');
+    expect(style.marginBottom).toBe('0px');
+    expect(style.marginLeft).toBe('0px');
+    expect(style.marginRight).toBe('0px');
+  });
+
   it('passes flow check with tag enum', function () {
     // https://github.com/uber/baseweb/issues/1910
     // eslint-disable-next-line no-unused-vars

src/tag/styled-components.ts

@@ -387,6 +387,7 @@ export const Root = styled<'span', SharedPropsArg>(
       $isFocusVisible,
       $color,
       $size = SIZE.small,
+      $noMargin,
     } = props;
     const borderRadius =
       $size === SIZE.small || $size === SIZE.xSmall
@@ -459,10 +460,10 @@ export const Root = styled<'span', SharedPropsArg>(
         [SIZE.large]: '40px',
       }[$size],
       justifyContent: 'space-between',
-      marginTop: '5px',
-      marginBottom: '5px',
-      marginLeft: '5px',
-      marginRight: '5px',
+      marginTop: $noMargin ? 0 : '5px',
+      marginBottom: $noMargin ? 0 : '5px',
+      marginLeft: $noMargin ? 0 : '5px',
+      marginRight: $noMargin ? 0 : '5px',
       paddingTop: paddingLongitude,
       paddingBottom: paddingLongitude,
       paddingLeft: paddingMagnitude,

src/tag/tag.tsx

@@ -36,6 +36,7 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {
     isFocused = false,
     isHovered = false,
     kind = KIND.gray,
+    noMargin = false,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActionClick = (event) => {},
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -118,6 +119,7 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {
     $hierarchy: hierarchy,
     $isFocusVisible: focusVisible,
     $size: size,
+    $noMargin: noMargin,
   };
   const titleText = title || getTextFromChildren(children);
   const isButton = (clickable || closeable) && !disabled;

src/tag/types.ts

@@ -57,6 +57,8 @@ export type TagProps = {
   size?: TagSize;
   startEnhancer?: React.ComponentType<{ size?: number | string }>;
   contentMaxWidth?: string | null;
+  /** Removes the Tag's default margin. Useful when composing tags in a custom layout. */
+  noMargin?: boolean;
 };
 
 export type SharedPropsArg = {
@@ -72,4 +74,5 @@ export type SharedPropsArg = {
   $isFocusVisible?: boolean;
   $size?: string;
   $contentMaxWidth?: string | null;
+  $noMargin?: boolean;
 };