fix(theme): applied tw nested group (#3658)

* fix(theme): apply nested group for checkbox * fix(theme): apply nested group for autocomplete * fix(theme): apply nested group for select * fix(theme): apply nested group for toggle * fix(theme): apply nested group for radio * fix(theme): apply nested group for input * fix(theme): apply nested group for datepicker * fix(theme): apply nested group for dateinput * chore(changeset): add changeset * chore(changeset): add issue number * chore(theme): format code * feat(table): add TableWithSwitch
nextui-org · Sep 13, 2024 · 5b5a974 · 5b5a974
1 parent b0728e3
commit 5b5a974
Show file tree

Hide file tree

Showing 10 changed files with 216 additions and 141 deletions.
diff --git a/.changeset/clean-teachers-heal.md b/.changeset/clean-teachers-heal.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+applied tw nested group (#3544, #2324, #2959)
diff --git a/packages/components/table/stories/table.stories.tsx b/packages/components/table/stories/table.stories.tsx
@@ -22,6 +22,7 @@ import {
   TableProps,
   getKeyValue,
 } from "../src";
+import {Switch} from "../../switch/src";
 
 export default {
   title: "Components/Table",
@@ -151,6 +152,46 @@ const StaticTemplate = (args: TableProps) => (
   </Table>
 );
 
+const TableWithSwitchTemplate = (args: TableProps) => (
+  <Table aria-label="Table with Switch" {...args}>
+    <TableHeader>
+      <TableColumn>NAME</TableColumn>
+      <TableColumn>ROLE</TableColumn>
+      <TableColumn>ACTIVE</TableColumn>
+    </TableHeader>
+    <TableBody>
+      <TableRow key="1">
+        <TableCell>Tony Reichert</TableCell>
+        <TableCell>CEO</TableCell>
+        <TableCell>
+          <Switch />
+        </TableCell>
+      </TableRow>
+      <TableRow key="2">
+        <TableCell>Zoey Lang</TableCell>
+        <TableCell>Technical Lead</TableCell>
+        <TableCell>
+          <Switch />
+        </TableCell>
+      </TableRow>
+      <TableRow key="3">
+        <TableCell>Jane Fisher</TableCell>
+        <TableCell>Senior Developer</TableCell>
+        <TableCell>
+          <Switch />
+        </TableCell>
+      </TableRow>
+      <TableRow key="4">
+        <TableCell>William Howard</TableCell>
+        <TableCell>Community Manager</TableCell>
+        <TableCell>
+          <Switch />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
 const EmptyTemplate = (args: TableProps) => (
   <Table aria-label="Example empty table" {...args}>
     <TableHeader>
@@ -1061,3 +1102,11 @@ export const DisableAnimation = {
     disableAnimation: true,
   },
 };
+
+export const TableWithSwitch = {
+  render: TableWithSwitchTemplate,
+  args: {
+    ...defaultProps,
+    selectionMode: "multiple",
+  },
+};
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 inline-flex flex-column w-full",
+    base: "group/autocomplete 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]:text-danger",
+      "group-data-[invalid=true]/autocomplete: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]:opacity-100",
-      "sm:group-data-[hover=true]:data-[visible=true]:pointer-events-auto",
+      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete:opacity-100",
+      "sm:group-data-[hover=true]:data-[visible=true]/autocomplete: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 relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2 select-none",
+    base: "group/checkbox 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]:after:scale-100",
-      "group-data-[selected=true]:after:opacity-100",
+      "group-data-[selected=true]/checkbox:after:scale-100",
+      "group-data-[selected=true]/checkbox:after:opacity-100",
       // hover
-      "group-data-[hover=true]:before:bg-default-100",
+      "group-data-[hover=true]/checkbox:before:bg-default-100",
       // focus ring
       ...groupDataFocusVisibleClasses,
     ],
-    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]:opacity-100",
+    icon: "z-10 w-4 h-3 opacity-0 group-data-[selected=true]/checkbox: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]:opacity-60",
-          "group-data-[selected=true]:before:w-full",
+          "group-data-[selected=true]/checkbox:opacity-60",
+          "group-data-[selected=true]/checkbox:before:w-full",
         ],
       },
     },
@@ -172,7 +172,7 @@ const checkbox = tv({
       false: {
         wrapper: [
           "before:transition-colors",
-          "group-data-[pressed=true]:scale-95",
+          "group-data-[pressed=true]/checkbox: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 flex flex-col",
+    base: "group/dateinput flex flex-col",
     label: [
       "block subpixel-antialiased text-small text-default-600",
       // isRequired=true
-      "group-data-[required=true]:after:content-['*'] group-data-[required=true]:after:text-danger group-data-[required=true]:after:ml-0.5",
+      "group-data-[required=true]/dateinput:after:content-['*'] group-data-[required=true]/dateinput:after:text-danger group-data-[required=true]/dateinput:after:ml-0.5",
       // isInValid=true
-      "group-data-[invalid=true]:text-danger",
+      "group-data-[invalid=true]/dateinput: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]:text-danger",
+      "group-data-[invalid=true]/dateinput:text-danger",
     ], // this wraps the input and the start/end content
     segment: [
-      "group first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
+      "group/dateinput 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,7 +37,8 @@ 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]:flex p-1 relative flex-col gap-1.5",
+    helperWrapper:
+      "hidden group-data-[has-helper=true]/dateinput:flex p-1 relative flex-col gap-1.5",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger",
   },
@@ -49,9 +50,9 @@ const dateInput = tv({
           "hover:bg-default-200",
           "focus-within:hover:bg-default-100",
           // isInvalid=true
-          "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",
+          "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",
         ],
       },
       faded: {
@@ -61,9 +62,9 @@ const dateInput = tv({
           "border-default-200",
           "hover:border-default-400",
           // isInvalid=true
-          "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",
+          "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",
         ],
       },
       bordered: {
@@ -74,9 +75,9 @@ const dateInput = tv({
           "focus-within:border-default-foreground",
           "focus-within:hover:border-default-foreground",
           // isInvalid=true
-          "group-data-[invalid=true]:border-danger",
-          "group-data-[invalid=true]:hover:border-danger",
-          "group-data-[invalid=true]:focus-within:hover:border-danger",
+          "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",
         ],
       },
       underlined: {
@@ -102,7 +103,7 @@ const dateInput = tv({
           "after:h-[2px]",
           "focus-within:after:w-full",
           // isInvalid=true
-          "group-data-[invalid=true]:after:bg-danger",
+          "group-data-[invalid=true]/dateinput: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 w-full",
+    base: "group/datepicker w-full",
     selectorButton: "-mr-2 text-inherit",
     selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
     popoverContent: "p-0 w-full",
@@ -23,9 +23,10 @@ const datePicker = tv({
 const dateRangePicker = tv({
   extend: datePicker,
   slots: {
-    calendar: "group",
+    calendar: "group/daterangepicker",
     bottomContent: "flex flex-col gap-y-2",
-    timeInputWrapper: "flex flex-col group-data-[has-multiple-months=true]:flex-row",
+    timeInputWrapper:
+      "flex flex-col group-data-[has-multiple-months=true]/daterangepicker:flex-row",
     separator: "-mx-1 text-inherit",
   },
 });