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

[Field] Add filled and focused style hooks #1341

Merged
merged 11 commits into from
Jan 23, 2025
Merged

[Field] Add filled and focused style hooks #1341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
96cd9f4
[Field] Add `filled` and `focused` style hooks
atomiks Jan 16, 2025
f898b95
Undo change
atomiks Jan 16, 2025
48c4342
Lint
atomiks Jan 16, 2025
9831225
Update tests
atomiks Jan 16, 2025
58ac4c3
Merge branch 'master' into feat/field-focused-filled
atomiks Jan 16, 2025
d25b17e
Support Base UI components
atomiks Jan 17, 2025
edf03b7
Amend RadioGroup test
atomiks Jan 17, 2025
d527572
Handle initial states for groups
atomiks Jan 21, 2025
cbdf9e7
Attr docs
atomiks Jan 22, 2025
18fb246
Consistency
atomiks Jan 22, 2025
12a911d
Fix docs error
atomiks Jan 22, 2025
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
6 changes: 6 additions & 0 deletions docs/reference/generated/checkbox-indicator.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@
"data-touched": {
"description": "Present when the checkbox has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the checkbox is checked (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the checkbox is focused (when wrapped in Field.Root)."
},
"data-starting-style": {
"description": "Present when the checkbox indicator is animating in."
},
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/checkbox-root.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,12 @@
},
"data-touched": {
"description": "Present when the checkbox has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the checkbox is checked (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the checkbox is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/field-control.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@
},
"data-touched": {
"description": "Present when the field has been touched."
},
"data-filled": {
"description": "Present when the field is filled."
},
"data-focused": {
"description": "Present when the field control is focused."
}
},
"cssVariables": {}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/field-description.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@
},
"data-touched": {
"description": "Present when the field has been touched."
},
"data-filled": {
"description": "Present when the field is filled."
},
"data-focused": {
"description": "Present when the field control is focused."
}
},
"cssVariables": {}
Expand Down
9 changes: 9 additions & 0 deletions docs/reference/generated/field-error.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@
}
},
"dataAttributes": {
"data-disabled": {
"description": "Present when the field is disabled."
},
"data-valid": {
"description": "Present when the field is in valid state."
},
Expand All @@ -31,6 +34,12 @@
},
"data-touched": {
"description": "Present when the field has been touched."
},
"data-filled": {
"description": "Present when the field is filled."
},
"data-focused": {
"description": "Present when the field control is focused."
}
},
"cssVariables": {}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/field-label.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@
},
"data-touched": {
"description": "Present when the field has been touched."
},
"data-filled": {
"description": "Present when the field is filled."
},
"data-focused": {
"description": "Present when the field control is focused."
}
},
"cssVariables": {}
Expand Down
12 changes: 12 additions & 0 deletions docs/reference/generated/field-root.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,23 @@
"data-disabled": {
"description": "Present when the field is disabled."
},
"data-valid": {
"description": "Present when the field is valid."
},
"data-invalid": {
"description": "Present when the field is invalid."
},
"data-dirty": {
"description": "Present when the field's value has changed."
},
"data-touched": {
"description": "Present when the field has been touched."
},
"data-filled": {
"description": "Present when the field is filled."
},
"data-focused": {
"description": "Present when the field control is focused."
}
},
"cssVariables": {}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/input.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@
},
"data-touched": {
"description": "Present when the input has been touched."
},
"data-filled": {
"description": "Present when the input is filled."
},
"data-focused": {
"description": "Present when the input is focused."
}
},
"cssVariables": {}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/number-field-decrement.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@
"data-touched": {
"description": "Present when the number field has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the number field is filled (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the number field is focused (when wrapped in Field.Root)."
},
"data-scrubbing": {
"description": "Present while scrubbing."
}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/number-field-group.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@
"data-touched": {
"description": "Present when the number field has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the number field is filled (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the number field is focused (when wrapped in Field.Root)."
},
"data-scrubbing": {
"description": "Present while scrubbing."
}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/number-field-increment.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@
"data-touched": {
"description": "Present when the number field has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the number field is filled (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the number field is focused (when wrapped in Field.Root)."
},
"data-scrubbing": {
"description": "Present while scrubbing."
}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/number-field-input.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@
"data-touched": {
"description": "Present when the number field has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the number field is filled (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the number field is focused (when wrapped in Field.Root)."
},
"data-scrubbing": {
"description": "Present while scrubbing."
}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/number-field-root.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,12 @@
"data-touched": {
"description": "Present when the number field has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the number field is filled (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the number field is focused (when wrapped in Field.Root)."
},
"data-scrubbing": {
"description": "Present while scrubbing."
}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/number-field-scrub-area-cursor.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,12 @@
"data-touched": {
"description": "Present when the number field has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the number field is filled (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the number field is focused (when wrapped in Field.Root)."
},
"data-scrubbing": {
"description": "Present while scrubbing."
}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/number-field-scrub-area.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@
"data-touched": {
"description": "Present when the number field has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the number field is filled (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the number field is focused (when wrapped in Field.Root)."
},
"data-scrubbing": {
"description": "Present while scrubbing."
}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/radio-indicator.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@
},
"data-touched": {
"description": "Present when the radio has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the radio is checked (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the radio is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/radio-root.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,12 @@
},
"data-touched": {
"description": "Present when the radio has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the radio is checked (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the radio is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/select-trigger.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,12 @@
},
"data-touched": {
"description": "Present when the select has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the select has a value (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the select trigger is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
3 changes: 3 additions & 0 deletions docs/reference/generated/slider-control.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@
},
"data-touched": {
"description": "Present when the slider has been touched (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the slider is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
3 changes: 3 additions & 0 deletions docs/reference/generated/slider-indicator.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@
},
"data-touched": {
"description": "Present when the slider has been touched (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the slider is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
3 changes: 3 additions & 0 deletions docs/reference/generated/slider-root.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,9 @@
},
"data-touched": {
"description": "Present when the slider has been touched (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the slider is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
3 changes: 3 additions & 0 deletions docs/reference/generated/slider-thumb.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@
},
"data-touched": {
"description": "Present when the slider has been touched (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the slider is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
3 changes: 3 additions & 0 deletions docs/reference/generated/slider-track.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@
},
"data-touched": {
"description": "Present when the slider has been touched (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the slider is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
3 changes: 3 additions & 0 deletions docs/reference/generated/slider-value.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@
},
"data-touched": {
"description": "Present when the slider has been touched (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the slider is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/switch-root.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,12 @@
},
"data-touched": {
"description": "Present when the switch has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the switch is active (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the switch is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
6 changes: 6 additions & 0 deletions docs/reference/generated/switch-thumb.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@
},
"data-touched": {
"description": "Present when the switch has been touched (when wrapped in Field.Root)."
},
"data-filled": {
"description": "Present when the switch is active (when wrapped in Field.Root)."
},
"data-focused": {
"description": "Present when the switch is focused (when wrapped in Field.Root)."
}
},
"cssVariables": {}
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ const testContext = {
dirty: false,
touched: false,
valid: null,
filled: false,
focused: false,
};

describe('<Checkbox.Indicator />', () => {
Expand Down
8 changes: 8 additions & 0 deletions packages/react/src/checkbox/indicator/CheckboxIndicatorDataAttributes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,4 +43,12 @@ export enum CheckboxIndicatorDataAttributes {
* Present when the checkbox's value has changed (when wrapped in Field.Root).
*/
dirty = 'data-dirty',
/**
* Present when the checkbox is checked (when wrapped in Field.Root).
*/
filled = 'data-filled',
/**
* Present when the checkbox is focused (when wrapped in Field.Root).
*/
focused = 'data-focused',
}
8 changes: 8 additions & 0 deletions packages/react/src/checkbox/root/CheckboxRootDataAttributes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,12 @@ export enum CheckboxRootDataAttributes {
* Present when the checkbox's value has changed (when wrapped in Field.Root).
*/
dirty = 'data-dirty',
/**
* Present when the checkbox is checked (when wrapped in Field.Root).
*/
filled = 'data-filled',
/**
* Present when the checkbox is focused (when wrapped in Field.Root).
*/
focused = 'data-focused',
}
Loading
Loading