diff --git a/documentation-site/components/yard/config/tag.ts b/documentation-site/components/yard/config/tag.ts
index 0120af38c8..1c1f9fed0e 100644
--- a/documentation-site/components/yard/config/tag.ts
+++ b/documentation-site/components/yard/config/tag.ts
@@ -169,12 +169,6 @@ 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,
diff --git a/documentation-site/examples/tag/no-margin.tsx b/documentation-site/examples/tag/no-margin.tsx
deleted file mode 100644
index ef787374f6..0000000000
--- a/documentation-site/examples/tag/no-margin.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from "react";
-import { Tag } from "baseui/tag";
-
-export default function Example() {
- return (
-
- no margin
- no margin
-
- );
-}
diff --git a/documentation-site/pages/components/tag.mdx b/documentation-site/pages/components/tag.mdx
index 0104dddabc..d637396bda 100644
--- a/documentation-site/pages/components/tag.mdx
+++ b/documentation-site/pages/components/tag.mdx
@@ -12,7 +12,6 @@ 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";
@@ -98,12 +97,6 @@ You can change the color of the tag by passing a value to the `kind` prop. Suppo
-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.
-
-
-
-
-
## Accessibility
- When the tag is closable or clickable and not disabled it gets the role button and is focusable.
diff --git a/package.json b/package.json
index 9e8c8e1293..657eb24d40 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "baseui",
- "version": "18.2.0",
+ "version": "18.1.0",
"description": "A React Component library implementing the Base design language",
"keywords": [
"react",
diff --git a/src/tag-group/tag-group.tsx b/src/tag-group/tag-group.tsx
index f06ca87f94..0d2ebf67f2 100644
--- a/src/tag-group/tag-group.tsx
+++ b/src/tag-group/tag-group.tsx
@@ -43,11 +43,11 @@ const TagGroup = 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%' } : {}), // 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,
},
diff --git a/src/tag/__tests__/tag.test.tsx b/src/tag/__tests__/tag.test.tsx
index 93ce5596f4..3089c4ae64 100644
--- a/src/tag/__tests__/tag.test.tsx
+++ b/src/tag/__tests__/tag.test.tsx
@@ -55,20 +55,6 @@ describe('Tag', () => {
expect(actionClickMock.mock.calls.length).toBe(1);
});
- it('removes default margin when noMargin is set', () => {
- const { container } = render(
-
- content
-
- );
- 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
diff --git a/src/tag/styled-components.ts b/src/tag/styled-components.ts
index 2c484c3254..2b01d438cc 100644
--- a/src/tag/styled-components.ts
+++ b/src/tag/styled-components.ts
@@ -387,7 +387,6 @@ export const Root = styled<'span', SharedPropsArg>(
$isFocusVisible,
$color,
$size = SIZE.small,
- $noMargin,
} = props;
const borderRadius =
$size === SIZE.small || $size === SIZE.xSmall
@@ -460,10 +459,10 @@ export const Root = styled<'span', SharedPropsArg>(
[SIZE.large]: '40px',
}[$size],
justifyContent: 'space-between',
- marginTop: $noMargin ? 0 : '5px',
- marginBottom: $noMargin ? 0 : '5px',
- marginLeft: $noMargin ? 0 : '5px',
- marginRight: $noMargin ? 0 : '5px',
+ marginTop: '5px',
+ marginBottom: '5px',
+ marginLeft: '5px',
+ marginRight: '5px',
paddingTop: paddingLongitude,
paddingBottom: paddingLongitude,
paddingLeft: paddingMagnitude,
diff --git a/src/tag/tag.tsx b/src/tag/tag.tsx
index 87847b48e4..1dff6fcaad 100644
--- a/src/tag/tag.tsx
+++ b/src/tag/tag.tsx
@@ -36,7 +36,6 @@ const Tag = React.forwardRef((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
@@ -119,7 +118,6 @@ const Tag = React.forwardRef((props, ref) => {
$hierarchy: hierarchy,
$isFocusVisible: focusVisible,
$size: size,
- $noMargin: noMargin,
};
const titleText = title || getTextFromChildren(children);
const isButton = (clickable || closeable) && !disabled;
diff --git a/src/tag/types.ts b/src/tag/types.ts
index 04c6567f21..295c55f56c 100644
--- a/src/tag/types.ts
+++ b/src/tag/types.ts
@@ -57,8 +57,6 @@ 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 = {
@@ -74,5 +72,4 @@ export type SharedPropsArg = {
$isFocusVisible?: boolean;
$size?: string;
$contentMaxWidth?: string | null;
- $noMargin?: boolean;
};