Add ZeroWidthStack demo

mui · Dec 22, 2022 · 096cede · 096cede
1 parent 20ff652
commit 096cede
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 0 deletions.
diff --git a/docs/data/joy/components/stack/ZeroWidthStack.js b/docs/data/joy/components/stack/ZeroWidthStack.js
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import Stack from '@mui/joy/Stack';
+import { styled } from '@mui/joy/styles';
+import Typography from '@mui/joy/Typography';
+
+const Item = styled(Sheet)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.vars.palette.text.tertiary,
+  maxWidth: '400px',
+}));
+
+const message = `Truncation should be conditionally applicable on this long line of text
+ as this is a much longer line than what the container can support. `;
+
+export default function ZeroWidthStack() {
+  return (
+    <Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3 }}>
+      <Item
+        sx={{
+          my: 1,
+          mx: 'auto',
+          p: 2,
+        }}
+      >
+        <Stack spacing={2} direction="row" alignItems="center">
+          <Stack>
+            <Avatar>W</Avatar>
+          </Stack>
+          <Stack>
+            <Typography noWrap>{message}</Typography>
+          </Stack>
+        </Stack>
+      </Item>
+      <Item
+        sx={{
+          my: 1,
+          mx: 'auto',
+          p: 2,
+        }}
+      >
+        <Stack spacing={2} direction="row" alignItems="center">
+          <Stack>
+            <Avatar>W</Avatar>
+          </Stack>
+          <Stack sx={{ minWidth: 0 }}>
+            <Typography noWrap>{message}</Typography>
+          </Stack>
+        </Stack>
+      </Item>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/stack/ZeroWidthStack.tsx b/docs/data/joy/components/stack/ZeroWidthStack.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import Avatar from '@mui/joy/Avatar';
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import Stack from '@mui/joy/Stack';
+import { styled } from '@mui/joy/styles';
+import Typography from '@mui/joy/Typography';
+
+const Item = styled(Sheet)(({ theme }) => ({
+  ...theme.typography.body2,
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  color: theme.vars.palette.text.tertiary,
+  maxWidth: '400px',
+}));
+
+const message = `Truncation should be conditionally applicable on this long line of text
+ as this is a much longer line than what the container can support. `;
+
+export default function ZeroWidthStack() {
+  return (
+    <Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3 }}>
+      <Item
+        sx={{
+          my: 1,
+          mx: 'auto',
+          p: 2,
+        }}
+      >
+        <Stack spacing={2} direction="row" alignItems="center">
+          <Stack>
+            <Avatar>W</Avatar>
+          </Stack>
+          <Stack>
+            <Typography noWrap>{message}</Typography>
+          </Stack>
+        </Stack>
+      </Item>
+      <Item
+        sx={{
+          my: 1,
+          mx: 'auto',
+          p: 2,
+        }}
+      >
+        <Stack spacing={2} direction="row" alignItems="center">
+          <Stack>
+            <Avatar>W</Avatar>
+          </Stack>
+          <Stack sx={{ minWidth: 0 }}>
+            <Typography noWrap>{message}</Typography>
+          </Stack>
+        </Stack>
+      </Item>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/stack/stack.md b/docs/data/joy/components/stack/stack.md
@@ -86,6 +86,26 @@ For instance, the top-margin on the `Button` component below will be ignored.
 
 A [RFC](https://github.com/mui/material-ui/issues/33754) to address this issue is already open.
 
+### white-space: nowrap
+
+The initial setting on flex items is `min-width: auto`.
+This causes a positioning conflict when children use `white-space: nowrap;`.
+You can reproduce the issue with:
+
+```jsx
+<Stack direction="row">
+  <Typography noWrap>
+```
+
+In order for the item to stay within the container you need to set `min-width: 0`.
+
+```jsx
+<Stack direction="row" sx={{ minWidth: 0 }}>
+  <Typography noWrap>
+```
+
+{{"demo": "ZeroWidthStack.js", "bg": true}}
+
 ## Anatomy
 
 The Stack component is composed of a single root `<div>` element: