RangeSlider "disabled" does not gray out the label (Labelled) - Githubissues

Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.

https://polaris.shopify.com

Other

5.82k stars 1.18k forks source link

RangeSlider "disabled" does not gray out the label (Labelled) #12927

Open 6farer opened 1 week ago

6farer commented 1 week ago

Summary

When providing disabled={true} as a prop for RangeSlider, the label does not gray out.

It seems the Labelled component inside of RangeSlider does not receive the disabled prop.

See where the fixes needs to be made: https://github.com/Shopify/polaris/blob/c77ac4631f5f6afab4eabd75e21bbf27903220fa/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.tsx#L233 https://github.com/Shopify/polaris/blob/c77ac4631f5f6afab4eabd75e21bbf27903220fa/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx#L89

Expected behavior

When disabled={true} on RangeSlider, label is grayed out.

Actual behavior

When disabled={true} on RangeSlider, label is not grayed out.

Steps to reproduce

Link to sandbox

Set disabled prop to true

Are you using React components?

None

Polaris version number

13.9.0

Browser

Any

Device

Any