chore: undo pr3658 & pr3751 (#3754)

nextui-org · Sep 14, 2024 · 5517a05 · 5517a05
1 parent fccb19f
commit 5517a05
Show file tree

Hide file tree

Showing 17 changed files with 157 additions and 173 deletions.
diff --git a/.changeset/silent-ads-mix.md b/.changeset/silent-ads-mix.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+remove tw nested group (rollback PR3658)
diff --git a/apps/docs/app/examples/perf/page.tsx b/apps/docs/app/examples/perf/page.tsx
@@ -106,7 +106,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           // dark theme
           "dark:bg-zinc-900",
           "dark:border-zinc-800",

diff --git a/apps/docs/components/theme-switch.tsx b/apps/docs/components/theme-switch.tsx
@@ -57,7 +57,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
               "bg-transparent",
               "rounded-lg",
               "flex items-center justify-center",
-              "group-data-[selected=true]/toggle:bg-transparent",
+              "group-data-[selected=true]:bg-transparent",
               "!text-default-600 dark:!text-default-500",
               "pt-px",
               "px-0",

diff --git a/apps/docs/content/components/input/custom-styles.ts b/apps/docs/content/components/input/custom-styles.ts
@@ -52,8 +52,8 @@ export default function App() {
             "backdrop-saturate-200",
             "hover:bg-default-200/70",
             "dark:hover:bg-default/70",
-            "group-data-[focus=true]/input:bg-default-200/50",
-            "dark:group-data-[focus=true]/input:bg-default/60",
+            "group-data-[focus=true]:bg-default-200/50",
+            "dark:group-data-[focus=true]:bg-default/60",
             "!cursor-text",
           ],
         }}

diff --git a/apps/docs/content/components/select/custom-styles.ts b/apps/docs/content/components/select/custom-styles.ts
@@ -212,7 +212,7 @@ export default function App() {
       className="max-w-xs"
       variant="bordered"
       classNames={{
-        label: "group-data-[filled=true]/select:-translate-y-5",
+        label: "group-data-[filled=true]:-translate-y-5",
         trigger: "min-h-16",
         listboxWrapper: "max-h-[400px]",
       }}

diff --git a/apps/docs/content/components/switch/custom-styles.ts b/apps/docs/content/components/switch/custom-styles.ts
@@ -11,12 +11,12 @@ export default function App() {
         ),
         wrapper: "p-0 h-4 overflow-visible",
         thumb: cn("w-6 h-6 border-2 shadow-lg",
-          "group-data-[hover=true]/toggle:border-primary",
+          "group-data-[hover=true]:border-primary",
           //selected
-          "group-data-[selected=true]/toggle:ml-6",
+          "group-data-[selected=true]:ml-6",
           // pressed
-          "group-data-[pressed=true]/toggle:w-7",
-          "group-data-[selected]:group-data-[pressed]/toggle:ml-4",
+          "group-data-[pressed=true]:w-7",
+          "group-data-[selected]:group-data-[pressed]:ml-4",
         ),
       }}
     >

diff --git a/apps/docs/content/customization/custom-variants/slots-component.ts b/apps/docs/content/customization/custom-variants/slots-component.ts
@@ -47,7 +47,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           "dark:bg-zinc-900",
           "dark:border-zinc-800",
           "dark:data-[hover=true]:bg-zinc-900",

diff --git a/apps/docs/content/docs/customization/custom-variants.mdx b/apps/docs/content/docs/customization/custom-variants.mdx
@@ -133,7 +133,7 @@ const MyInput = extendVariants(Input, {
           "focus-within:bg-zinc-100",
           "data-[hover=true]:border-zinc-600",
           "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]/input:border-zinc-600",
+          "group-data-[focus=true]:border-zinc-600",
           // dark theme
           "dark:bg-zinc-900",
           "dark:border-zinc-800",

diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
@@ -505,7 +505,7 @@ const CustomStylesTemplate = ({color, variant, ...args}: SelectProps<User>) => {
     <Select
       className="max-w-xs"
       classNames={{
-        label: "group-data-[filled=true]/select:-translate-y-5",
+        label: "group-data-[filled=true]:-translate-y-5",
         trigger: "min-h-16",
         listboxWrapper: "max-h-[400px]",
       }}

diff --git a/packages/core/theme/src/components/autocomplete.ts b/packages/core/theme/src/components/autocomplete.ts
@@ -4,7 +4,7 @@ import {tv} from "../utils/tv";
 
 const autocomplete = tv({
   slots: {
-    base: "group/autocomplete inline-flex flex-column w-full",
+    base: "group inline-flex flex-column w-full",
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
@@ -16,14 +16,14 @@ const autocomplete = tv({
       "opacity-0",
       "pointer-events-none",
       "text-default-500",
-      "group-data-[invalid=true]/autocomplete:text-danger",
+      "group-data-[invalid=true]:text-danger",
       "data-[visible=true]:opacity-100", // on mobile is always visible when there is a value
       "data-[visible=true]:pointer-events-auto",
       "data-[visible=true]:cursor-pointer",
       "sm:data-[visible=true]:opacity-0", // only visible on hover
       "sm:data-[visible=true]:pointer-events-none",
-      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete:opacity-100",
-      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete:pointer-events-auto",
+      "sm:group-data-[hover=true]:data-[visible=true]:opacity-100",
+      "sm:group-data-[hover=true]:data-[visible=true]:pointer-events-auto",
     ],
     selectorButton: "text-medium",
   },

diff --git a/packages/core/theme/src/components/checkbox.ts b/packages/core/theme/src/components/checkbox.ts
@@ -21,7 +21,7 @@ import {groupDataFocusVisibleClasses} from "../utils";
  */
 const checkbox = tv({
   slots: {
-    base: "group/checkbox relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
+    base: "group relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
     wrapper: [
       "relative",
       "inline-flex",
@@ -44,14 +44,14 @@ const checkbox = tv({
       "after:scale-50",
       "after:opacity-0",
       "after:origin-center",
-      "group-data-[selected=true]/checkbox:after:scale-100",
-      "group-data-[selected=true]/checkbox:after:opacity-100",
+      "group-data-[selected=true]:after:scale-100",
+      "group-data-[selected=true]:after:opacity-100",
       // hover
-      "group-data-[hover=true]/checkbox:before:bg-default-100",
+      "group-data-[hover=true]:before:bg-default-100",
       // focus ring
       ...groupDataFocusVisibleClasses,
     ],
-    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]/checkbox:opacity-100",
+    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]:opacity-100",
     label: "relative text-foreground select-none",
   },
   variants: {
@@ -147,8 +147,8 @@ const checkbox = tv({
           "before:bg-foreground",
           "before:w-0",
           "before:h-0.5",
-          "group-data-[selected=true]/checkbox:opacity-60",
-          "group-data-[selected=true]/checkbox:before:w-full",
+          "group-data-[selected=true]:opacity-60",
+          "group-data-[selected=true]:before:w-full",
         ],
       },
     },
@@ -172,7 +172,7 @@ const checkbox = tv({
       false: {
         wrapper: [
           "before:transition-colors",
-          "group-data-[pressed=true]/checkbox:scale-95",
+          "group-data-[pressed=true]:scale-95",
           "transition-transform",
           "after:transition-transform-opacity",
           "after:!ease-linear",

diff --git a/packages/core/theme/src/components/date-input.ts b/packages/core/theme/src/components/date-input.ts
@@ -9,13 +9,13 @@ import {tv} from "../utils/tv";
  */
 const dateInput = tv({
   slots: {
-    base: "group/dateinput flex flex-col",
+    base: "group flex flex-col",
     label: [
       "block subpixel-antialiased text-small text-default-600",
       // isRequired=true
-      "group-data-[required=true]/dateinput:after:content-['*'] group-data-[required=true]/dateinput:after:text-danger group-data-[required=true]/dateinput:after:ml-0.5",
+      "group-data-[required=true]:after:content-['*'] group-data-[required=true]:after:text-danger group-data-[required=true]:after:ml-0.5",
       // isInValid=true
-      "group-data-[invalid=true]/dateinput:text-danger",
+      "group-data-[invalid=true]:text-danger",
     ],
     inputWrapper: [
       "relative px-3 gap-3 w-full inline-flex flex-row items-center",
@@ -25,10 +25,10 @@ const dateInput = tv({
     innerWrapper: [
       "flex items-center text-default-400 w-full gap-x-2 h-6",
       // isInValid=true
-      "group-data-[invalid=true]/dateinput:text-danger",
+      "group-data-[invalid=true]:text-danger",
     ], // this wraps the input and the start/end content
     segment: [
-      "group/dateinput first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
+      "group first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
       "inline-block outline-none focus:shadow-sm rounded-md",
       "text-foreground-500 data-[editable=true]:text-foreground",
       "data-[editable=true]:data-[placeholder=true]:text-foreground-500",
@@ -37,8 +37,7 @@ const dateInput = tv({
       "data-[invalid=true]:focus:bg-danger-400/50 dark:data-[invalid=true]:focus:bg-danger-400/20",
       "data-[invalid=true]:data-[editable=true]:focus:text-danger",
     ],
-    helperWrapper:
-      "hidden group-data-[has-helper=true]/dateinput:flex p-1 relative flex-col gap-1.5",
+    helperWrapper: "hidden group-data-[has-helper=true]:flex p-1 relative flex-col gap-1.5",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger",
   },
@@ -50,9 +49,9 @@ const dateInput = tv({
           "hover:bg-default-200",
           "focus-within:hover:bg-default-100",
           // isInvalid=true
-          "group-data-[invalid=true]/dateinput:bg-danger-50",
-          "group-data-[invalid=true]/dateinput:hover:bg-danger-100",
-          "group-data-[invalid=true]/dateinput:focus-within:hover:bg-danger-50",
+          "group-data-[invalid=true]:bg-danger-50",
+          "group-data-[invalid=true]:hover:bg-danger-100",
+          "group-data-[invalid=true]:focus-within:hover:bg-danger-50",
         ],
       },
       faded: {
@@ -62,9 +61,9 @@ const dateInput = tv({
           "border-default-200",
           "hover:border-default-400",
           // isInvalid=true
-          "group-data-[invalid=true]/dateinput:bg-danger-50",
-          "group-data-[invalid=true]/dateinput:hover:bg-danger-100",
-          "group-data-[invalid=true]/dateinput:focus-within:hover:bg-danger-50",
+          "group-data-[invalid=true]:bg-danger-50",
+          "group-data-[invalid=true]:hover:bg-danger-100",
+          "group-data-[invalid=true]:focus-within:hover:bg-danger-50",
         ],
       },
       bordered: {
@@ -75,9 +74,9 @@ const dateInput = tv({
           "focus-within:border-default-foreground",
           "focus-within:hover:border-default-foreground",
           // isInvalid=true
-          "group-data-[invalid=true]/dateinput:border-danger",
-          "group-data-[invalid=true]/dateinput:hover:border-danger",
-          "group-data-[invalid=true]/dateinput:focus-within:hover:border-danger",
+          "group-data-[invalid=true]:border-danger",
+          "group-data-[invalid=true]:hover:border-danger",
+          "group-data-[invalid=true]:focus-within:hover:border-danger",
         ],
       },
       underlined: {
@@ -103,7 +102,7 @@ const dateInput = tv({
           "after:h-[2px]",
           "focus-within:after:w-full",
           // isInvalid=true
-          "group-data-[invalid=true]/dateinput:after:bg-danger",
+          "group-data-[invalid=true]:after:bg-danger",
         ],
       },
     },

diff --git a/packages/core/theme/src/components/date-picker.ts b/packages/core/theme/src/components/date-picker.ts
@@ -9,7 +9,7 @@ import {tv} from "../utils/tv";
  */
 const datePicker = tv({
   slots: {
-    base: "group/datepicker w-full",
+    base: "group w-full",
     selectorButton: "-mr-2 text-inherit",
     selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
     popoverContent: "p-0 w-full",
@@ -23,10 +23,9 @@ const datePicker = tv({
 const dateRangePicker = tv({
   extend: datePicker,
   slots: {
-    calendar: "group/daterangepicker",
+    calendar: "group",
     bottomContent: "flex flex-col gap-y-2",
-    timeInputWrapper:
-      "flex flex-col group-data-[has-multiple-months=true]/daterangepicker:flex-row",
+    timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]:flex-row",
     separator: "-mx-1 text-inherit",
   },
 });