Merge pull request #5812 from pat270/LPD-23703

feat(@clayui/css): LPD-23703 Adds btn-group-spaced for a separated button group
liferay · Apr 23, 2024 · ca51279 · ca51279
2 parents 9f32917 + 8573daa
commit ca51279
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 31 deletions.
diff --git a/packages/clay-button/src/Group.tsx b/packages/clay-button/src/Group.tsx
@@ -29,20 +29,14 @@ const ClayButtonGroup = ({
 }: IButtonGroupProps) => (
 	<div
 		{...otherProps}
-		className={classNames(
-			className,
-			vertical ? 'btn-group-vertical' : 'btn-group'
-		)}
+		className={classNames(className, {
+			'btn-group': !spaced && !vertical,
+			'btn-group-spaced': spaced,
+			'btn-group-vertical': vertical,
+		})}
 		role={role}
 	>
-		{spaced
-			? React.Children.map(children, (child, i) =>
-					React.cloneElement(
-						<div className="btn-group-item">{child}</div>,
-						{key: i}
-					)
-			  )
-			: children}
+		{children}
 	</div>
 );
 

diff --git a/packages/clay-button/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-button/src/__tests__/__snapshots__/index.tsx.snap
@@ -52,29 +52,21 @@ exports[`Button renders ClayButtonWithIcon without monospaced 1`] = `
 exports[`Button renders a ButtonGroup with spaced 1`] = `
 <div>
   <div
-    class="btn-group"
+    class="btn-group-spaced"
     role="group"
   >
-    <div
-      class="btn-group-item"
+    <button
+      class="btn btn-primary"
+      type="button"
     >
-      <button
-        class="btn btn-primary"
-        type="button"
-      >
-        Button
-      </button>
-    </div>
-    <div
-      class="btn-group-item"
+      Button
+    </button>
+    <button
+      class="btn btn-primary"
+      type="button"
     >
-      <button
-        class="btn btn-primary"
-        type="button"
-      >
-        Button
-      </button>
-    </div>
+      Button
+    </button>
   </div>
 </div>
 `;

diff --git a/packages/clay-css/src/scss/cadmin/components/_button-groups.scss b/packages/clay-css/src/scss/cadmin/components/_button-groups.scss
@@ -43,10 +43,17 @@
 	flex-wrap: wrap;
 }
 
+.btn-group-spaced {
+	@include clay-css($cadmin-btn-group-spaced);
+}
+
 .btn-group-nowrap {
 	flex-wrap: nowrap;
 }
 
+// @deprecated as of v3.113.0 replace `.btn-group` with `.btn-group-spaced`
+// instead
+
 .btn-group-item {
 	align-items: center;
 	display: inline-flex;

diff --git a/packages/clay-css/src/scss/cadmin/variables/_buttons.scss b/packages/clay-css/src/scss/cadmin/variables/_buttons.scss
@@ -382,6 +382,18 @@ $cadmin-btn-unstyled: map-deep-merge(
 
 $cadmin-btn-group-item-margin-right: 16px !default;
 
+$cadmin-btn-group-spaced: () !default;
+$cadmin-btn-group-spaced: map-merge(
+	(
+		align-items: center,
+		column-gap: $cadmin-btn-group-item-margin-right,
+		display: inline-flex,
+		flex-wrap: wrap,
+		position: relative,
+	),
+	$cadmin-btn-group-spaced
+);
+
 // Button Toolbar
 
 $cadmin-btn-toolbar-spacer-x: 8px !default; // 8px

diff --git a/packages/clay-css/src/scss/components/_button-groups.scss b/packages/clay-css/src/scss/components/_button-groups.scss
@@ -43,10 +43,17 @@
 	flex-wrap: wrap;
 }
 
+.btn-group-spaced {
+	@include clay-css($btn-group-spaced);
+}
+
 .btn-group-nowrap {
 	flex-wrap: nowrap;
 }
 
+/// @deprecated as of v3.113.0 replace `.btn-group` with `.btn-group-spaced`
+/// instead
+
 .btn-group-item {
 	align-items: center;
 	display: inline-flex;

diff --git a/packages/clay-css/src/scss/variables/_buttons.scss b/packages/clay-css/src/scss/variables/_buttons.scss
@@ -374,6 +374,18 @@ $btn-unstyled: map-deep-merge(
 
 $btn-group-item-margin-right: map-get($spacers, 2) !default;
 
+$btn-group-spaced: () !default;
+$btn-group-spaced: map-merge(
+	(
+		align-items: center,
+		column-gap: $btn-group-item-margin-right,
+		display: inline-flex,
+		flex-wrap: wrap,
+		position: relative,
+	),
+	$btn-group-spaced
+);
+
 // Button Toolbar
 
 $btn-toolbar-spacer-x: 0.5rem !default; // 8px