diff --git a/packages/bedrock-layout-css/src/components/column-drop.css b/packages/bedrock-layout-css/src/components/column-drop.css
index 74c58041e1..90fd42fcfd 100644
--- a/packages/bedrock-layout-css/src/components/column-drop.css
+++ b/packages/bedrock-layout-css/src/components/column-drop.css
@@ -8,7 +8,7 @@
initial-value: 0;
}
-@property --basis {
+@property --minItemWidth {
syntax: "";
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;
}
diff --git a/packages/bedrock-layout-css/src/components/inline.css b/packages/bedrock-layout-css/src/components/inline.css
index 0622bd6091..137c53e758 100644
--- a/packages/bedrock-layout-css/src/components/inline.css
+++ b/packages/bedrock-layout-css/src/components/inline.css
@@ -13,6 +13,12 @@
initial-value: 0;
}
+@property --minItemWidth {
+ syntax: "";
+ 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);
}
diff --git a/packages/column-drop/__tests__/__snapshots__/column-drop.test.jsx.snap b/packages/column-drop/__tests__/__snapshots__/column-drop.test.jsx.snap
index 571f6c9214..6b9f166c99 100644
--- a/packages/column-drop/__tests__/__snapshots__/column-drop.test.jsx.snap
+++ b/packages/column-drop/__tests__/__snapshots__/column-drop.test.jsx.snap
@@ -19,9 +19,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 1`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -36,8 +36,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 1`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "0px",
+ "--minItemWidth": undefined,
}
}
>
@@ -75,9 +75,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 2`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -92,8 +92,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 2`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "0.0625rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -131,9 +131,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 3`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -148,8 +148,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 3`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "0.125rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -187,9 +187,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 4`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -204,8 +204,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 4`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "0.25rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -243,9 +243,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 5`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -260,8 +260,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 5`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "0.5rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -299,9 +299,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 6`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -316,8 +316,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 6`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "0.75rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -355,9 +355,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 7`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -372,8 +372,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 7`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "1rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -411,9 +411,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 8`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -428,8 +428,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 8`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "1.5rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -467,9 +467,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 9`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -484,8 +484,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 9`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "2rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -523,9 +523,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 10`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -540,8 +540,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 10`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "3rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -579,9 +579,9 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 11`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -596,8 +596,8 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 11`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "4rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -616,7 +616,7 @@ exports[`ColumnDrop > correct usage > renders all the gutter options 11`] = `
`;
-exports[`ColumnDrop > correct usage > renders custom basis 1`] = `
+exports[`ColumnDrop > correct usage > renders custom gutter with number 1`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
@@ -635,9 +635,9 @@ exports[`ColumnDrop > correct usage > renders custom basis 1`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -652,8 +652,8 @@ exports[`ColumnDrop > correct usage > renders custom basis 1`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": "320px",
- "--gutter": "1rem",
+ "--gutter": "320px",
+ "--minItemWidth": undefined,
}
}
>
@@ -672,7 +672,7 @@ exports[`ColumnDrop > correct usage > renders custom basis 1`] = `
`;
-exports[`ColumnDrop > correct usage > renders custom basis as string 1`] = `
+exports[`ColumnDrop > correct usage > renders custom gutter with number 2`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
@@ -691,9 +691,9 @@ exports[`ColumnDrop > correct usage > renders custom basis as string 1`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -708,8 +708,8 @@ exports[`ColumnDrop > correct usage > renders custom basis as string 1`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": "32rem",
- "--gutter": "1rem",
+ "--gutter": "60ch",
+ "--minItemWidth": undefined,
}
}
>
@@ -728,7 +728,7 @@ exports[`ColumnDrop > correct usage > renders custom basis as string 1`] = `
`;
-exports[`ColumnDrop > correct usage > renders custom gutter with number 1`] = `
+exports[`ColumnDrop > correct usage > renders custom minItemWidth 1`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
@@ -747,9 +747,9 @@ exports[`ColumnDrop > correct usage > renders custom gutter with number 1`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -764,8 +764,8 @@ exports[`ColumnDrop > correct usage > renders custom gutter with number 1`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
- "--gutter": "320px",
+ "--gutter": "1rem",
+ "--minItemWidth": "320px",
}
}
>
@@ -784,7 +784,7 @@ exports[`ColumnDrop > correct usage > renders custom gutter with number 1`] = `
`;
-exports[`ColumnDrop > correct usage > renders custom gutter with number 2`] = `
+exports[`ColumnDrop > correct usage > renders custom minItemWidth as string 1`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
@@ -803,9 +803,9 @@ exports[`ColumnDrop > correct usage > renders custom gutter with number 2`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -820,8 +820,8 @@ exports[`ColumnDrop > correct usage > renders custom gutter with number 2`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
- "--gutter": "60ch",
+ "--gutter": "1rem",
+ "--minItemWidth": "32rem",
}
}
>
@@ -859,9 +859,9 @@ exports[`ColumnDrop > correct usage > renders default gutter of 0px when no gutt
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -876,8 +876,8 @@ exports[`ColumnDrop > correct usage > renders default gutter of 0px when no gutt
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": undefined,
+ "--minItemWidth": undefined,
}
}
>
@@ -915,9 +915,9 @@ exports[`ColumnDrop > correct usage > renders with no stretch columns 1`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
@@ -932,8 +932,8 @@ exports[`ColumnDrop > correct usage > renders with no stretch columns 1`] = `
data-bedrock-column-drop="no-stretched-columns"
style={
{
- "--basis": undefined,
"--gutter": "1rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -971,9 +971,9 @@ exports[`ColumnDrop > correct usage > renders with theme overrides 1`] = `
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -988,8 +988,8 @@ exports[`ColumnDrop > correct usage > renders with theme overrides 1`] = `
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "200px",
+ "--minItemWidth": undefined,
}
}
>
@@ -1027,9 +1027,9 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -1044,8 +1044,8 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "1rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -1064,7 +1064,7 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
`;
-exports[`ColumnDrop > incorrect usage > renders default with console error with basis input 1`] = `
+exports[`ColumnDrop > incorrect usage > renders default with console error with incorrect noStretchColumns input 1`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
@@ -1083,13 +1083,13 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
- -webkit-box-flex: 1;
- -webkit-flex-grow: 1;
- -ms-flex-positive: 1;
- flex-grow: 1;
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
+ -webkit-box-flex: 0;
+ -webkit-flex-grow: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
@@ -1100,8 +1100,8 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "1rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -1120,7 +1120,7 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
`;
-exports[`ColumnDrop > incorrect usage > renders default with console error with incorrect noStretchColumns input 1`] = `
+exports[`ColumnDrop > incorrect usage > renders default with console error with minItemWidth input 1`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
@@ -1139,13 +1139,13 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
- -webkit-box-flex: 0;
- -webkit-flex-grow: 0;
- -ms-flex-positive: 0;
- flex-grow: 0;
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
+ -webkit-box-flex: 1;
+ -webkit-flex-grow: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
-webkit-flex-shrink: 1;
-ms-flex-negative: 1;
flex-shrink: 1;
@@ -1156,8 +1156,8 @@ exports[`ColumnDrop > incorrect usage > renders default with console error with
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": "1rem",
+ "--minItemWidth": undefined,
}
}
>
@@ -1195,9 +1195,9 @@ exports[`ColumnDrop > incorrect usage > renders default with wrong gutter input
.c0 > * {
margin: 0;
- -webkit-flex-basis: var(--basis,159px);
- -ms-flex-preferred-size: var(--basis,159px);
- flex-basis: var(--basis,159px);
+ -webkit-flex-basis: var(--minItemWidth,159px);
+ -ms-flex-preferred-size: var(--minItemWidth,159px);
+ flex-basis: var(--minItemWidth,159px);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
@@ -1212,8 +1212,8 @@ exports[`ColumnDrop > incorrect usage > renders default with wrong gutter input
data-bedrock-column-drop=""
style={
{
- "--basis": undefined,
"--gutter": undefined,
+ "--minItemWidth": undefined,
}
}
>
diff --git a/packages/column-drop/__tests__/column-drop.test.jsx b/packages/column-drop/__tests__/column-drop.test.jsx
index f72c662a96..71028e5c26 100644
--- a/packages/column-drop/__tests__/column-drop.test.jsx
+++ b/packages/column-drop/__tests__/column-drop.test.jsx
@@ -70,9 +70,9 @@ describe("ColumnDrop", () => {
expect(errorStack.toJSON()).toMatchSnapshot();
});
- it("renders custom basis", () => {
+ it("renders custom minItemWidth", () => {
const columnDrop = create(
-
+
);
@@ -88,9 +88,9 @@ describe("ColumnDrop", () => {
expect(columnDrop.toJSON()).toMatchSnapshot();
});
- it("renders custom basis as string", () => {
+ it("renders custom minItemWidth as string", () => {
const columnDrop = create(
-
+
);
@@ -135,11 +135,11 @@ describe("ColumnDrop", () => {
expect(errorStack.toJSON()).toMatchSnapshot();
});
- it("renders default with console error with basis input", () => {
+ it("renders default with console error with minItemWidth input", () => {
expect(console.error).not.toBeCalled();
const errorStack = create(
-
+
);
@@ -165,7 +165,7 @@ describe("ColumnDrop", () => {
expect(console.error).not.toBeCalled();
const errorStack = create(
-
+
);
diff --git a/packages/column-drop/examples/ColumnDrop.stories.mdx b/packages/column-drop/examples/ColumnDrop.stories.mdx
index f7a47c7b21..04e60c2e07 100644
--- a/packages/column-drop/examples/ColumnDrop.stories.mdx
+++ b/packages/column-drop/examples/ColumnDrop.stories.mdx
@@ -127,15 +127,15 @@ Here are the possible values for `gutter` by default: