fd-form-label line-height change from var(--sapContent_LineHeight) to normal broke Form-Facets

[cproinger]

We use the fundamental-Styles to make our own Form-Facet Component because ui5-webcomponents-react does not have it. so we have code like

  return (
    <div ref={ref} className={clsx('fd-facet__container', 'fd-margin-bottom--tiny')} {...rest} role='group' title={label}>
      <label className='fd-form-label'>
        {label + ':'}
      </label>
      <div role={'group'} className='fd-text' style={{maxWidth: '25rem'}}>
        {... snip ...}
      </div>
    </div>
  );

Before our last upgrade we used version 0.26.5 were the alignment was ok. now with 0.33.0 the label is some pixels above the content. that seems to be the case because a) fd-form-label has align-self "flex-start", b) "fd-form-label" as well as "fd-facet__container" have line-height=normal now, which was 'var(--sapContent_LineHeight)' in the past. so our temporary fix is to set the line-height of this label via style-attribute to 'var(--sapContent_LineHeight)'.

By the way https://sap.github.io/fundamental-styles/?path=/docs/sap-fiori-dev-facets--docs seems to be broken currently so if something changed there what i could not identify in the source-code of the sample we may just need a change in our code as well.

Is this issue related to a specific component? Form Facet

What version of the Fundamental Library Styles are you using? 0.33.0

What front-end framework are you implementing in, e.g., Angular, React, etc.? React

Expected behavior Elements should align correctly

[InnaAtanasova]

Hi @cproinger the line height of label should be 1rem or normal per design specs. We updated the default line height of all components to normal (before it was --sapContent_LineHeight) unless the design specs specifically mention the line height.

[InnaAtanasova]

as for the documentation example not working we intentionally hide components that are not intended to be used individually and are only part of other components, like is the case with Facets. You can clone the repo and run the project and then you can see the examples.

[InnaAtanasova]

Could you provide a screenshot with the alignment issue you are having? You can reach out to me in Teams/Slack to quickly discuss it, no need to schedule a meeting or anything, just drop me a message.