baseui 18.1.0 → 18.2.0

package/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",

package/tag/styled-components.js

@@ -351,7 +351,8 @@ const Root = exports.Root = (0, _styles.styled)('span', props => {
     $closeable,
     $isFocusVisible,
     $color,
-    $size = _constants.SIZE.small
+    $size = _constants.SIZE.small,
+    $noMargin
   } = props;
   const borderRadius = $size === _constants.SIZE.small || $size === _constants.SIZE.xSmall ? $theme.borders.radius200 : $theme.borders.radius300;
   const paddingMagnitude = {
@@ -418,10 +419,10 @@ const Root = exports.Root = (0, _styles.styled)('span', props => {
       [_constants.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,

package/tag/tag.js

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

package/tag/types.d.ts

@@ -75,6 +75,8 @@ export type TagProps = {
         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 = {
     $clickable?: boolean;
@@ -89,4 +91,5 @@ export type SharedPropsArg = {
     $isFocusVisible?: boolean;
     $size?: string;
     $contentMaxWidth?: string | null;
+    $noMargin?: boolean;
 };

package/tag-group/tag-group.js

@@ -42,11 +42,11 @@ const TagGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
       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%'
             } : {}),