Skip to content

Commit

Permalink
feat(Dates): placeholder data attribute (#859)
Browse files Browse the repository at this point in the history 
* feat: add data-placeholder attribute

* docs: update stories to use data-placeholder

* docs: use data-placeholder in demo

* docs: add docs for new data attribute
  • Loading branch information
@epr3
epr3 committed Apr 19, 2024
1 parent cc441ed commit 0037f03
Show file tree
Hide file tree
Showing 20 changed files with 60 additions and 38 deletions.
2 changes: 1 addition & 1 deletion docs/components/demo/DateField/tailwind/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { DateFieldInput, DateFieldRoot, Label } from 'radix-vue'
<DateFieldInput
v-else
:part="item.part"
class="rounded p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand Down
2 changes: 1 addition & 1 deletion docs/components/demo/DatePicker/tailwind/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ import {
<DatePickerInput
v-else
:part="item.part"
class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9 "
class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 "
>
{{ item.value }}
</DatePickerInput>
Expand Down
4 changes: 2 additions & 2 deletions docs/components/demo/DateRangeField/tailwind/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { DateRangeFieldInput, DateRangeFieldRoot, Label } from 'radix-vue'
<DateRangeFieldInput
v-else
:part="item.part"
class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
type="start"
>
{{ item.value }}
Expand All @@ -45,7 +45,7 @@ import { DateRangeFieldInput, DateRangeFieldRoot, Label } from 'radix-vue'
<DateRangeFieldInput
v-else
:part="item.part"
class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
type="end"
>
{{ item.value }}
Expand Down
4 changes: 2 additions & 2 deletions docs/components/demo/DateRangePicker/tailwind/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ import {
<DateRangePickerInput
v-else
:part="item.part"
class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
type="start"
>
{{ item.value }}
Expand All @@ -66,7 +66,7 @@ import {
<DateRangePickerInput
v-else
:part="item.part"
class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
type="end"
>
{{ item.value }}
Expand Down
6 changes: 5 additions & 1 deletion docs/content/components/date-field.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,11 @@ Contains the date field segments
{
attribute: '[data-invalid]',
values: 'Present when invalid',
}
},
{
attribute: '[data-placeholder]',
values: 'Present when no value is set',
},
]"
/>

Expand Down
4 changes: 4 additions & 0 deletions docs/content/components/date-picker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,10 @@ Contains the date picker date field segments
{
attribute: '[data-invalid]',
values: 'Present when invalid',
},
{
attribute: '[data-placeholder]',
values: 'Present when no value is set',
}
]"
/>
Expand Down
6 changes: 5 additions & 1 deletion docs/content/components/date-range-field.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,11 @@ Contains the date field segments
{
attribute: '[data-invalid]',
values: 'Present when invalid',
}
},
{
attribute: '[data-placeholder]',
values: 'Present when no value is set',
},
]"
/>

Expand Down
4 changes: 4 additions & 0 deletions docs/content/components/date-range-picker.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,10 @@ Contains the date picker date field segments
{
attribute: '[data-invalid]',
values: 'Present when invalid',
},
{
attribute: '[data-placeholder]',
values: 'Present when no value is set',
}
]"
/>
Expand Down
16 changes: 8 additions & 8 deletions packages/radix-vue/src/DateField/story/DateFieldChromatic.story.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -50,7 +50,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -73,7 +73,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -97,7 +97,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -122,7 +122,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -147,7 +147,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -172,7 +172,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -196,7 +196,7 @@ const maxValue = new CalendarDate(2024, 2, 29)
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand Down
2 changes: 1 addition & 1 deletion packages/radix-vue/src/DateField/story/DateFieldDefault.story.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { Label } from '@/Label'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand Down
8 changes: 4 additions & 4 deletions packages/radix-vue/src/DateField/story/DateFieldGranular.story.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { Label } from '@/Label'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand Down Expand Up @@ -54,7 +54,7 @@ import { Label } from '@/Label'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand Down Expand Up @@ -83,7 +83,7 @@ import { Label } from '@/Label'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand Down Expand Up @@ -112,7 +112,7 @@ import { Label } from '@/Label'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand Down
2 changes: 1 addition & 1 deletion packages/radix-vue/src/DateField/story/DateFieldInvalid.story.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { Label } from '@/Label'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand Down
12 changes: 6 additions & 6 deletions packages/radix-vue/src/DateField/story/DateFieldLocales.story.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholderdata-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -45,7 +45,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -70,7 +70,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -95,7 +95,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -120,7 +120,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand All @@ -145,7 +145,7 @@ import { DateFieldInput, DateFieldRoot } from '../'
<DateFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DateFieldInput>
Expand Down
6 changes: 6 additions & 0 deletions packages/radix-vue/src/DateField/useDateField.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ function daySegmentAttrs(props: SegmentAttrProps) {
'aria-valuemax': valueMax,
'aria-valuenow': valueNow,
'aria-valuetext': valueText,
'data-placeholder': isEmpty ? '' : undefined,
}
}

Expand All @@ -77,6 +78,7 @@ function monthSegmentAttrs(props: SegmentAttrProps) {
'aria-valuemax': valueMax,
'aria-valuenow': valueNow,
'aria-valuetext': valueText,
'data-placeholder': isEmpty ? '' : undefined,
}
}

Expand All @@ -96,6 +98,7 @@ function yearSegmentAttrs(props: SegmentAttrProps) {
'aria-valuemax': valueMax,
'aria-valuenow': valueNow,
'aria-valuetext': valueText,
'data-placeholder': isEmpty ? '' : undefined,
}
}

Expand All @@ -118,6 +121,7 @@ function hourSegmentAttrs(props: SegmentAttrProps) {
'aria-valuemax': valueMax,
'aria-valuenow': valueNow,
'aria-valuetext': valueText,
'data-placeholder': isEmpty ? '' : undefined,
}
}

Expand All @@ -141,6 +145,7 @@ function minuteSegmentAttrs(props: SegmentAttrProps) {
'aria-valuemax': valueMax,
'aria-valuenow': valueNow,
'aria-valuetext': valueText,
'data-placeholder': isEmpty ? '' : undefined,
}
}

Expand All @@ -164,6 +169,7 @@ function secondSegmentAttrs(props: SegmentAttrProps) {
'aria-valuemax': valueMax,
'aria-valuenow': valueNow,
'aria-valuetext': valueText,
'data-placeholder': isEmpty ? '' : undefined,
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/radix-vue/src/DatePicker/story/DatePickerDefault.story.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ import { Label } from '@/Label'
<DatePickerInput
v-else
:part="item.part"
class="rounded-5px px-1 py-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 py-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DatePickerInput>
Expand Down
2 changes: 1 addition & 1 deletion packages/radix-vue/src/DatePicker/story/_DummyDatePicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(props, emits)
<DatePickerInput
v-else
:part="item.part"
class="rounded-5px px-1 py-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 py-1 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
>
{{ item.value }}
</DatePickerInput>
Expand Down
4 changes: 2 additions & 2 deletions packages/radix-vue/src/DateRangeField/story/DateRangeFieldDefault.story.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { DateRangeFieldInput, DateRangeFieldRoot } from '../'
<DateRangeFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 py-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 py-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
type="start"
>
{{ item.value }}
Expand All @@ -39,7 +39,7 @@ import { DateRangeFieldInput, DateRangeFieldRoot } from '../'
<DateRangeFieldInput
v-else
:part="item.part"
class="rounded-5px px-1 py-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px px-1 py-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
type="end"
>
{{ item.value }}
Expand Down
4 changes: 2 additions & 2 deletions packages/radix-vue/src/DateRangeField/story/_DummyDateRangeField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(props, emits)
<DateRangeFieldInput
v-else
:part="item.part"
class="rounded-5px p-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px p-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
type="start"
>
{{ item.value }}
Expand All @@ -42,7 +42,7 @@ const forwarded = useForwardPropsEmits(props, emits)
<DateRangeFieldInput
v-else
:part="item.part"
class="rounded-5px p-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black aria-[valuetext=Empty]:text-green9"
class="rounded-5px p-1 hover:bg-grass4 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9"
type="end"
>
{{ item.value }}
Expand Down

0 comments on commit 0037f03

Please sign in to comment.