improve repeater control Add Row and Toggle rows buttons style

nk-crew · Oct 8, 2024 · 032f7a8 · 032f7a8
1 parent 0932b6a
commit 032f7a8
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 16 deletions.
diff --git a/assets/editor/index.scss b/assets/editor/index.scss
@@ -626,7 +626,6 @@
 		cursor: pointer;
 		background: none;
 		border: none;
-		border-radius: 50%;
 		opacity: 0;
 
 		> svg {
@@ -641,7 +640,11 @@
 	}
 
 	&:hover .lzb-gutenberg-repeater-btn-duplicate,
-	&:hover .lzb-gutenberg-repeater-btn-remove {
+	.lzb-gutenberg-repeater-btn-duplicate:hover,
+	.lzb-gutenberg-repeater-btn-duplicate:focus,
+	&:hover .lzb-gutenberg-repeater-btn-remove,
+	.lzb-gutenberg-repeater-btn-remove:hover,
+	.lzb-gutenberg-repeater-btn-remove:focus {
 		opacity: 1;
 	}
 
@@ -709,16 +712,40 @@
 }
 
 .lzb-gutenberg-repeater-items {
-	margin-bottom: 15px;
+	margin-bottom: 3px;
 }
 
 .lzb-gutenberg-repeater-options {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
+	text-align: center;
 
-	.components-toggle-control .components-form-toggle {
-		margin-right: 0;
+	.components-button {
+		&:not(.is-primary):not(:hover,:focus) {
+			--wp-components-color-accent: #949494;
+
+			color: #292929;
+		}
+
+		justify-content: center;
+		text-transform: uppercase;
+		font-size: 12px;
+		font-weight: 500;
+	}
+
+	.lzb-gutenberg-repeater-options-add {
+		flex: 1;
+	}
+	.lzb-gutenberg-repeater-options-expand {
+		padding-left: 6px;
+		padding-right: 6px;
+
+		svg {
+			fill: none;
+			width: 1.5em;
+			height: 1.5em;
+		}
 	}
 }
 

diff --git a/controls/repeater/repeater-control.js b/controls/repeater/repeater-control.js
@@ -20,7 +20,7 @@ import { CSS } from '@dnd-kit/utilities';
  */
 import { __ } from '@wordpress/i18n';
 import { useEffect, useState } from '@wordpress/element';
-import { Button, ToggleControl } from '@wordpress/components';
+import { Button, ButtonGroup, Tooltip } from '@wordpress/components';
 import { withInstanceId } from '@wordpress/compose';
 
 /**
@@ -329,10 +329,11 @@ function RepeaterControl(props) {
 					</div>
 				) : null}
 			</DndContext>
-			<div className="lzb-gutenberg-repeater-options">
+			<ButtonGroup className="lzb-gutenberg-repeater-options">
 				<Button
 					variant="secondary"
-					size="small"
+					size="compact"
+					className="lzb-gutenberg-repeater-options-add"
 					disabled={
 						controlData.rows_max && count >= controlData.rows_max
 					}
@@ -351,17 +352,37 @@ function RepeaterControl(props) {
 				{controlData.rows_collapsible === 'true' &&
 				items.length &&
 				items.length > 1 ? (
-					<ToggleControl
-						label={__('Toggle all', 'lazy-blocks')}
-						checked={activeItem === -2}
-						onChange={() => {
-							setActiveItem(activeItem === -2 ? -1 : -2);
-						}}
-					/>
+					<Tooltip text={__('Toggle all rows', 'lazy-blocks')}>
+						<Button
+							variant={
+								activeItem === -2 ? 'primary' : 'secondary'
+							}
+							size="compact"
+							className="lzb-gutenberg-repeater-options-expand"
+							onClick={() => {
+								setActiveItem(activeItem === -2 ? -1 : -2);
+							}}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							>
+								<path d="m7 15 5 5 5-5" />
+								<path d="m7 9 5-5 5 5" />
+							</svg>
+						</Button>
+					</Tooltip>
 				) : (
 					''
 				)}
-			</div>
+			</ButtonGroup>
 		</div>
 	);
 }