Resize your window to see the "Bar" child being truncated without overflowing.
Use <FlexChild /> when a flex container has extrinsic size.
Due to CSS flow layout,
this often means when the flex container's direction is "row".
It's also true when the flex container has a fixed height
while its direction is "column".
<FlexChild /> prevents common overflow issues.
Its "flex" prop is also more reliable than the default
keyword expansion.
Use <FieldBlock /> and <FieldInline />
to provide explicit labels.
They both nest the input inside the label,
so there's no need for an explicit id prop.
Input components such as <TextField /> and <Checkbox />
don't come with explicit labels by design.
Depend on the situation, they can have implicit labels,
for example via aria-label or aria-labelledby.
Open the Device Toolbar to see the components become bigger in touch devices.
The size of interactive components changes
based on the primary pointer.
For example, <Button /> and <TextField /> will be larger
when the user's pointer is "coarse",
such as a finger on a touchscreen.
This does not only make it easier to interact with the components, but also prevents the auto zooming of Safari on iOS devices.
Switch to Light appearance to see the differences better.
Most apps have 3 layers of surfaces. The base layer is the app "background", which is behind everything. Above the background, there are several "panes", that help users to understand the app structure. The top layer is the many "controls" on the panes, that users interact with to use the app.
A simple approach is for the panes to be front most.
For example, in Light appearance, they will be pure white.
The app background is then dimmed to gray-2
to make the panes look elevated.
Meanwhile, the controls are pushed a bit further to gray-3,
making them look sunken as users can fill in most of them.
An advanced approach is for the controls to be front most.
We can then use shadows
to sunk the input controls (such as text fields)
and raise the action controls (such as buttons),
which is not available in the simple approach.
The panes are then dimmed instead to gray-2,
while the background is pushed further to gray-3.