Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(theme): applied tw nested group #3658

Merged
merged 14 commits into from
Sep 13, 2024
+216 −141
Merged

fix(theme): applied tw nested group #3658

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
c15e9df
fix(theme): apply nested group for checkbox
wingkwong Aug 15, 2024
c2ee1ba
fix(theme): apply nested group for autocomplete
wingkwong Aug 15, 2024
d07d4f8
fix(theme): apply nested group for select
wingkwong Aug 15, 2024
6721454
fix(theme): apply nested group for toggle
wingkwong Aug 15, 2024
b227721
fix(theme): apply nested group for radio
wingkwong Aug 15, 2024
c808266
fix(theme): apply nested group for input
wingkwong Aug 15, 2024
1be8098
fix(theme): apply nested group for datepicker
wingkwong Aug 15, 2024
0dcd201
fix(theme): apply nested group for dateinput
wingkwong Aug 15, 2024
3e16e5d
chore(changeset): add changeset
wingkwong Aug 15, 2024
62abd17
Merge branch 'canary' into fix/eng-1199
wingkwong Sep 9, 2024
6a0cf30
chore(changeset): add issue number
wingkwong Sep 9, 2024
06080dc
chore(theme): format code
wingkwong Sep 9, 2024
b8e4be2
Merge branch 'canary' into fix/eng-1199
wingkwong Sep 11, 2024
c7d4a9c
feat(table): add TableWithSwitch
wingkwong Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/clean-teachers-heal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@nextui-org/theme": patch
---

applied tw nested group (#3544, #2324)
wingkwong marked this conversation as resolved.
Show resolved Hide resolved
6 changes: 3 additions & 3 deletions packages/core/theme/src/components/autocomplete.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -15,11 +15,11 @@ const autocomplete = tv({
"cursor-text",
"opacity-0",
"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]:cursor-pointer",
"sm:data-[visible=true]:opacity-0", // only visible on hover
"sm:group-data-[hover=true]:data-[visible=true]:opacity-100",
"sm:group-data-[hover=true]:data-[visible=true]/autocomplete:opacity-100",
],
selectorButton: "text-medium",
},
Expand Down
16 changes: 8 additions & 8 deletions packages/core/theme/src/components/checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
base: "group/checkbox relative max-w-fit inline-flex items-center justify-start cursor-pointer tap-highlight-transparent p-2 -m-2",
wrapper: [
"relative",
"inline-flex",
Expand All @@ -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: {
Expand Down Expand Up @@ -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",
],
},
},
Expand All @@ -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",
Expand Down
33 changes: 17 additions & 16 deletions packages/core/theme/src/components/date-input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
},
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand All @@ -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",
],
},
},
Expand Down
7 changes: 4 additions & 3 deletions packages/core/theme/src/components/date-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
},
});
Expand Down
Loading