CaptionLabel should be used inside Dropdown

[hsnaydd]

The Dropdown component uses CaptionLabel styles in it, but not this component itself. I think the CaptionLabel component itself should be used here instead of the class.

react-day-picker/src/components/Dropdown.tsx

Lines 43 to 62 in 1e191b2

	<span
	data-disabled={selectProps.disabled}
	className={classNames[UI.DropdownRoot]}
	>
	<components.Select className={cssClassSelect} {...selectProps}>
	{options?.map(({ value, label, disabled }) => (
	<components.Option key={value} value={value} disabled={disabled}>
	{label}
	</components.Option>
	))}
	</components.Select>
	<span className={classNames[UI.CaptionLabel]} aria-hidden>
	{selectedOption?.label}
	<components.Chevron
	orientation="down"
	size={18}
	className={classNames[UI.Chevron]}
	/>
	</span>
	</span>

We should also use it in the following lines (or maybe we need to create new ones). Currently, we cannot directly modify the styles of these places.

react-day-picker/src/DayPicker.tsx

Lines 381 to 383 in 1e191b2

	<span role="status" aria-live="polite">
	{formatMonthDropdown(calendarMonth.date.getMonth())}
	</span>

react-day-picker/src/DayPicker.tsx

Lines 399 to 401 in 1e191b2

	<span role="status" aria-live="polite">
	{formatYearDropdown(calendarMonth.date.getFullYear())}
	</span>

[gpbl]

Hi @hsnaydd I'm not sure I follow the issue here. Would you mind to expand a bit more what's going on here? Thanks for your help!

[hsnaydd]

Hi @gpbl, İf you look at the first code block, in the line 54, UI.CaptionLabel class is using in the Dropdown. If I change the style of CaptionLabel via its class name, this place will also be affected. If we are using CaptionLabel's styles here, I think we should use the CaptionLabel component itself, not just its styles.

Additionally, as seen in the 2nd and 3rd code blocks. if a dropdown is not active, the month or year information is wrapped by a span element. We cannot directly modify the styles of these elements because they do not have any classes. Maybe we can also use the CaptionLabel component here.

[gpbl]

UI.CaptionLabel class is using in the Dropdown. If I change the style of CaptionLabel via its class name, this place will also be affected.

Oh I see what you mean. My choice there was to make the visible dropdown label to match the caption label style - and have the chevron on the right to show it is a dropdown element. You can target that via .rdp-caption_label[aria-hidden]

Additionally, as seen in the 2nd and 3rd code blocks. if a dropdown is not active, the month or year information is wrapped by a span element.

Its only purpose is to have an aria-live region announced by screen readers and I wasn't expected to style it. What is your use case?

I'm sure that with tailwind you can target a child element (the `>span[role="status"]). (right now O don't remember the name of such feature)

I'm moving this to the Discussion - I'm hesitant to update the classnames of that aria-hidden caption, because I'm not sure how to keep backward compatibility with existing CSS...

[hsnaydd]

My choice there was to make the visible dropdown label to match the caption label style

This is why I am making this suggestion. I need to style three places for the same look.

1. CaptionLabel component (When captionLayout="label" )
2. The label in the Dropdown (if the Dropdown is active)
3. The label in the DropdownNav (if the Dropdown is not active)

You can target that via .rdp-caption_label[aria-hidden]

This is not the real problem here. This class does not belong to this component. If the user styles CaptionLabel via the `.rdp-caption_label' class, the changes may break here. Because the user does not expect that the changes made to CaptionLabel will also affect here unless the same component is used.