fix: button loader and ripple classes

lovrozagar · Aug 31, 2024 · 2d74914 · 2d74914
1 parent 79c0819
commit 2d74914
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 15 deletions.
diff --git a/app.tsx b/app.tsx
@@ -60,6 +60,7 @@ const App = () => {
 					<Button>bUTTON</Button>
 				</SheetContent>
 			</Sheet>
+			<Button>Loading</Button>
 		</div>
 	)
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@renderui/core",
-	"version": "1.7.0",
+	"version": "1.7.2",
 	"private": false,
 	"sideEffects": false,
 	"description": "React UI library with highly modular and ready-out-of-the-box components",

diff --git a/src/components/_shared/hooks/use-content-outside-click.ts b/src/components/_shared/hooks/use-content-outside-click.ts
@@ -19,20 +19,14 @@ function useContentOutsideClick(props: UseContentOutsideClickProps) {
 		event: 'pointerdown',
 		enabled,
 		handler: (event) => {
-			console.log(event)
-
 			if (!(event.target instanceof Node)) {
 				return
 			}
 
-			console.log('a')
-
 			if (contentRef.current?.contains(event.target)) {
 				return
 			}
 
-			console.log('b')
-
 			setOpen(false)
 			onPointerDownOutside?.(event)
 

diff --git a/src/components/button/classes/button-classes.ts b/src/components/button/classes/button-classes.ts
@@ -1,7 +1,7 @@
 import { cva } from '@renderui/utils'
 
 const buttonClasses = cva(
-	'_button group relative box-border inline-flex cursor-pointer select-none appearance-none items-center justify-center gap-3 whitespace-nowrap rounded text-sm font-medium outline-none ring-ring-color ring-offset-background transition-[box-shadow,background-color,transform,opacity] duration-fast disabled:cursor-not-allowed disabled:opacity-40 data-[loading=true]:cursor-default [&_._loader]:opacity-0',
+	'_button group relative box-border inline-flex cursor-pointer select-none appearance-none items-center justify-center gap-3 whitespace-nowrap rounded text-sm font-medium outline-none ring-ring-color ring-offset-background transition-[box-shadow,background-color,transform,opacity] duration-fast disabled:cursor-not-allowed disabled:opacity-40 data-[loading=true]:cursor-default [&_[data-slot=loader]]:opacity-0',
 	{
 		variants: {
 			variant: {
@@ -41,13 +41,13 @@ const buttonClasses = cva(
 				false: '',
 			},
 			hasLoaderOnLoading: {
-				true: '[&[data-loading=true]_._loader]:opacity-100',
+				true: '[&[data-loading=true]_[data-slot=loader]]:opacity-100',
 				false: '',
 			},
 			hasContentOnLoading: {
-				true: '[&[data-loading=true]_._loader]:flex [&_._loader]:hidden',
+				true: '[&[data-loading=true]_[data-slot=loader]]:flex [&_[data-slot=loader]]:hidden',
 				false: [
-					'[&[data-loading=true]]:!text-transparent [&[data-loading=true]_*]:[transition:all_150ms,color_0s] [&[data-loading=true]_._ripple]:opacity-100 [&[data-loading=true]_._sub-layer]:opacity-100 [&[data-loading=true]_>_*]:opacity-0',
+					'[&[data-loading=true]]:!text-transparent [&[data-loading=true]_*]:[transition:all_150ms,color_0s] [&[data-loading=true]_[data-slot=ripple]]:opacity-100 [&[data-loading=true]_[data-slot=sub-layer]]:opacity-100 [&[data-loading=true]_>_*]:opacity-0',
 				],
 			},
 		},

diff --git a/src/components/button/components/button.tsx b/src/components/button/components/button.tsx
@@ -68,7 +68,13 @@ const Button = (props: ButtonProps) => {
 					? loader ?? <Loader {...loaderProps} data-slot='loader' />
 					: null}
 				{functionCallOrValue(endContent, { isPressed, isKeyboardPressed })}
-				{hasRipple ? <Ripple {...subLayerProps} {...rippleProps} data-slot='ripple' /> : null}
+				{hasRipple ? (
+					<Ripple
+						data-slot='ripple'
+						subLayerProps={{ ...subLayerProps, 'data-slot': 'sub-layer' }}
+						{...rippleProps}
+					/>
+				) : null}
 			</>
 		)
 	}

diff --git a/src/components/combobox/constants/constants.ts b/src/components/combobox/constants/constants.ts
@@ -26,9 +26,9 @@ const COMBOBOX_INPUT_CONTAINER_CLASSNAME = '_combobox-input-container'
 
 const SELECT_INPUT_CONTAINER_CLASSNAME = '_select-input-container sr-only'
 
-const ITEM_CLASSNAME = '._combobox-item'
+const ITEM_CLASSNAME = '_combobox-item'
 
-const ACTIVE_ITEM_CLASSNAME = '._combobox-item[data-selected="true"]'
+const ACTIVE_ITEM_CLASSNAME = '_combobox-item[data-selected="true"]'
 
 const ALLOWED_SELECT_KEYS = ['ArrowUp', 'ArrowDown', 'Enter', 'Escape'] as const
 

diff --git a/src/components/command/constants/constants.ts b/src/components/command/constants/constants.ts
@@ -29,7 +29,7 @@ const RADIX_FOCUS_GUARD_ATTRUBUTE = '[data-radix-focus-guard]'
 
 const COMMAND_ATTRIBUTE = '[data-command-popover-root]'
 
-const COMMAND_ITEM_CLASSNAME_SELECTOR = '._command-item'
+const COMMAND_ITEM_CLASSNAME_SELECTOR = '_command-item'
 
 const SEARCH_PAUSE_DURATION = 750