Merge pull request #7 from infinum/release/1.5.1

1.5.1

CHANGELOG.md

@@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file.
 
 This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/).
 
+## [1.5.1] - 2024-09-18
+- Fixed select components overlaps in some cases (by @piqusy).
+- Added `noExpandButton`, `noLabel`, `noUseToggle`, and `hideUseToggleOnExpand` to `ComponentToggle`.
+
 ## [1.5.0] - 2024-09-11
 - Updated dependencies.
 - (**breaking-ish**) Tweaked CSS reset to ignore whole WP admin by default. You'll need to add `es-uic-has-css-reset` to enable it where needed.
@@ -165,7 +169,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 - Initial release
 
 [Unreleased]: https://github.com/infinum/eightshift-ui-components/compare/master...HEAD
-
+[1.5.1]: https://github.com/infinum/eightshift-ui-components/compare/1.5.0...1.5.1
 [1.5.0]: https://github.com/infinum/eightshift-ui-components/compare/1.4.7...1.5.0
 [1.4.7]: https://github.com/infinum/eightshift-ui-components/compare/1.4.6...1.4.7
 [1.4.6]: https://github.com/infinum/eightshift-ui-components/compare/1.4.5...1.4.6

lib/components/component-toggle/component-toggle.jsx

@@ -5,8 +5,10 @@ import { Switch } from '../toggle/switch';
 import { TriggeredPopover } from '../popover/popover';
 import { ButtonGroup } from '../button/button';
 import { ToggleButton } from '../toggle-button/toggle-button';
+import { BaseControl } from '../base-control/base-control';
 import { Spacer } from '../spacer/spacer';
 import { clsx } from 'clsx/lite';
+import { AnimatedVisibility } from '../animated-visibility/animated-visibility';
 
 /**
  * A component that provides a nice way to toggle a component on and off, and display its content in an expandable panel.
@@ -19,8 +21,12 @@ import { clsx } from 'clsx/lite';
  * @param {boolean} props.useComponent - Whether the component is used. If `false`, the content is hidden.
  * @param {Function} props.onChange - Function to run when the toggle state changes.
  * @param {boolean} [props.noUseToggle] - If `true`, the toggle is not displayed.
+ * @param {boolean} [props.noExpandButton] - If `true`, the expand button is not shown.
+ * @param {boolean} [props.noLabel] - If `true`, the label is not shown.
+ * @param {boolean} [props.noUseToggle] - If `true`, the toggle is not displayed.
  * @param {boolean} [props.expandButtonDisabled] - If `true`, the expand button is disabled.
  * @param {boolean} [props.controlOnly] - If `true`, only the control is displayed.
+ * @param {boolean} [props.hideUseToggleOnExpand] - If `true`, and the component is display in a variant where it can be expanded, the use toggle will hide when the component is expanded.
  * @param {string} [props.contentClassName] - Classes to pass to the content container.
  * @param {ComponentToggleDesign} [props.design='default'] - Design of the component.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
@@ -43,24 +49,34 @@ import { clsx } from 'clsx/lite';
 export const ComponentToggle = (props) => {
 	const {
 		children,
+
 		icon,
 		label,
 		subtitle,
+
 		useComponent,
 		onChange,
+
+		noLabel,
 		noUseToggle,
-		expandButtonDisabled,
+		noExpandButton,
+
 		controlOnly,
+		expandButtonDisabled,
+		hideUseToggleOnExpand,
+
 		contentClassName = 'es-uic-space-y-2.5',
+
 		design = 'default',
+
 		hidden,
 	} = props;
 
 	if (hidden) {
 		return null;
 	}
 
-	if (controlOnly) {
+	if (controlOnly || (noLabel && noUseToggle && noExpandButton)) {
 		return children;
 	}
 
@@ -74,7 +90,7 @@ export const ComponentToggle = (props) => {
 			<ButtonGroup>
 				<ToggleButton
 					icon={hasIcon && (icon ?? icons.componentGeneric)}
-					tooltip={hasIcon && label}
+					tooltip={hasIcon && !noLabel && label}
 					selected={useComponent}
 					onChange={onChange}
 				>
@@ -96,11 +112,42 @@ export const ComponentToggle = (props) => {
 		);
 	}
 
+	if (noExpandButton) {
+		return (
+			<BaseControl
+				icon={icon ?? icons.componentGeneric}
+				label={!noLabel && label}
+				subtitle={subtitle}
+				actions={
+					!noUseToggle && (
+						<Switch
+							checked={useComponent}
+							onChange={onChange}
+						/>
+					)
+				}
+				disabled={!useComponent || expandButtonDisabled}
+			>
+				{noUseToggle && children}
+
+				{!noUseToggle && (
+					<AnimatedVisibility
+						visible={useComponent}
+						className={contentClassName}
+					>
+						{children}
+					</AnimatedVisibility>
+				)}
+			</BaseControl>
+		);
+	}
+
 	return (
 		<Expandable
 			icon={icon ?? icons.componentGeneric}
-			label={label}
+			label={!noLabel && label}
 			subtitle={subtitle}
+			keepActionsOnExpand={!hideUseToggleOnExpand}
 			actions={
 				!noUseToggle && (
 					<Switch

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "1.5.0",
+	"version": "1.5.1",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",

src/App.jsx

@@ -1595,6 +1595,35 @@ function App() {
 							<InputField label='Hi' />
 						</div>
 					</ComponentToggle>
+
+					<ComponentToggle
+						icon={icons.video}
+						label='Video'
+						useComponent={useComp}
+						onChange={setUseComp}
+						noExpandButton
+					>
+						<div className='bg-slate-200 es-uic-min-h-24 es-uic-w-full es-uic-rounded-md es-uic-p-2'>
+							Lorem options noExpandButton
+							<Button>Hello</Button>
+							<InputField label='Hi' />
+						</div>
+					</ComponentToggle>
+
+					<ComponentToggle
+						icon={icons.componentGeneric}
+						label='Generic'
+						useComponent={useComp}
+						onChange={setUseComp}
+						noExpandButton
+						noUseToggle
+					>
+						<div className='bg-slate-200 es-uic-min-h-24 es-uic-w-full es-uic-rounded-md es-uic-p-2'>
+							Lorem options noExpandButton noUseToggle
+							<Button>Hello</Button>
+							<InputField label='Hi' />
+						</div>
+					</ComponentToggle>
 				</TabPanel>
 				<TabPanel className='es-uic-m-5 es-uic-w-96 es-uic-space-y-4 !es-uic-p-5'>
 					<ListBox