Merge branch 'main' into measured-to-track

jpmorganchase · Mar 22, 2023 · e2554ff · e2554ff
2 parents 88a88fd + a483ca9
commit e2554ff
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 30 deletions.
diff --git a/.changeset/poor-lions-hear.md b/.changeset/poor-lions-hear.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": minor
+---
+
+Added new `basis` prop to FlexItem to control flex-basis
diff --git a/package.json b/package.json
@@ -138,7 +138,8 @@
     "@jpmorganchase/mosaic-components/@salt-ds/lab": "1.0.0-alpha.1",
     "@jpmorganchase/mosaic-labs-components/@salt-ds/lab": "1.0.0-alpha.1",
     "@jpmorganchase/mosaic-layouts/@salt-ds/lab": "1.0.0-alpha.1",
-    "@jpmorganchase/mosaic-site-components/@salt-ds/lab": "1.0.0-alpha.1"
+    "@jpmorganchase/mosaic-site-components/@salt-ds/lab": "1.0.0-alpha.1",
+    "rollup": "2.79.0"
   },
   "browserslist": {
     "production": [

diff --git a/packages/core/src/__tests__/__e2e__/flex-item/FlexItem.cy.tsx b/packages/core/src/__tests__/__e2e__/flex-item/FlexItem.cy.tsx
@@ -0,0 +1,31 @@
+import * as flexStories from "@stories/flex-item/flex-item.stories";
+import { composeStories } from "@storybook/testing-react";
+
+const composedStories = composeStories(flexStories);
+const { FlexItemWrapper } = composedStories;
+
+describe("GIVEN a FlexItem in FlexLayout", () => {
+  describe("WHEN no props are provided", () => {
+    it("THEN it should render default flex properties", () => {
+      cy.mount(<FlexItemWrapper />);
+
+      cy.get(".saltFlexLayout > .saltFlexItem")
+        .first()
+        .should("have.css", "flex-grow", "0")
+        .should("have.css", "flex-shrink", "1")
+        .should("have.css", "flex-basis", "auto");
+    });
+  });
+
+  describe("WHEN flex props are provided", () => {
+    it("THEN it should render properties with overridden value", () => {
+      cy.mount(<FlexItemWrapper grow={2} shrink={2} basis="100px" />);
+
+      cy.get(".saltFlexLayout > .saltFlexItem")
+        .first()
+        .should("have.css", "flex-grow", "2")
+        .should("have.css", "flex-shrink", "2")
+        .should("have.css", "flex-basis", "100px");
+    });
+  });
+});
diff --git a/packages/core/src/__tests__/__e2e__/flex-layout/FlexLayout.cy.tsx b/packages/core/src/__tests__/__e2e__/flex-layout/FlexLayout.cy.tsx
@@ -6,7 +6,7 @@ import { SaltProvider } from "@salt-ds/core";
 const composedStories = composeStories(flexStories);
 const { Default, Nested } = composedStories;
 
-describe("GIVEN a Flex", () => {
+describe("GIVEN a FlexLayout", () => {
   checkAccessibility(composedStories);
 
   describe("WHEN no props are provided", () => {

diff --git a/packages/core/src/flex-item/FlexItem.css b/packages/core/src/flex-item/FlexItem.css
@@ -3,6 +3,7 @@
   --saltFlexItem-alignment: auto;
   --saltFlexItem-shrink: 1;
   --saltFlexItem-grow: 0;
+  --saltFlexItem-basis: auto;
 }
 
 /* Style applied to the root element */
@@ -11,6 +12,7 @@
   align-self: var(--saltFlexItem-alignment);
   flex-grow: var(--saltFlexItem-grow);
   flex-shrink: var(--saltFlexItem-shrink);
+  flex-basis: var(--saltFlexItem-basis);
 }
 
 .saltFlexItem-stacked {

diff --git a/packages/core/src/flex-item/FlexItem.tsx b/packages/core/src/flex-item/FlexItem.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, ElementType, ReactElement } from "react";
+import { forwardRef, ElementType, ReactElement, CSSProperties } from "react";
 import {
   makePrefixer,
   ResponsiveProp,
@@ -28,14 +28,17 @@ export type FlexItemProps<T extends ElementType> =
        */
       align?: flexItemAlignment;
       /**
-   * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.
-
-   */
+       * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.
+       */
       shrink?: ResponsiveProp<number>;
       /**
        * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.
        */
       grow?: ResponsiveProp<number>;
+      /**
+       * Sets the initial main size of a flex item, default is "auto".
+       */
+      basis?: ResponsiveProp<CSSProperties["flexBasis"]>;
     }
   >;
 
@@ -52,6 +55,7 @@ export const FlexItem: FlexItemComponent = forwardRef(
       className,
       shrink,
       grow,
+      basis,
       style,
       ...rest
     }: FlexItemProps<T>,
@@ -60,11 +64,13 @@ export const FlexItem: FlexItemComponent = forwardRef(
     const Component = as || "div";
     const flexItemShrink = useResponsiveProp(shrink, 1);
     const flexItemGrow = useResponsiveProp(grow, 0);
+    const flexItemBasis = useResponsiveProp(basis, "auto");
 
     const itemStyle = {
       "--saltFlexItem-alignment": align,
       "--saltFlexItem-shrink": flexItemShrink,
       "--saltFlexItem-grow": flexItemGrow,
+      "--saltFlexItem-basis": flexItemBasis,
       ...style,
     };
     return (

diff --git a/site/docs/components/_index/components-list.tsx b/site/docs/components/_index/components-list.tsx
@@ -148,10 +148,13 @@ export const componentDetails: ComponentDetails[] = [
   },
   {
     name: "Avatar",
+    availableInCoreSince: "1.3.0",
     description:
       "Represents a person. It has three variants to account for different types of data: photo, initials and a default version when neither is available.",
-    devStatus: ComponentStatus.IN_PROGRESS,
+    devStatus: ComponentStatus.READY,
     designStatus: ComponentStatus.IN_PROGRESS,
+    storybookUrl:
+      "https://storybook.saltdesignsystem.com/?path=/docs/documentation-core-avatar--page",
   },
   {
     name: "AG Grid Theme",
@@ -245,7 +248,7 @@ export const componentDetails: ComponentDetails[] = [
     name: "Checkbox",
     description:
       "Enables the user to turn a specific value on or off. The value can be independent or a selection of one or more values from a given set of choices.",
-    devStatus: ComponentStatus.IN_BACKLOG,
+    devStatus: ComponentStatus.IN_PROGRESS,
     designStatus: ComponentStatus.IN_BACKLOG,
   },
   {
@@ -282,6 +285,11 @@ export const componentDetails: ComponentDetails[] = [
     devStatus: ComponentStatus.IN_BACKLOG,
     designStatus: ComponentStatus.IN_BACKLOG,
   },
+  {
+    name: "Country Symbol",
+    devStatus: ComponentStatus.IN_PROGRESS,
+    designStatus: ComponentStatus.IN_PROGRESS,
+  },
   {
     name: "Data Grid",
     // TODO: add description
@@ -504,7 +512,7 @@ export const componentDetails: ComponentDetails[] = [
     name: "Radio Button",
     description:
       "Allows the user to select one option at a time, from a set that’s vertically or horizontally aligned.",
-    devStatus: ComponentStatus.IN_BACKLOG,
+    devStatus: ComponentStatus.IN_PROGRESS,
     designStatus: ComponentStatus.IN_BACKLOG,
   },
   {
@@ -559,10 +567,13 @@ export const componentDetails: ComponentDetails[] = [
   },
   {
     name: "Spinner",
+    availableInCoreSince: "1.2.0",
     description:
       "Visually represents a process that is taking an indeterminate time to complete.",
-    devStatus: ComponentStatus.IN_PROGRESS,
+    devStatus: ComponentStatus.READY,
     designStatus: ComponentStatus.IN_BACKLOG,
+    storybookUrl:
+      "https://storybook.saltdesignsystem.com/?path=/docs/documentation-core-spinner--page",
   },
   {
     name: "Split Button",
@@ -573,10 +584,13 @@ export const componentDetails: ComponentDetails[] = [
   },
   {
     name: "Split Layout",
+    availableInCoreSince: "1.2.0",
     description:
       "Defines left and right regions for UI elements within a span, such as a button bar.",
-    devStatus: ComponentStatus.IN_BACKLOG,
+    devStatus: ComponentStatus.READY,
     designStatus: ComponentStatus.NOT_APPLICABLE,
+    storybookUrl:
+      "https://storybook.saltdesignsystem.com/?path=/docs/documentation-core-layout-split-layout--page",
   },
   {
     name: "Stack Layout",
@@ -681,10 +695,13 @@ export const componentDetails: ComponentDetails[] = [
   },
   {
     name: "Tooltip",
+    availableInCoreSince: "1.2.0",
     description:
       "Displays an explanation or provides more information about an error or warning condition, when the user’s  mouse hovers over a target element.",
-    devStatus: ComponentStatus.IN_PROGRESS,
+    devStatus: ComponentStatus.READY,
     designStatus: ComponentStatus.IN_BACKLOG,
+    storybookUrl:
+      "https://storybook.saltdesignsystem.com/?path=/docs/documentation-core-tooltip--page",
   },
   {
     name: "Tree",

diff --git a/yarn.lock b/yarn.lock
@@ -29343,31 +29343,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:2.75.5":
-  version: 2.75.5
-  resolution: "rollup@npm:2.75.5"
+"rollup@npm:2.79.0":
+  version: 2.79.0
+  resolution: "rollup@npm:2.79.0"
   dependencies:
     fsevents: ~2.3.2
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: fa3e61959efbc88cda75315dc22f035489be9dda3ae7d45a3a474f19efc3661ef6f9849486c7ca51e1a3e2aedef91f4e3223e8123bbeaf155913533d071994d1
-  languageName: node
-  linkType: hard
-
-"rollup@npm:~2.78.0":
-  version: 2.78.1
-  resolution: "rollup@npm:2.78.1"
-  dependencies:
-    fsevents: ~2.3.2
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  bin:
-    rollup: dist/bin/rollup
-  checksum: 9034814383ca5bdb4bea6d499270aeb31cdb0bb884f81b0c6a1d19c63cc973f040e6ee09b7af8a7169dd231c090f4b44ef8b99c4bfdf884aceeb3dcefb8cfa14
+  checksum: 166f1ffea1898e157003920065b3a328e7012ea6808860ee8fe5d1ce94804fcce9985c95a3c0f7fe9c611aff0d09a70f073f1d6f715c8faba28e4e40f71ee3bb
   languageName: node
   linkType: hard