From eb30879b8b9e8ab60760494aca2c79906a6b09c8 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sat, 14 Sep 2024 15:33:53 +0800 Subject: [PATCH] fix(docs): missing tw nested groups in docs --- apps/docs/app/examples/perf/page.tsx | 2 +- apps/docs/components/theme-switch.tsx | 2 +- apps/docs/content/components/input/custom-styles.ts | 4 ++-- apps/docs/content/components/select/custom-styles.ts | 2 +- apps/docs/content/components/switch/custom-styles.ts | 8 ++++---- .../customization/custom-variants/slots-component.ts | 2 +- apps/docs/content/docs/customization/custom-variants.mdx | 2 +- packages/components/select/stories/select.stories.tsx | 2 +- 8 files changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/docs/app/examples/perf/page.tsx b/apps/docs/app/examples/perf/page.tsx index 79ab457b0a..cc70cf7c80 100644 --- 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]:border-zinc-600", + "group-data-[focus=true]/input: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 index 33da930e3c..5554dbe3ef 100644 --- a/apps/docs/components/theme-switch.tsx +++ b/apps/docs/components/theme-switch.tsx @@ -57,7 +57,7 @@ export const ThemeSwitch: FC = ({className, classNames}) => { "bg-transparent", "rounded-lg", "flex items-center justify-center", - "group-data-[selected=true]:bg-transparent", + "group-data-[selected=true]/toggle: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 index 3908b17561..5b8d511c3f 100644 --- 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]:bg-default-200/50", - "dark:group-data-[focus=true]:bg-default/60", + "group-data-[focus=true]/input:bg-default-200/50", + "dark:group-data-[focus=true]/input: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 index ae2db45e8a..bd7b963f58 100644 --- 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]:-translate-y-5", + label: "group-data-[filled=true]/select:-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 index c4470a56e0..20537838f9 100644 --- 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]:border-primary", + "group-data-[hover=true]/toggle:border-primary", //selected - "group-data-[selected=true]:ml-6", + "group-data-[selected=true]/toggle:ml-6", // pressed - "group-data-[pressed=true]:w-7", - "group-data-[selected]:group-data-[pressed]:ml-4", + "group-data-[pressed=true]/toggle:w-7", + "group-data-[selected]:group-data-[pressed]/toggle:ml-4", ), }} > diff --git a/apps/docs/content/customization/custom-variants/slots-component.ts b/apps/docs/content/customization/custom-variants/slots-component.ts index c1fd3c86cd..1fd09f9273 100644 --- 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]:border-zinc-600", + "group-data-[focus=true]/input: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 index 2c5b0314d5..6d81ec297d 100644 --- 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]:border-zinc-600", + "group-data-[focus=true]/input: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 index 0a58ad10a3..a7bb0c53d1 100644 --- 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) => {