[Bug]: scss fluid headings not working as expected.

[korgan00]

Package

@carbon/type

Browser

Chrome

Package version

11.23.0

React version

No response

Description

The fluid headings change size with the window size and not between breakpoints. Carbon Docs explicitly say that:

These headings are responsive and the type styles change size at different breakpoints.

Reproduction/example

https://carbon-elements.netlify.app/type/examples/preview/

Steps to reproduce

• Install carbon/type.
• Use this SCSS line in any heading. `@include type.type-style('fluid-heading-03', $fluid: true);
• Change window size

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

IBM Quantum Learning

Code of Conduct

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

[tay1orjones]

The fluid headings change size with the window size and not between breakpoints.

@korgan00 They do both, here's a screenshot from the elements preview you linked showing the output of the css:

fluid-heading-03 is the same value as $expressive-heading-03. The spec for this calls for changes at only two breakpoints, xlg and max:

https://github.com/carbon-design-system/carbon/blob/22c934941dfd858f42d989c5610963286ab672d9/packages/type/scss/_styles.scss#L342

https://github.com/carbon-design-system/carbon/blob/22c934941dfd858f42d989c5610963286ab672d9/packages/type/scss/_styles.scss#L322-L337

[korgan00]

@tay1orjones Per documentation words I understood that the size should be fixed per breakpoint:

These headings are responsive and the type styles change size at different breakpoints.

And the implementation inside the demo uses a fixed size too. Is the documentation obsolete?

[korgan00]

@tay1orjones

[tay1orjones]

@korgan00 The output through @carbon/react/@carbon/styles and the elements preview is correct. The carbondesignsystem.com docs simulate screen width and appear to be adding those inline styles that "chop" the definitions into values for each breakpoint.

My understanding is that it's intended for these to use the vw unit and respond to viewport width.

I'll move this issue over to the carbon-website repo since it's technically a bug on there that needs to be fixed. Thanks for pointing this out!

[korgan00]

Thank you

[korgan00]

Any update here? Is there any issue in the carbon-website to follow up on?

[tw15egan]

The text needs to be updated to say something like

These headings are responsive and the type styles change based on the viewport width

[abdonrd]

Any update here? Thanks in advance!

[abdonrd]

I just create an small PR about it: https://github.com/carbon-design-system/carbon-website/pull/4043