From bfbd08844de6d83c8f0d5e27771d80735a9e8104 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Mon, 22 Apr 2024 12:27:49 -0700
Subject: [PATCH 1/3] feat(@clayui/css): LPD-23703 Adds btn-group-spaced for a
 separated button group

    - deprecate btn-group-item
---
 .../src/scss/cadmin/components/_button-groups.scss   |  7 +++++++
 .../clay-css/src/scss/cadmin/variables/_buttons.scss | 12 ++++++++++++
 .../clay-css/src/scss/components/_button-groups.scss |  7 +++++++
 packages/clay-css/src/scss/variables/_buttons.scss   | 12 ++++++++++++
 4 files changed, 38 insertions(+)

diff --git a/packages/clay-css/src/scss/cadmin/components/_button-groups.scss b/packages/clay-css/src/scss/cadmin/components/_button-groups.scss
index ddd90db7e1..b86e216d98 100644
--- 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
index 0183c9a9a2..c37b7c04c0 100644
--- 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
index d4212e091d..31bae6dda3 100644
--- 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
index 58c34816ac..2dbaa43631 100644
--- 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

From bf1275e5d132b03e7b52970c5328e4a3ee4b3541 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Mon, 22 Apr 2024 12:43:36 -0700
Subject: [PATCH 2/3] feat(@clayui/button): LPD-23703 Use btn-group-spaced to
 space buttons instead of btn-group-item

---
 packages/clay-button/src/Group.tsx | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/clay-button/src/Group.tsx b/packages/clay-button/src/Group.tsx
index c9c0570393..a84c5294cc 100644
--- 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>
 );
 

From 8573daa2c2547a76756d00dca53bde716ced9387 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Tue, 23 Apr 2024 09:44:40 -0700
Subject: [PATCH 3/3] chore(@clayui/button): Update snapshots

---
 .../__tests__/__snapshots__/index.tsx.snap    | 30 +++++++------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/packages/clay-button/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-button/src/__tests__/__snapshots__/index.tsx.snap
index 27eebdcfa0..b83b938156 100644
--- 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>
 `;