Merge pull request #1344 from Bedrock-Layouts/minItem

.storybook/pages/Landing.stories.mdx

@@ -36,7 +36,7 @@ import { LogoOnly } from '../ui-components/LogoOnly'
       <Center centerChildren as='a' href='https://github.com/Bedrock-Layouts/Bedrock/stargazers'>
         <img src='https://img.shields.io/github/stars/Bedrock-Layouts/Bedrock?style=social' alt='GitHub Repo stars'/>
       </Center>
-      <Inline gutter="lg" justify="center" switchAt='20rem'>
+      <Inline gutter="lg" justify="center" switchAt='20rem' minItemWidth="fit-content">
         <Button primary as="a" href="/?path=/docs/getting-started-introduction--page">
           Get Started
         </Button>

.storybook/pages/hero.stories.mdx

@@ -191,7 +191,7 @@ Now the `AppBoundary` will clamp the width of your app to the `xlarge` size opti
 
 Our landing page is coming along. In the next section, we'll be building cards and add them to a responsive grid layout.
 
-<Inline switchAt="25rem" stretch={1} gutter="md">
+<Inline switchAt="25rem" stretch={1} gutter="md" minItemWidth="fit-content">
   <Button
     as="a"
     href="/?path=/docs/getting-started-lesson-4-the-menu-component--page"

.storybook/pages/installation.stories.mdx

@@ -55,7 +55,7 @@ Finally, let's start the development server by running `yarn start`. Navigate to
 
 We are now ready to start building our layout. In the next section, we will learn how to use the `Stack` component to create our first component in our landing page.
 
-<Inline switchAt="25rem" stretch={1} gutter="md">
+<Inline switchAt="25rem" stretch={1} gutter="md" minItemWidth="fit-content">
   <Button as="a" href="/?path=/docs/getting-started-introduction--page">
     Introduction
   </Button>

.storybook/pages/introduction.stories.mdx

@@ -68,7 +68,7 @@ If you would like to take a deeper dive into layout composition, I would recomme
 
 In the following sections, we will be using Bedrock Layout Primitives to create a landing page for a fictional company called Coco Le Belle. To make things simple, we will be using [create-react-app](https://create-react-app.dev) and `yarn`, but you should have no problem using `npm` as your package manager. In the next section we are going to learn how to install Bedrock Layout Primitives into a new project.
 
-<Inline switchAt="25rem" stretch={1} gutter="md">
+<Inline switchAt="25rem" stretch={1} gutter="md" minItemWidth="fit-content">
   <span />
   <span />
   <Button

.storybook/pages/menu.stories.mdx

@@ -158,7 +158,7 @@ Now if we resize to a small mobile screen size, it will look something like this
 
 In the next section we will start to fill out our landing page by adding a Hero section using the `Cover` component. I'll see you there.
 
-<Inline switchAt="25rem" stretch={1} gutter="md">
+<Inline switchAt="25rem" stretch={1} gutter="md" minItemWidth="fit-content">
   <Button as="a" href="/?path=/docs/getting-started-lesson-3-spacing--page">
     Spacing
   </Button>

.storybook/pages/new-arrivals.stories.mdx

@@ -185,7 +185,7 @@ function App() {
       <Center>
         <Stack gutter="xl">
           <h2>New Arrivals</h2>
-          <ColumnDrop gutter="lg" basis="20rem">
+          <ColumnDrop gutter="lg" minItemWidth="20rem">
             {cards.map((title) => (
               <Card key={title} title={title} />
             ))}
@@ -212,7 +212,7 @@ Your browser should now show the following:
   />
 </Center>
 
-The above picture show the cards being optimized to the number of columns that fit the container, based on the `basis` set on the `ColumnDrop` component. When a column drops down to a new row, the precious row's column count does not impact the new row's column count. By default, it will stretch each card, but you can also set the `ColumnDrop` to have `noStretchedColumns` set to `true` to prevent this.
+The above picture show the cards being optimized to the number of columns that fit the container, based on the `minItemWidth` set on the `ColumnDrop` component. When a column drops down to a new row, the precious row's column count does not impact the new row's column count. By default, it will stretch each card, but you can also set the `ColumnDrop` to have `noStretchedColumns` set to `true` to prevent this.
 
 The next option is to use the `Grid` component. So let's update our `App.js` file to use the `Grid` component. We will also need to import the `Grid` component
 
@@ -280,7 +280,7 @@ If you are interested in contributing you can learn more about [contributing cod
 
 Thank you again for taking the time to learn more about Bedrock Layout Primitives. I hope you enjoyed it.
 
-<Inline switchAt="25rem" stretch={1} gutter="md">
+<Inline switchAt="25rem" stretch={1} gutter="md" minItemWidth="fit-content">
   <Button as="a" href="/?path=/docs/getting-started-lesson-5-the-hero--page">
     The Hero
   </Button>

.storybook/pages/spacing.stories.mdx

@@ -86,7 +86,7 @@ Through the remaining parts of this tutorial we will be sticking with the defaul
 
 Now that we have our first component that stacks elements in the block direction, let's start tackling the inline direction.
 
-<Inline switchAt="25rem" stretch={1} gutter="md">
+<Inline switchAt="25rem" stretch={1} gutter="md" minItemWidth="fit-content">
   <Button
     as="a"
     href="/?path=/docs/getting-started-lesson-2-your-first-component--page"

.storybook/pages/stack.stories.mdx

@@ -137,7 +137,7 @@ In the above `Subscribe` component, we are taking advantage of two import parts
 
 The other part of the Stack primitive is the `gutter` prop. This allows you to control the space between the elements. Bedrock Layout Primitives has implemented a default spacing scheme, but this can be adjusted to fit any style guide. In the next section we will learn more about Bedrock Layout Primitives spacing scheme and how to override it with our own.
 
-<Inline switchAt="25rem" stretch={1} gutter="md">
+<Inline switchAt="25rem" stretch={1} gutter="md" minItemWidth="fit-content">
   <Button
     as="a"
     href="/?path=/docs/getting-started-lesson-1-installation--page"

examples/web.dev.stories.mdx

@@ -106,7 +106,7 @@ Create a layout that stretches to fit the space, and snaps to the next line at a
 <Canvas withSource="open">
   <Story name="Deconstructed pancake">
     <Center maxWidth="25rem">
-      <ColumnDrop gutter="sm" basis="150px">
+      <ColumnDrop gutter="sm" minItemWidth="150px">
         <Box>1</Box>
         <Box>2</Box>
         <Box>3</Box>

package.json

@@ -59,15 +59,17 @@
     "@bedrock-layout/use-resize-observer": "^1.0.0",
     "@bedrock-layout/use-stateful-ref": "^1.1.8",
     "browserslist": "^4.16.5",
+    "immer": "^9.0.6",
+    "nth-check": "^2.0.1",
     "open-props": "^1.3.9"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.3",
-    "@storybook/addon-essentials": "^6.5.3",
-    "@storybook/addon-links": "^6.5.3",
-    "@storybook/builder-vite": "^0.1.35",
-    "@storybook/react": "^6.5.3",
-    "@storybook/theming": "^6.5.3",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-vite": "^0.1.36",
+    "@storybook/react": "^6.5.9",
+    "@storybook/theming": "^6.5.9",
     "@types/minify": "^9.0.0",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^17.0.0",

packages/bedrock-layout-css/examples/column-drop.stories.mdx

@@ -65,17 +65,17 @@ You can adjust the space between the child elements by setting the `--gutter` pr
   </Story>
 </Canvas>
 
-## --basis
+## --minItemWidth
 
-The grid will automatically optimize the number of columns based on the width of the container and the value provided to the `--basis` property. By default this is set to `159px`, but you can change this value by setting the `--basis` property in the style.
+The grid will automatically optimize the number of columns based on the width of the container and the value provided to the `--minItemWidth` property. By default this is set to `159px`, but you can change this value by setting the `--minItemWidth` property in the style.
 
-In the below example, The `--basis` is set to `15rem`. As you resize the window, the Grid will recalculate and potentially change the count of columns and rows.
+In the below example, The `--minItemWidth` is set to `15rem`. As you resize the window, the Grid will recalculate and potentially change the count of columns and rows.
 
 <Canvas withSource="open">
-  <Story name="--basis">
+  <Story name="--minItemWidth">
     <div
       data-bedrock-column-drop
-      style={{ "--gutter": "1rem", "--basis": "15rem" }}
+      style={{ "--gutter": "1rem", "--minItemWidth": "15rem" }}
     >
       <Box />
       <Box />

packages/bedrock-layout-css/src/components/column-drop.css

@@ -8,7 +8,7 @@
   initial-value: 0;
 }
 
-@property --basis {
+@property --minItemWidth {
   syntax: "<length-percentage>";
   inherits: true;
   initial-value: 159px;
@@ -24,7 +24,7 @@
 
 [data-bedrock-column-drop] > * {
   margin: 0;
-  flex-basis: var(--basis, 159px);
+  flex-basis: var(--minItemWidth, 159px);
   flex-grow: 1;
   flex-shrink: 1;
 }

packages/bedrock-layout-css/src/components/inline.css

@@ -13,6 +13,12 @@
   initial-value: 0;
 }
 
+@property --minItemWidth {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0;
+}
+
 [data-bedrock-inline] {
   display: flex;
   flex-wrap: nowrap;
@@ -25,11 +31,14 @@
   margin: 0;
 }
 
+[data-bedrock-inline][style*="--minItemWidth"] > * {
+  min-inline-size: var(--minItemWidth, 0);
+}
+
 [data-bedrock-inline][style*="--switchAt"] {
   flex-wrap: wrap;
 }
 [data-bedrock-inline][style*="--switchAt"] > * {
-  min-inline-size: fit-content;
   flex-basis: calc((var(--switchAt) - (100% - var(--gutter, 0px))) * 999);
 }