As stated in the Fluent Desing, a label should be placed above the input component it belongs to. It also says:
Optionally, you can left align labels if space is limited and if fields are of a consistent type and width. Use caution when left aligning the labels as it can decrease readability.
This could of course also be used in, for example a Toolbar. To facilitate placing the label in front of the input instead of above, an Orientation parameter is added to the component. When setting its value to Orientation.Horizontal (default is Orientation.Vertical) an extra attribute orientation with value horizontal is emitted which clears out the margin-bottom value of the label element. When this is used in a toolbar the label can now be lined up in the center without needing additional CSS changes in the application.
As stated in the Fluent Desing, a label should be placed above the input component it belongs to. It also says:
This could of course also be used in, for example a Toolbar. To facilitate placing the label in front of the input instead of above, an
Orientation
parameter is added to the component. When setting its value toOrientation.Horizontal
(default isOrientation.Vertical
) an extra attributeorientation
with valuehorizontal
is emitted which clears out the margin-bottom value of the label element. When this is used in a toolbar the label can now be lined up in the center without needing additional CSS changes in the application.Also (more) unit tests created: