- Add variant prop to LabelledBox component
- Ignore labelAsPlaceholder in classic mode
- Add CSS styles for .labelled-box--classic
- Add unit tests for both variants
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replaced deprecated '@import' with '@use' to align with best practices.
Refactored stylesheet to behave as a partial, enhancing SASS compilation
efficiency.
The oveflowing labels were spreading on two lines. I had to wrap a
span inside a label in order to be able to deal with the text-oveflow
plus the absolute positionning.
Previously we enforced the height of the LabelledBox div with height: 100%, but
if the parent container of LabelledBox had an auto height this wasn't working
anymore. Setting height: 100% to a child works only if its parent has a fixed
height. In our situation we needed the LabelledBox to work for the multi select
which has a auto growing height. To solve this issue we just have to force the
parent containers of LabelledBox to display flex in order for it to stretches
its children to take all of its height, including LabelledBox div.
This way initially added for the multi select but after some discussions
we decided to keep the label vertical even for the multi select. But this
could be useful in the future.
Based on recent feedbacks this feature was needed. It is important for
the label to still be accessible to screen readers, that's why we
introduced the offscreen class.
Resolve#60
This component is responsible to display the label as placeholder for forms
input. It was tied inside Input but now we will need to have the same ui
for Select field, by extracting it in a dedicated component we make it
reusable quickly.
