[Bug]: Dropdown skeleton state missing label

[shixiedesign]

Package

@carbon/react, @carbon/styles, carbon-components, carbon-components-react

Browser

No response

Package version

Latest

React version

No response

Description

It appears that skeleton state of Dropdown component is missing the label. Only the field itself get skeleton-ized, and label went missing. This caused a small page jump when loading. Other common form inputs has the label in skeleton state already.

Also, because storybook doesn't contain the skeleton states of these components, I couldn't check what they are:

• Multiselect
• Combo box
• Time picker

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-dropdown--skeleton

Steps to reproduce

Click through for skeleton state story and look for label

Suggested Severity

None

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[tay1orjones]

skeleton state of Dropdown component is missing the label

Interestingly, the DOM node is there, it's just not getting the appropriate styles it seems.

carbon/packages/react/src/components/Dropdown/Dropdown.Skeleton.tsx

Line 39 in 07b5f48

<span className={`${prefix}--list-box__label`} />

I'm not sure why, but it's the same way in v10 as well. Also there is no hideLabel option. Maybe this was intentional at one point, but I think we should add the label in by default so there's no page jump when swapping out the skeleton for the real component, and also add the hideLabel option to toggle the rendering of the label or not for cases where a label isn't used on the real component.

Also, because storybook doesn't contain the skeleton states of these components, I couldn't check what they are:

1. Multiselect
2. Combo box
3. Time picker

MultiSelect, FilterableMultiSelect, Combobox, and Dropdown are all part of the "Dropdown family", so the intent is for all of these components you would use the Dropdown skeleton. All the more reason why we should fix the label issue above.

Timepicker is a combination of TextInput and Select components. For a skeleton state experience you should be able to use the TextInputSkeleton without hideLabel next to 1-2 SelectSkeleton components with the hideLabel.