Merge pull request #5754 from matuzalemsteles/dropdown-columns-visibi…

…lity chore(@clayui/core): visual adjustments to columns visibility DropDown
liferay · Jan 22, 2024 · ab4b2df · ab4b2df
2 parents 3c9d655 + 364dfe2
commit ab4b2df
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/packages/clay-core/src/drop-down/Menu.tsx b/packages/clay-core/src/drop-down/Menu.tsx
@@ -88,6 +88,8 @@ type Props<T> = {
 	trigger: React.ReactElement & {
 		ref?: (node: HTMLButtonElement | null) => void;
 	};
+
+	style?: React.CSSProperties;
 } & Omit<Partial<ICollectionProps<T, unknown>>, 'virtualize'>;
 
 function MenuInner<T extends Record<string, unknown> | string | number>(
@@ -101,6 +103,7 @@ function MenuInner<T extends Record<string, unknown> | string | number>(
 		items,
 		onActiveChange,
 		role = 'menu',
+		style,
 		trigger,
 		...otherProps
 	}: Props<T>,
@@ -266,6 +269,7 @@ function MenuInner<T extends Record<string, unknown> | string | number>(
 							)}
 							ref={menuRef}
 							role="presentation"
+							style={style}
 						>
 							<Collection<T>
 								{...otherProps}

diff --git a/packages/clay-core/src/table/Head.tsx b/packages/clay-core/src/table/Head.tsx
@@ -93,6 +93,10 @@ function HeadInner<T extends Record<string, any>>(
 									},
 									...collection.getItems(),
 								]}
+								style={{
+									maxWidth: '210px',
+									minWidth: '210px',
+								}}
 								trigger={
 									<Button
 										aria-label={
@@ -120,15 +124,20 @@ function HeadInner<T extends Record<string, any>>(
 												collection.getItem(item).value
 											}
 										>
-											<Layout.ContentRow>
+											<Layout.ContentRow verticalAlign="center">
 												<Layout.ContentCol expand>
 													{
 														collection.getItem(item)
 															.value
 													}
 												</Layout.ContentCol>
-												<Layout.ContentCol>
+												<Layout.ContentCol float="end">
 													<Toggle
+														containerProps={{
+															style: {
+																marginBottom: 0,
+															},
+														}}
 														disabled={
 															!hiddenColumns.has(
 																item
@@ -145,6 +154,7 @@ function HeadInner<T extends Record<string, any>>(
 																).index
 															)
 														}
+														sizing="sm"
 														toggled={hiddenColumns.has(
 															item
 														)}

diff --git a/packages/clay-css/src/scss/cadmin/variables/_toggle-switch.scss b/packages/clay-css/src/scss/cadmin/variables/_toggle-switch.scss
@@ -500,6 +500,7 @@ $cadmin-toggle-switch-sizes: map-deep-merge(
 					),
 					toggle-switch-handle: (
 						min-width: 30px,
+						max-width: 30px,
 						after: (
 							margin-left: 38px,
 						),

diff --git a/packages/clay-css/src/scss/variables/_toggle-switch.scss b/packages/clay-css/src/scss/variables/_toggle-switch.scss
@@ -515,6 +515,7 @@ $toggle-switch-sizes: map-deep-merge(
 					),
 					toggle-switch-handle: (
 						min-width: 30px,
+						max-width: 30px,
 						after: (
 							margin-left: 38px,
 						),