@instructure/ui-flex 10.12.1-snapshot-9 → 10.12.1-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.12.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-snapshot-9) (2025-03-06)
+## [10.12.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.12.1-snapshot-10) (2025-03-06)
 
 **Note:** Version bump only for package @instructure/ui-flex
 

package/es/Flex/Item/__new-tests__/FlexItem.test.js

@@ -0,0 +1,57 @@
+var _Item, _Item2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { Item } from '../index';
+describe('<Item />', () => {
+  it('should render children', async () => {
+    const _render = render(_Item || (_Item = /*#__PURE__*/React.createElement(Item, null, "Flex item 1"))),
+      container = _render.container;
+    const item = container.querySelector('[class$="-flexItem"]');
+    expect(item).toBeInTheDocument();
+    expect(item).toHaveTextContent('Flex item 1');
+  });
+  it('should support an elementRef prop', async () => {
+    const elementRef = vi.fn();
+    const _render2 = render(/*#__PURE__*/React.createElement(Item, {
+        elementRef: elementRef
+      }, "Flex item 2")),
+      container = _render2.container;
+    const item = container.querySelector('[class$="-flexItem"]');
+    await waitFor(() => {
+      expect(elementRef).toHaveBeenCalledWith(item);
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = render(_Item2 || (_Item2 = /*#__PURE__*/React.createElement(Item, null, "Flex item 3"))),
+      container = _render3.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/es/Flex/__new-tests__/Flex.test.js

@@ -0,0 +1,180 @@
+var _Flex, _Flex2, _div, _Flex3, _Flex4, _Flex5, _Flex6, _Flex7, _Flex8, _Flex9, _Flex10, _Flex11, _Flex12, _Flex13, _Flex$Item, _Flex14;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { Flex } from '../index';
+describe('<Flex />', () => {
+  it('should render Flex.Items as children', async () => {
+    const _render = render(_Flex || (_Flex = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 3"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 4")))),
+      container = _render.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    expect(flex).toBeInTheDocument();
+    const items = flex === null || flex === void 0 ? void 0 : flex.querySelectorAll('[class$="-flexItem"]');
+    expect(items === null || items === void 0 ? void 0 : items.length).toBe(4);
+  });
+  it('should render other markup as children', async () => {
+    const _render2 = render(_Flex2 || (_Flex2 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement("div", null, "foo"), /*#__PURE__*/React.createElement("div", null, "bar"), /*#__PURE__*/React.createElement("div", null, "baz")))),
+      container = _render2.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const childs = flex === null || flex === void 0 ? void 0 : flex.childNodes;
+    expect(childs === null || childs === void 0 ? void 0 : childs.length).toBe(3);
+  });
+  it('should render children when children is a function', async () => {
+    render(/*#__PURE__*/React.createElement(Flex, null, () => _div || (_div = /*#__PURE__*/React.createElement("div", null, "hello world"))));
+    const child = screen.getByText('hello world');
+    expect(child).toBeInTheDocument();
+  });
+  it('should render no markup if there are no children', async () => {
+    const _render3 = render(_Flex3 || (_Flex3 = /*#__PURE__*/React.createElement(Flex, null))),
+      container = _render3.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    expect(flex).not.toBeInTheDocument();
+  });
+  it('should accept width and height as props', async () => {
+    const _render4 = render(_Flex4 || (_Flex4 = /*#__PURE__*/React.createElement(Flex, {
+        width: "400px",
+        height: "200px"
+      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 3"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 4")))),
+      container = _render4.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.width).toBe('400px');
+    expect(flexStyle.height).toBe('200px');
+  });
+  it('should set flex-direction with the direction property', async () => {
+    const _render5 = render(_Flex5 || (_Flex5 = /*#__PURE__*/React.createElement(Flex, {
+        direction: "column"
+      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+      container = _render5.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.flexDirection).toBe('column');
+  });
+  it('should render an inline-flex container with the display property', async () => {
+    const _render6 = render(_Flex6 || (_Flex6 = /*#__PURE__*/React.createElement(Flex, {
+        display: "inline-flex"
+      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+      container = _render6.container;
+    const flex = container.querySelector('[class$="-inlineFlex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.display).toBe('inline-flex');
+  });
+  it('should set align-items with the alignItems property', async () => {
+    const _render7 = render(_Flex7 || (_Flex7 = /*#__PURE__*/React.createElement(Flex, {
+        alignItems: "start"
+      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+      container = _render7.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.alignItems).toBe('flex-start');
+  });
+  it('should set justify-content with the justifyItems property', async () => {
+    const _render8 = render(_Flex8 || (_Flex8 = /*#__PURE__*/React.createElement(Flex, {
+        justifyItems: "space-between"
+      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+      container = _render8.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.justifyContent).toBe('space-between');
+  });
+  it('should set flex-wrap with the wrap property', async () => {
+    const _render9 = render(_Flex9 || (_Flex9 = /*#__PURE__*/React.createElement(Flex, {
+        wrap: "wrap"
+      }, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+      container = _render9.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.flexWrap).toBe('wrap');
+  });
+  it('should let Flex.Items align themselves with the align property', async () => {
+    const _render10 = render(_Flex10 || (_Flex10 = /*#__PURE__*/React.createElement(Flex, {
+        alignItems: "end"
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
+        align: "stretch"
+      }, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+      container = _render10.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const item = screen.getByText('Flex item 1');
+    const flexStyle = window.getComputedStyle(flex);
+    const itemStyle = window.getComputedStyle(item);
+    expect(flexStyle.alignItems).toBe('flex-end');
+    expect(itemStyle.alignSelf).toBe('stretch');
+  });
+  it('should let Flex.Items flex-grow with the shouldGrow property', async () => {
+    render(_Flex11 || (_Flex11 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, {
+      shouldGrow: true
+    }, "Flex item 2"))));
+    const item1 = screen.getByText('Flex item 1');
+    const item2 = screen.getByText('Flex item 2');
+    const item1Style = window.getComputedStyle(item1);
+    const item2Style = window.getComputedStyle(item2);
+    expect(item1Style.flexGrow).toBe('');
+    expect(item2Style.flexGrow).toBe('1');
+  });
+  it('should let Flex.Items flex-shrink with the shouldShrink property', async () => {
+    render(_Flex12 || (_Flex12 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, {
+      shouldShrink: true
+    }, "Flex item 2"))));
+    const item1 = screen.getByText('Flex item 1');
+    const item2 = screen.getByText('Flex item 2');
+    const item1Style = window.getComputedStyle(item1);
+    const item2Style = window.getComputedStyle(item2);
+    expect(item1Style.flexShrink).toBe('0');
+    expect(item2Style.flexShrink).toBe('1');
+  });
+  it('should set flex-basis and min-width on Flex.Items with the size property', async () => {
+    render(_Flex13 || (_Flex13 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2"), /*#__PURE__*/React.createElement(Flex.Item, {
+      size: "100px"
+    }, "Flex item 3"))));
+    const item2 = screen.getByText('Flex item 2');
+    const item3 = screen.getByText('Flex item 3');
+    const item2Style = window.getComputedStyle(item2);
+    const item3Style = window.getComputedStyle(item3);
+    expect(item2Style.flexBasis).toBe('');
+    expect(item3Style.flexBasis).toBe('100px');
+    expect(item3Style.minWidth).toBe('100px');
+  });
+  it('should support an elementRef prop', async () => {
+    const elementRef = vi.fn();
+    const _render11 = render(/*#__PURE__*/React.createElement(Flex, {
+        elementRef: elementRef
+      }, _Flex$Item || (_Flex$Item = /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item")))),
+      container = _render11.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    await waitFor(() => {
+      expect(elementRef).toHaveBeenCalledWith(flex);
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render12 = render(_Flex14 || (_Flex14 = /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 1"), /*#__PURE__*/React.createElement(Flex.Item, null, "Flex item 2")))),
+      container = _render12.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/lib/Flex/Item/__new-tests__/FlexItem.test.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+require("@testing-library/jest-dom");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+var _Item, _Item2;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<Item />', () => {
+  it('should render children', async () => {
+    const _render = (0, _react2.render)(_Item || (_Item = /*#__PURE__*/_react.default.createElement(_index.Item, null, "Flex item 1"))),
+      container = _render.container;
+    const item = container.querySelector('[class$="-flexItem"]');
+    expect(item).toBeInTheDocument();
+    expect(item).toHaveTextContent('Flex item 1');
+  });
+  it('should support an elementRef prop', async () => {
+    const elementRef = _vitest.vi.fn();
+    const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Item, {
+        elementRef: elementRef
+      }, "Flex item 2")),
+      container = _render2.container;
+    const item = container.querySelector('[class$="-flexItem"]');
+    await (0, _react2.waitFor)(() => {
+      expect(elementRef).toHaveBeenCalledWith(item);
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render3 = (0, _react2.render)(_Item2 || (_Item2 = /*#__PURE__*/_react.default.createElement(_index.Item, null, "Flex item 3"))),
+      container = _render3.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/lib/Flex/__new-tests__/Flex.test.js

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+require("@testing-library/jest-dom");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+var _Flex, _Flex2, _div, _Flex3, _Flex4, _Flex5, _Flex6, _Flex7, _Flex8, _Flex9, _Flex10, _Flex11, _Flex12, _Flex13, _Flex$Item, _Flex14;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+describe('<Flex />', () => {
+  it('should render Flex.Items as children', async () => {
+    const _render = (0, _react2.render)(_Flex || (_Flex = /*#__PURE__*/_react.default.createElement(_index.Flex, null, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 2"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 3"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 4")))),
+      container = _render.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    expect(flex).toBeInTheDocument();
+    const items = flex === null || flex === void 0 ? void 0 : flex.querySelectorAll('[class$="-flexItem"]');
+    expect(items === null || items === void 0 ? void 0 : items.length).toBe(4);
+  });
+  it('should render other markup as children', async () => {
+    const _render2 = (0, _react2.render)(_Flex2 || (_Flex2 = /*#__PURE__*/_react.default.createElement(_index.Flex, null, /*#__PURE__*/_react.default.createElement("div", null, "foo"), /*#__PURE__*/_react.default.createElement("div", null, "bar"), /*#__PURE__*/_react.default.createElement("div", null, "baz")))),
+      container = _render2.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const childs = flex === null || flex === void 0 ? void 0 : flex.childNodes;
+    expect(childs === null || childs === void 0 ? void 0 : childs.length).toBe(3);
+  });
+  it('should render children when children is a function', async () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Flex, null, () => _div || (_div = /*#__PURE__*/_react.default.createElement("div", null, "hello world"))));
+    const child = _react2.screen.getByText('hello world');
+    expect(child).toBeInTheDocument();
+  });
+  it('should render no markup if there are no children', async () => {
+    const _render3 = (0, _react2.render)(_Flex3 || (_Flex3 = /*#__PURE__*/_react.default.createElement(_index.Flex, null))),
+      container = _render3.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    expect(flex).not.toBeInTheDocument();
+  });
+  it('should accept width and height as props', async () => {
+    const _render4 = (0, _react2.render)(_Flex4 || (_Flex4 = /*#__PURE__*/_react.default.createElement(_index.Flex, {
+        width: "400px",
+        height: "200px"
+      }, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 2"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 3"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 4")))),
+      container = _render4.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.width).toBe('400px');
+    expect(flexStyle.height).toBe('200px');
+  });
+  it('should set flex-direction with the direction property', async () => {
+    const _render5 = (0, _react2.render)(_Flex5 || (_Flex5 = /*#__PURE__*/_react.default.createElement(_index.Flex, {
+        direction: "column"
+      }, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 2")))),
+      container = _render5.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.flexDirection).toBe('column');
+  });
+  it('should render an inline-flex container with the display property', async () => {
+    const _render6 = (0, _react2.render)(_Flex6 || (_Flex6 = /*#__PURE__*/_react.default.createElement(_index.Flex, {
+        display: "inline-flex"
+      }, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 2")))),
+      container = _render6.container;
+    const flex = container.querySelector('[class$="-inlineFlex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.display).toBe('inline-flex');
+  });
+  it('should set align-items with the alignItems property', async () => {
+    const _render7 = (0, _react2.render)(_Flex7 || (_Flex7 = /*#__PURE__*/_react.default.createElement(_index.Flex, {
+        alignItems: "start"
+      }, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 2")))),
+      container = _render7.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.alignItems).toBe('flex-start');
+  });
+  it('should set justify-content with the justifyItems property', async () => {
+    const _render8 = (0, _react2.render)(_Flex8 || (_Flex8 = /*#__PURE__*/_react.default.createElement(_index.Flex, {
+        justifyItems: "space-between"
+      }, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 2")))),
+      container = _render8.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.justifyContent).toBe('space-between');
+  });
+  it('should set flex-wrap with the wrap property', async () => {
+    const _render9 = (0, _react2.render)(_Flex9 || (_Flex9 = /*#__PURE__*/_react.default.createElement(_index.Flex, {
+        wrap: "wrap"
+      }, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 2")))),
+      container = _render9.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const flexStyle = window.getComputedStyle(flex);
+    expect(flexStyle.flexWrap).toBe('wrap');
+  });
+  it('should let Flex.Items align themselves with the align property', async () => {
+    const _render10 = (0, _react2.render)(_Flex10 || (_Flex10 = /*#__PURE__*/_react.default.createElement(_index.Flex, {
+        alignItems: "end"
+      }, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, {
+        align: "stretch"
+      }, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 2")))),
+      container = _render10.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    const item = _react2.screen.getByText('Flex item 1');
+    const flexStyle = window.getComputedStyle(flex);
+    const itemStyle = window.getComputedStyle(item);
+    expect(flexStyle.alignItems).toBe('flex-end');
+    expect(itemStyle.alignSelf).toBe('stretch');
+  });
+  it('should let Flex.Items flex-grow with the shouldGrow property', async () => {
+    (0, _react2.render)(_Flex11 || (_Flex11 = /*#__PURE__*/_react.default.createElement(_index.Flex, null, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, {
+      shouldGrow: true
+    }, "Flex item 2"))));
+    const item1 = _react2.screen.getByText('Flex item 1');
+    const item2 = _react2.screen.getByText('Flex item 2');
+    const item1Style = window.getComputedStyle(item1);
+    const item2Style = window.getComputedStyle(item2);
+    expect(item1Style.flexGrow).toBe('');
+    expect(item2Style.flexGrow).toBe('1');
+  });
+  it('should let Flex.Items flex-shrink with the shouldShrink property', async () => {
+    (0, _react2.render)(_Flex12 || (_Flex12 = /*#__PURE__*/_react.default.createElement(_index.Flex, null, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, {
+      shouldShrink: true
+    }, "Flex item 2"))));
+    const item1 = _react2.screen.getByText('Flex item 1');
+    const item2 = _react2.screen.getByText('Flex item 2');
+    const item1Style = window.getComputedStyle(item1);
+    const item2Style = window.getComputedStyle(item2);
+    expect(item1Style.flexShrink).toBe('0');
+    expect(item2Style.flexShrink).toBe('1');
+  });
+  it('should set flex-basis and min-width on Flex.Items with the size property', async () => {
+    (0, _react2.render)(_Flex13 || (_Flex13 = /*#__PURE__*/_react.default.createElement(_index.Flex, null, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 2"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, {
+      size: "100px"
+    }, "Flex item 3"))));
+    const item2 = _react2.screen.getByText('Flex item 2');
+    const item3 = _react2.screen.getByText('Flex item 3');
+    const item2Style = window.getComputedStyle(item2);
+    const item3Style = window.getComputedStyle(item3);
+    expect(item2Style.flexBasis).toBe('');
+    expect(item3Style.flexBasis).toBe('100px');
+    expect(item3Style.minWidth).toBe('100px');
+  });
+  it('should support an elementRef prop', async () => {
+    const elementRef = _vitest.vi.fn();
+    const _render11 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Flex, {
+        elementRef: elementRef
+      }, _Flex$Item || (_Flex$Item = /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item")))),
+      container = _render11.container;
+    const flex = container.querySelector('[class$="-flex-flex"]');
+    await (0, _react2.waitFor)(() => {
+      expect(elementRef).toHaveBeenCalledWith(flex);
+    });
+  });
+  it('should meet a11y standards', async () => {
+    const _render12 = (0, _react2.render)(_Flex14 || (_Flex14 = /*#__PURE__*/_react.default.createElement(_index.Flex, null, /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 1"), /*#__PURE__*/_react.default.createElement(_index.Flex.Item, null, "Flex item 2")))),
+      container = _render12.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-flex",
-  "version": "10.12.1-snapshot-9",
+  "version": "10.12.1-snapshot-10",
   "description": "A component that makes it easy to align content using flexbox CSS",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,17 +24,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.12.1-snapshot-9",
-    "@instructure/emotion": "10.12.1-snapshot-9",
-    "@instructure/shared-types": "10.12.1-snapshot-9",
-    "@instructure/ui-react-utils": "10.12.1-snapshot-9",
-    "@instructure/ui-view": "10.12.1-snapshot-9",
+    "@instructure/console": "10.12.1-snapshot-10",
+    "@instructure/emotion": "10.12.1-snapshot-10",
+    "@instructure/shared-types": "10.12.1-snapshot-10",
+    "@instructure/ui-react-utils": "10.12.1-snapshot-10",
+    "@instructure/ui-view": "10.12.1-snapshot-10",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.12.1-snapshot-9",
-    "@instructure/ui-test-utils": "10.12.1-snapshot-9",
-    "@instructure/ui-themes": "10.12.1-snapshot-9"
+    "@instructure/ui-axe-check": "10.12.1-snapshot-10",
+    "@instructure/ui-babel-preset": "10.12.1-snapshot-10",
+    "@instructure/ui-test-utils": "10.12.1-snapshot-10",
+    "@instructure/ui-themes": "10.12.1-snapshot-10",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "react": ">=16.14 <=18"

package/src/Flex/Item/__new-tests__/FlexItem.test.tsx

@@ -0,0 +1,61 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
+
+import '@testing-library/jest-dom'
+import { runAxeCheck } from '@instructure/ui-axe-check'
+import { Item } from '../index'
+
+describe('<Item />', () => {
+  it('should render children', async () => {
+    const { container } = render(<Item>Flex item 1</Item>)
+    const item = container.querySelector('[class$="-flexItem"]')
+
+    expect(item).toBeInTheDocument()
+    expect(item).toHaveTextContent('Flex item 1')
+  })
+
+  it('should support an elementRef prop', async () => {
+    const elementRef = vi.fn()
+
+    const { container } = render(
+      <Item elementRef={elementRef}>Flex item 2</Item>
+    )
+    const item = container.querySelector('[class$="-flexItem"]')
+
+    await waitFor(() => {
+      expect(elementRef).toHaveBeenCalledWith(item)
+    })
+  })
+
+  it('should meet a11y standards', async () => {
+    const { container } = render(<Item>Flex item 3</Item>)
+    const axeCheck = await runAxeCheck(container)
+
+    expect(axeCheck).toBe(true)
+  })
+})