Merge branch 'main' into filedropzone

CONTRIBUTING.md

@@ -4,6 +4,19 @@ To do: intro.
 
 ## How to's
 
+### How to add a new icon
+
+1. Add the icon to the `packages/icons/src/SVG` folder. The icon should be named using kebab casing e.g. `icon-name.svg`.
+2. Navigate to `packages/icons` e.g. `cd packages/icons`.
+3. Run `yarn build` to build the icons.
+4. Write a changeset using `yarn changeset`, this should have the format:
+
+```md
+Added:
+
+- IconName
+```
+
 ### Prop deprecation
 
 To do.

packages/core/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @salt-ds/core
 
+## 1.13.2
+
+### Patch Changes
+
+- 2ca80cb7: Fixed Input and Multiline Input button adornments being clipped if they contain text.
+  Fixed nested buttons being affected by overrides applied to Input and Multiline Input button adornments.
+  Fixed Multiline Input button adornments being an incorrect size.
+- d6e2e2c1: Fixed nested Salt Providers not inheriting a parent provider's `enableStyleInjection` value.
+
 ## 1.13.1
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/core/stories/patterns/metric/metric.stories.tsx

@@ -17,20 +17,20 @@ export const Metric = () => {
   return (
     <StackLayout gap={0}>
       <Text>
-        <strong>Revenue YTD</strong>
+        <strong>Performance</strong>
       </Text>
-      <Display1>$801.9B</Display1>
+      <Display1>801</Display1>
     </StackLayout>
   );
 };
 
 export const HorizontalMetric = () => {
   return (
     <StackLayout direction="row" gap={1}>
-      <Text>
-        <strong>Revenue YTD</strong>
+      <Text style={{ marginTop: "var(--salt-spacing-150)" }}>
+        <strong>Performance</strong>
       </Text>
-      <Display1 style={{ lineHeight: "0.8" }}>$801.9B</Display1>
+      <Display1>801</Display1>
     </StackLayout>
   );
 };
@@ -39,10 +39,10 @@ export const Subtitle = () => {
   return (
     <StackLayout gap={0}>
       <Text>
-        <strong>Revenue YTD</strong>
+        <strong>Performance</strong>
       </Text>
-      <Text variant="secondary">Total Value</Text>
-      <Display1>$801.9B</Display1>
+      <Text variant="secondary">Interactions</Text>
+      <Display1>801</Display1>
     </StackLayout>
   );
 };
@@ -51,12 +51,12 @@ export const Subvalue = () => {
   return (
     <StackLayout gap={0}>
       <Text>
-        <strong>Revenue YTD</strong>
+        <strong>Performance</strong>
       </Text>
-      <Text variant="secondary">Total Value</Text>
-      <Display1>$801.9B</Display1>
+      <Text variant="secondary">Interactions</Text>
+      <Display1>801</Display1>
       <Text style={{ color: "var(--salt-status-positive-foreground)" }}>
-        +10.1 (+1.23%)
+        +10 (+1.23%)
       </Text>
     </StackLayout>
   );
@@ -66,12 +66,12 @@ export const LinkSubtitle = () => {
   return (
     <StackLayout gap={0}>
       <Text>
-        <strong>Revenue YTD</strong>
+        <strong>Performance</strong>
       </Text>
-      <Link variant="secondary">Total Value</Link>
-      <Display1>$801.9B</Display1>
+      <Link variant="secondary">Interactions</Link>
+      <Display1>801</Display1>
       <Text style={{ color: "var(--salt-status-positive-foreground)" }}>
-        +10.1 (+1.23%)
+        +10 (+1.23%)
       </Text>
     </StackLayout>
   );
@@ -82,90 +82,115 @@ export const Indicators = () => {
     <StackLayout direction={"row"} gap={8}>
       <StackLayout gap={0}>
         <Text>
-          <strong>Revenue YTD</strong>
+          <strong>Performance</strong>
         </Text>
-        <Text variant="secondary">Total Value</Text>
+        <Text variant="secondary">Interactions</Text>
         <Display1>
-          $801.9B
+          801
           <ArrowUpIcon
             style={{ fill: "var(--salt-status-positive-foreground)" }}
-            size={2}
+            size={3}
           />
         </Display1>
         <Text style={{ color: "var(--salt-status-positive-foreground)" }}>
-          +10.1 (+1.23%)
+          +10 (+1.23%)
         </Text>
       </StackLayout>
       <StackLayout gap={0}>
         <Text>
-          <strong>Revenue YTD</strong>
+          <strong>Performance</strong>
         </Text>
-        <Text variant="secondary">Total Value</Text>
+        <Text variant="secondary">Interactions</Text>
         <Display1>
-          $801.9B
+          801
           <ArrowDownIcon
             style={{ fill: "var(--salt-status-negative-foreground)" }}
-            size={2}
+            size={3}
           />
         </Display1>
         <Text style={{ color: "var(--salt-status-negative-foreground)" }}>
-          -10.1 (+1.23%)
+          -10 (-1.23%)
         </Text>
       </StackLayout>
     </StackLayout>
   );
 };
 
-export const Hierarchical = () => {
+export const HierarchicalVertical = () => {
   return (
     <StackLayout direction={"row"} gap={8} align="end">
       <StackLayout gap={0}>
         <Text>
-          <strong>Revenue YTD</strong>
+          <strong>Performance</strong>
         </Text>
-        <Text variant="secondary">Total Value</Text>
+        <Text variant="secondary">Interactions</Text>
         <Display3>
-          $801.9B
+          801
           <ArrowUpIcon
             style={{ fill: "var(--salt-status-positive-foreground)" }}
             size={1}
           />
         </Display3>
         <Text style={{ color: "var(--salt-status-positive-foreground)" }}>
-          +10.1 (+1.23%)
+          +10 (+1.23%)
         </Text>
       </StackLayout>
       <StackLayout gap={0}>
         <Text>
-          <strong>Revenue YTD</strong>
+          <strong>Performance</strong>
         </Text>
-        <Text variant="secondary">Total Value</Text>
+        <Text variant="secondary">Interactions</Text>
         <Display2>
-          $801.9B
+          801
           <ArrowUpIcon
             style={{ fill: "var(--salt-status-positive-foreground)" }}
             size={2}
           />
         </Display2>
         <Text style={{ color: "var(--salt-status-positive-foreground)" }}>
-          +10.1 (+1.23%)
+          +10 (+1.23%)
         </Text>
       </StackLayout>
       <StackLayout gap={0}>
         <Text>
-          <strong>Revenue YTD</strong>
+          <strong>Performance</strong>
         </Text>
-        <Text variant="secondary">Total Value</Text>
+        <Text variant="secondary">Interactions</Text>
         <Display1>
-          $801.9B
+          801
           <ArrowUpIcon
             style={{ fill: "var(--salt-status-positive-foreground)" }}
-            size={2}
+            size={3}
           />
         </Display1>
         <Text style={{ color: "var(--salt-status-positive-foreground)" }}>
-          +10.1 (+1.23%)
+          +10 (+1.23%)
+        </Text>
+      </StackLayout>
+    </StackLayout>
+  );
+};
+
+export const HierarchicalHorizontal = () => {
+  return (
+    <StackLayout gap={8} align="end">
+      <StackLayout direction="row" gap={1}>
+        <Text style={{ marginTop: "var(--salt-spacing-50)" }}>
+          <strong>Performance</strong>
+        </Text>
+        <Display3>801</Display3>
+      </StackLayout>
+      <StackLayout direction="row" gap={1}>
+        <Text style={{ marginTop: "var(--salt-spacing-100)" }}>
+          <strong>Performance</strong>
+        </Text>
+        <Display2>801</Display2>
+      </StackLayout>
+      <StackLayout direction="row" gap={1}>
+        <Text style={{ marginTop: "var(--salt-spacing-150)" }}>
+          <strong>Performance</strong>
         </Text>
+        <Display1>801</Display1>
       </StackLayout>
     </StackLayout>
   );

packages/icons/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @salt-ds/icons
 
+## 1.9.0
+
+### Minor Changes
+
+- b9831e3e: Added:
+
+  - DragRowIcon
+  - JigsawIcon
+  - JigsawSolidIcon
+  - LayersIcon
+  - LayersSolidIcon
+  - TypeIcon
+  - TypeSolidIcon
+
 ## 1.8.0
 
 ### Minor Changes

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/icons",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/icons/src/components/DragRow.tsx

@@ -0,0 +1,22 @@
+// WARNING: This file was generated by a script. Do not modify it manually
+import { forwardRef } from "react";
+
+import { Icon, IconProps } from "../icon";
+
+export type DragRowIconProps = IconProps;
+
+export const DragRowIcon = forwardRef<SVGSVGElement, DragRowIconProps>(
+  function DragRowIcon(props: DragRowIconProps, ref) {
+    return (
+      <Icon
+        data-testid="DragRowIcon"
+        aria-label="drag row"
+        viewBox="0 0 12 12"
+        ref={ref}
+        {...props}
+      >
+        <path d="M3 10h6v1H3v-1Zm0-3h6v1H3V7Zm0-3h6v1H3V4Zm0-3h6v1H3V1Z" />
+      </Icon>
+    );
+  }
+);

packages/icons/src/components/Jigsaw.tsx

@@ -0,0 +1,26 @@
+// WARNING: This file was generated by a script. Do not modify it manually
+import { forwardRef } from "react";
+
+import { Icon, IconProps } from "../icon";
+
+export type JigsawIconProps = IconProps;
+
+export const JigsawIcon = forwardRef<SVGSVGElement, JigsawIconProps>(
+  function JigsawIcon(props: JigsawIconProps, ref) {
+    return (
+      <Icon
+        data-testid="JigsawIcon"
+        aria-label="jigsaw"
+        viewBox="0 0 12 12"
+        ref={ref}
+        {...props}
+      >
+        <path
+          fillRule="evenodd"
+          d="M1 6h1.5a.5.5 0 0 1 0 1H1v4h4V9.5a.5.5 0 0 1 1 0V11h4V8h.5a1.5 1.5 0 0 0 0-3H10V2H7v-.5a1.5 1.5 0 1 0-3 0V2H1v4Zm5-4.5a.5.5 0 0 0-1 0V3H2v2h.5a1.5 1.5 0 1 1 0 3H2v2h2v-.5a1.5 1.5 0 1 1 3 0v.5h2V7h1.5a.5.5 0 0 0 0-1H9V3H6V1.5Z"
+          clipRule="evenodd"
+        />
+      </Icon>
+    );
+  }
+);