fix: Some Tailwind classes for inputswitch and checkbox as styling is…

… currently broken - Update the tailwinddoc.js files for checkbox and inputswitch
primefaces · Apr 9, 2024 · 5b80c96 · 5b80c96
1 parent 3dafe3b
commit 5b80c96
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/components/doc/checkbox/theming/tailwinddoc.js b/components/doc/checkbox/theming/tailwinddoc.js
@@ -5,13 +5,16 @@ import Link from 'next/link';
 export function TailwindDoc(props) {
     const code = {
         basic: `
-const Tailwind = {        
+const Tailwind = {
     checkbox: {
         root: {
-            className: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+            className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
         },
-        input: ({ props, context }) => ({
-            className: [
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props, context }) => ({
+            className: classNames(
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
                 {
@@ -22,7 +25,7 @@ const Tailwind = {
                     'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
                     'cursor-default opacity-60': props.disabled
                 }
-            ]
+            )
         }),
         icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
     }

diff --git a/components/doc/inputswitch/theming/tailwinddoc.js b/components/doc/inputswitch/theming/tailwinddoc.js
@@ -5,13 +5,16 @@ import Link from 'next/link';
 export function TailwindDoc(props) {
     const code = {
         basic: `
-const Tailwind = {   
+const Tailwind = {
     inputswitch: {
         root: ({ props }) => ({
             className: classNames('inline-block relative', 'w-12 h-7', {
                 'opacity-60 select-none pointer-events-none cursor-default': props.disabled
             })
         }),
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
         slider: ({ props }) => ({
             className: classNames(
                 'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',

diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
@@ -840,6 +840,9 @@ const Tailwind = {
                 'opacity-60 select-none pointer-events-none cursor-default': props.disabled
             })
         }),
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
         slider: ({ props }) => ({
             className: classNames(
                 'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
@@ -1048,7 +1051,10 @@ const Tailwind = {
         root: {
             className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
         },
-        input: ({ props, context }) => ({
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props, context }) => ({
             className: classNames(
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',