Merge branch 'main' of https://github.com/jpmorganchase/salt-ds into …

…combobox-secondary-label
jpmorganchase · May 9, 2024 · 87304af · 87304af
2 parents d70534c + 318515c
commit 87304af
Show file tree

Hide file tree

Showing 33 changed files with 717 additions and 287 deletions.
diff --git a/.changeset/fast-snakes-know.md b/.changeset/fast-snakes-know.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Changed RadioButton's display to `inline-flex` so the hit area only covers the label.
diff --git a/.changeset/heavy-geckos-scream.md b/.changeset/heavy-geckos-scream.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/ag-grid-theme": patch
+---
+
+Fixed header background incorrectly referencing palette color (`--salt-container-primary-background`) instead of characterstics (`--salt-container-primary-background`)
diff --git a/.changeset/violet-dingos-hammer.md b/.changeset/violet-dingos-hammer.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed `Tooltip` not displaying when the `content` prop value is falsy e.g. 0
diff --git a/.changeset/violet-tomatoes-enjoy.md b/.changeset/violet-tomatoes-enjoy.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Changed Checkbox's display to `inline-flex` so the hit area only covers the label.
diff --git a/.yarn/releases/yarn-4.2.1.cjs → .yarn/releases/yarn-4.2.2.cjs b/.yarn/releases/yarn-4.2.1.cjs → .yarn/releases/yarn-4.2.2.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -6,4 +6,4 @@ nodeLinker: node-modules
 
 npmRegistryServer: "https://registry.yarnpkg.com"
 
-yarnPath: .yarn/releases/yarn-4.2.1.cjs
+yarnPath: .yarn/releases/yarn-4.2.2.cjs
diff --git a/package.json b/package.json
@@ -146,7 +146,7 @@
       "last 1 safari version"
     ]
   },
-  "packageManager": "[email protected].1",
+  "packageManager": "[email protected].2",
   "msw": {
     "workerDirectory": "docs/public"
   }

diff --git a/packages/ag-grid-theme/css/_salt-ag-theme-default-params.scss b/packages/ag-grid-theme/css/_salt-ag-theme-default-params.scss
@@ -3,7 +3,7 @@
 $salt-ag-theme-default-params: (
   row-hover-color: var(--agGrid-row-color-hover),
   row-border-color: var(--agGrid-row-borderColor),
-  header-background-color: var(--salt-palette-neutral-primary-background),
+  header-background-color: var(--salt-container-primary-background),
   header-column-separator: true,
   header-column-separator-width: 1px,
   header-column-separator-color: var(--agGrid-header-column-separator-color),

diff --git a/packages/core/src/__tests__/__e2e__/tooltip/Tooltip.cy.tsx b/packages/core/src/__tests__/__e2e__/tooltip/Tooltip.cy.tsx
@@ -213,6 +213,20 @@ describe("GIVEN a Tooltip", () => {
     });
   });
 
+  describe("WHEN content is undefined", () => {
+    it("then tooltip doesn't display", () => {
+      cy.mount(<Open content={undefined} />);
+      cy.findByRole("tooltip").should("not.exist");
+    });
+  });
+
+  describe("WHEN content is falsy", () => {
+    it("then tooltip should still display", () => {
+      cy.mount(<Open content={0} />);
+      cy.findByRole("tooltip").should("exist");
+    });
+  });
+
   describe("WHEN used in header tag", () => {
     it("then tooltip displays default font weight and size", () => {
       cy.mount(

diff --git a/packages/core/src/checkbox/Checkbox.css b/packages/core/src/checkbox/Checkbox.css
@@ -1,6 +1,6 @@
 /* Styles applied to root component */
 .saltCheckbox {
-  display: flex;
+  display: inline-flex;
   gap: var(--salt-spacing-100);
   position: relative;
   cursor: var(--salt-selectable-cursor-hover);

diff --git a/packages/core/src/link/Link.tsx b/packages/core/src/link/Link.tsx
@@ -27,6 +27,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
     className,
     children,
     variant = "primary",
+    color = "primary",
     target = "_self",
     ...rest
   },
@@ -47,6 +48,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
       ref={ref}
       target={target}
       variant={variant}
+      color={color}
       {...rest}
     >
       {children}

diff --git a/packages/core/src/radio-button/RadioButton.css b/packages/core/src/radio-button/RadioButton.css
@@ -1,6 +1,6 @@
 /* Styles applied to RadioButton container */
 .saltRadioButton {
-  display: flex;
+  display: inline-flex;
   gap: var(--salt-spacing-100);
   cursor: var(--salt-selectable-cursor-hover);
   position: relative;

diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css
@@ -1,3 +1,7 @@
+.saltText {
+  --text-color: currentColor;
+}
+
 /* Main css class. Style for body text */
 .saltText {
   color: var(--saltText-color, var(--text-color));

diff --git a/packages/core/src/text/Text.tsx b/packages/core/src/text/Text.tsx
@@ -38,8 +38,13 @@ export type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<
       | "code";
     /**
      * Change text color palette
+     * @deprecated Use `color` instead
      */
     variant?: "primary" | "secondary";
+    /*
+     * The color of the text. Defaults to "primary".
+     */
+    color?: "inherit" | "primary" | "secondary";
   }
 >;
 
@@ -59,7 +64,8 @@ export const Text: TextComponent = forwardRef(
       maxRows,
       style,
       styleAs,
-      variant = "primary",
+      variant,
+      color: colorProp,
       ...restProps
     }: TextProps<T>,
     ref?: PolymorphicRef<T>
@@ -71,19 +77,21 @@ export const Text: TextComponent = forwardRef(
       window: targetWindow,
     });
 
-    const Component = as || "div";
+    const Component = as ?? "div";
 
     const textStyles = { "--text-max-rows": maxRows, ...style };
 
+    const color = variant ?? colorProp ?? "primary";
+
     return (
       <Component
         className={clsx(
           withBaseName(),
           {
             [withBaseName("disabled")]: disabled,
             [withBaseName("lineClamp")]: maxRows,
-            [withBaseName(styleAs || "")]: styleAs,
-            [withBaseName(variant)]: variant,
+            [withBaseName(styleAs as string)]: styleAs,
+            [withBaseName(color)]: color !== "inherit",
           },
           className
         )}

diff --git a/packages/core/src/tooltip/Tooltip.tsx b/packages/core/src/tooltip/Tooltip.tsx
@@ -124,7 +124,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     );
 
     const floatingRef = useForkRef<HTMLDivElement>(floating, ref);
-    const hasContent = !!content;
+    const hasContent = content != undefined && content !== "";
 
     return (
       <>

diff --git a/packages/core/stories/link/link.qa.stories.tsx b/packages/core/stories/link/link.qa.stories.tsx
@@ -23,14 +23,14 @@ export const AllVariantsGrid: StoryFn<QAContainerProps> = (props) => (
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>
-    <Link href="https://www.google.com" variant="secondary">
+    <Link href="https://www.google.com" color="secondary">
       Secondary Link
     </Link>
-    <Link href="https://www.google.com" variant="secondary" target="_blank">
+    <Link href="https://www.google.com" color="secondary" target="_blank">
       Secondary Link target blank
     </Link>
     <div style={{ width: 150 }}>
-      <Link href="https://www.google.com" maxRows={1} variant="secondary">
+      <Link href="https://www.google.com" maxRows={1} color="secondary">
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>
@@ -54,14 +54,14 @@ export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>
-    <Link href="https://www.google.com" variant="secondary">
+    <Link href="https://www.google.com" color="secondary">
       Secondary Link
     </Link>
-    <Link href="https://www.google.com" variant="secondary" target="_blank">
+    <Link href="https://www.google.com" color="secondary" target="_blank">
       Secondary Link target blank
     </Link>
     <div style={{ width: 150 }}>
-      <Link href="https://www.google.com" maxRows={1} variant="secondary">
+      <Link href="https://www.google.com" maxRows={1} color="secondary">
         <strong>Strong</strong> and <small>small</small> truncation example
       </Link>
     </div>

diff --git a/packages/core/stories/link/link.stories.tsx b/packages/core/stories/link/link.stories.tsx
@@ -13,7 +13,15 @@ export const Primary: StoryFn<typeof Link> = () => {
 
 export const Secondary: StoryFn<typeof Link> = () => {
   return (
-    <Link variant="secondary" href="https://www.google.com">
+    <Link color="secondary" href="https://www.google.com">
+      Link to URL
+    </Link>
+  );
+};
+
+export const InheritColor: StoryFn<typeof Link> = () => {
+  return (
+    <Link color="inherit" href="https://www.google.com">
       Link to URL
     </Link>
   );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,4 +6,4 @@ nodeLinker: node-modules

		npmRegistryServer: "https://registry.yarnpkg.com"

		yarnPath: .yarn/releases/yarn-4.2.1.cjs
		yarnPath: .yarn/releases/yarn-4.2.2.cjs