braid-design-system 32.3.1 → 32.4.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # braid-design-system
 
+## 32.4.0
+
+### Minor Changes
+
+- **Text, Heading:** Add `maxLines` support ([#1286](https://github.com/seek-oss/braid-design-system/pull/1286))
+
+  Provide support for limiting the number of lines shown by a `Text` or `Heading` component.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Text maxLines={3}>...</Text>
+  ```
+
+  **MIGRATION:**
+
+  With the addition of this feature, the `truncate` prop is now deprecated and will be removed in a future release.
+  Existing consumers should start migrating as below:
+
+  ```diff
+   <Text
+  -   truncate
+  +   maxLines={1}
+   />
+  ```
+
+- **Card:** Add full height support ([#1285](https://github.com/seek-oss/braid-design-system/pull/1285))
+
+  Provide support for making a `Card` use all available vertical space.
+  This is useful when laying out rows of `Card` elements and having them all be equal height.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  <Card height="full">...</Card>
+  ```
+
+### Patch Changes
+
+- **TextLink, TextLinkButton:** Update underline design ([#1288](https://github.com/seek-oss/braid-design-system/pull/1288))
+
+  Uplift the design of the the text underline used on `TextLink` and `TextLinkButton` components.
+
+- **Column:** Support full height content ([#1285](https://github.com/seek-oss/braid-design-system/pull/1285))
+
+  Provide support for full height content by growing all `Column` elements to be uniform in height.
+
+  This will have no effect on the content itself, but enables consumers to create designs of uniform content, such as rows of `Card` elements.
+
 ## 32.3.1
 
 ### Patch Changes

package/dist/ToastContext.chunk.cjs

@@ -17,7 +17,8 @@ const styles_lib_components_Hidden_Hidden_css_cjs = require("./styles/lib/compon
 const styles_lib_css_negativeMargin_negativeMargin_css_cjs = require("./styles/lib/css/negativeMargin/negativeMargin.css.cjs");
 const styles_lib_components_Column_Column_css_cjs = require("./styles/lib/components/Column/Column.css.cjs");
 const styles_lib_components_ContentBlock_ContentBlock_css_cjs = require("./styles/lib/components/ContentBlock/ContentBlock.css.cjs");
-const styles_lib_components_private_Truncate_Truncate_css_cjs = require("./styles/lib/components/private/Truncate/Truncate.css.cjs");
+const dynamic = require("@vanilla-extract/dynamic");
+const styles_lib_components_private_MaxLines_MaxLines_css_cjs = require("./styles/lib/components/private/MaxLines/MaxLines.css.cjs");
 const styles_lib_components_private_AvoidWidowIcon_AvoidWidowIcon_css_cjs = require("./styles/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.css.cjs");
 const styles_lib_components_private_touchable_virtualTouchable_css_cjs = require("./styles/lib/components/private/touchable/virtualTouchable.css.cjs");
 const styles_lib_components_TextLink_TextLink_css_cjs = require("./styles/lib/components/TextLink/TextLink.css.cjs");
@@ -647,19 +648,48 @@ function textStyles({
     (baseline ? styles_lib_css_typography_css_cjs.textSizeTrimmed : styles_lib_css_typography_css_cjs.textSizeUntrimmed)[size]
   ];
 }
-const Truncate = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(Box, { component: "span", className: styles_lib_components_private_Truncate_Truncate_css_cjs.truncate, children });
+const MaxLines = ({
+  children,
+  lines
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  Box,
+  {
+    component: "span",
+    className: [styles_lib_components_private_MaxLines_MaxLines_css_cjs.base, lines > 1 ? styles_lib_components_private_MaxLines_MaxLines_css_cjs.multiLine : void 0],
+    style: lines > 1 ? dynamic.assignInlineVars({ [styles_lib_components_private_MaxLines_MaxLines_css_cjs.lineLimit]: String(lines) }) : void 0,
+    children
+  }
+);
 const Typography = ({
   id,
   component = "span",
   className,
   align,
   truncate = false,
+  maxLines,
   icon,
   data,
   children,
   ...restProps
 }) => {
-  const contents = truncate ? /* @__PURE__ */ jsxRuntime.jsx(Truncate, { children }) : children;
+  const lines = truncate ? 1 : maxLines;
+  const contents = typeof lines === "number" ? /* @__PURE__ */ jsxRuntime.jsx(MaxLines, { lines, children }) : children;
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof truncate !== "undefined") {
+      console.warn(
+        dedent__default.default`
+          The "truncate" prop has been deprecated and will be removed in a future version. Use "maxLines" instead.
+             <Text
+            %c-   truncate
+            %c+   maxLines={1}
+             %c/>
+        `,
+        "color: red",
+        "color: green",
+        "color: inherit"
+      );
+    }
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
@@ -910,6 +940,7 @@ const Column = ({
       minWidth: 0,
       width: width !== "content" ? "full" : void 0,
       flexShrink: width === "content" ? 0 : void 0,
+      flexGrow: 1,
       className: [
         styles_lib_components_Column_Column_css_cjs.column,
         width !== "content" ? styles_lib_components_Column_Column_css_cjs.width[width] : null

package/dist/ToastContext.chunk.mjs

@@ -16,10 +16,11 @@ import { hiddenOnPrint } from "./styles/lib/components/Hidden/Hidden.css.mjs";
 import { preventCollapsePseudo, top, right, bottom, left } from "./styles/lib/css/negativeMargin/negativeMargin.css.mjs";
 import { column, width, columnContent } from "./styles/lib/components/Column/Column.css.mjs";
 import { marginAuto } from "./styles/lib/components/ContentBlock/ContentBlock.css.mjs";
-import { truncate } from "./styles/lib/components/private/Truncate/Truncate.css.mjs";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { base as base$2, multiLine, lineLimit } from "./styles/lib/components/private/MaxLines/MaxLines.css.mjs";
 import { nowrap } from "./styles/lib/components/private/AvoidWidowIcon/AvoidWidowIcon.css.mjs";
 import { virtualTouchable as virtualTouchable$1, yAxisOnly } from "./styles/lib/components/private/touchable/virtualTouchable.css.mjs";
-import { weakLink, regularLinkLightMode, regularLinkDarkMode, base as base$2, visitedLightMode, visitedDarkMode } from "./styles/lib/components/TextLink/TextLink.css.mjs";
+import { weakLink, regularLinkLightMode, regularLinkDarkMode, base as base$3, visitedLightMode, visitedDarkMode } from "./styles/lib/components/TextLink/TextLink.css.mjs";
 import { lineHeightContainer } from "./styles/lib/css/lineHeightContainer.css.mjs";
 import { size, inlineCrop, inline, alignY, cropToTextSize, blockWidths } from "./styles/lib/hooks/useIcon/icon.css.mjs";
 import { hideFocusRingsClassName } from "./styles/lib/components/private/hideFocusRings/hideFocusRings.css.mjs";
@@ -640,19 +641,48 @@ function textStyles({
     (baseline ? textSizeTrimmed : textSizeUntrimmed)[size2]
   ];
 }
-const Truncate = ({ children }) => /* @__PURE__ */ jsx(Box, { component: "span", className: truncate, children });
+const MaxLines = ({
+  children,
+  lines
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    component: "span",
+    className: [base$2, lines > 1 ? multiLine : void 0],
+    style: lines > 1 ? assignInlineVars({ [lineLimit]: String(lines) }) : void 0,
+    children
+  }
+);
 const Typography = ({
   id,
   component = "span",
   className,
   align,
-  truncate: truncate2 = false,
+  truncate = false,
+  maxLines,
   icon,
   data,
   children,
   ...restProps
 }) => {
-  const contents = truncate2 ? /* @__PURE__ */ jsx(Truncate, { children }) : children;
+  const lines = truncate ? 1 : maxLines;
+  const contents = typeof lines === "number" ? /* @__PURE__ */ jsx(MaxLines, { lines, children }) : children;
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof truncate !== "undefined") {
+      console.warn(
+        dedent`
+          The "truncate" prop has been deprecated and will be removed in a future version. Use "maxLines" instead.
+             <Text
+            %c-   truncate
+            %c+   maxLines={1}
+             %c/>
+        `,
+        "color: red",
+        "color: green",
+        "color: inherit"
+      );
+    }
+  }
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -903,6 +933,7 @@ const Column = ({
       minWidth: 0,
       width: width$1 !== "content" ? "full" : void 0,
       flexShrink: width$1 === "content" ? 0 : void 0,
+      flexGrow: 1,
       className: [
         column,
         width$1 !== "content" ? width[width$1] : null
@@ -1975,7 +2006,7 @@ const useLinkStyles = ({
     isPlainBackground(backgroundContext2.darkMode, "dark") || weight === "regular" ? regularLinkDarkMode[backgroundLightness.darkMode] : weakLink
   ];
   return clsx(
-    base$2,
+    base$3,
     linkStyles,
     fontWeight.medium,
     showVisited ? [

package/dist/Toggle.chunk.cjs

@@ -3644,7 +3644,7 @@ const Badge = React.forwardRef(
             paddingX: "xsmall",
             borderRadius: "standard",
             overflow: "hidden",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { size: "xsmall", weight: "medium", truncate: true, children })
+            children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { size: "xsmall", weight: "medium", maxLines: 1, children })
           }
         )
       }
@@ -3796,6 +3796,7 @@ const Card = ({
   component = "div",
   tone,
   data,
+  height,
   ...restProps
 }) => {
   assert__default.default(
@@ -3822,6 +3823,7 @@ const Card = ({
       background: "surface",
       padding: "gutter",
       borderRadius: resolvedRounding,
+      height: height === "full" ? height : void 0,
       ...ToastContext.buildDataAttributes({ data, validateRestProps: restProps }),
       children: [
         tone ? /* @__PURE__ */ jsxRuntime.jsx(Keyline, { tone, borderRadius: resolvedRounding }) : null,
@@ -5439,7 +5441,7 @@ function MenuItemChildren({
         size: menuItemChildrenSize,
         baseline: false,
         tone: tone === "critical" ? tone : void 0,
-        truncate: true,
+        maxLines: 1,
         children
       }
     ) }),
@@ -7530,7 +7532,7 @@ const Tag = ({
           paddingRight: onClear ? void 0 : "small",
           borderRadius: "full",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { baseline: false, truncate: true, icon: icon2, children }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { minWidth: 0, title: children, children: /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Text, { baseline: false, maxLines: 1, icon: icon2, children }) }),
             onClear ? /* @__PURE__ */ jsxRuntime.jsx(ToastContext.Box, { flexShrink: 0, display: "flex", className: styles_lib_components_Tag_Tag_css_cjs.clearGutter, children: /* @__PURE__ */ jsxRuntime.jsx(
               ToastContext.ButtonIcon,
               {

package/dist/Toggle.chunk.mjs

@@ -3636,7 +3636,7 @@ const Badge = forwardRef(
             paddingX: "xsmall",
             borderRadius: "standard",
             overflow: "hidden",
-            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", weight: "medium", truncate: true, children: children2 })
+            children: /* @__PURE__ */ jsx(Text, { size: "xsmall", weight: "medium", maxLines: 1, children: children2 })
           }
         )
       }
@@ -3788,6 +3788,7 @@ const Card = ({
   component = "div",
   tone: tone2,
   data,
+  height,
   ...restProps
 }) => {
   assert(
@@ -3814,6 +3815,7 @@ const Card = ({
       background: "surface",
       padding: "gutter",
       borderRadius: resolvedRounding,
+      height: height === "full" ? height : void 0,
       ...buildDataAttributes({ data, validateRestProps: restProps }),
       children: [
         tone2 ? /* @__PURE__ */ jsx(Keyline, { tone: tone2, borderRadius: resolvedRounding }) : null,
@@ -5431,7 +5433,7 @@ function MenuItemChildren({
         size: menuItemChildrenSize,
         baseline: false,
         tone: tone2 === "critical" ? tone2 : void 0,
-        truncate: true,
+        maxLines: 1,
         children: children2
       }
     ) }),
@@ -7522,7 +7524,7 @@ const Tag = ({
           paddingRight: onClear ? void 0 : "small",
           borderRadius: "full",
           children: [
-            /* @__PURE__ */ jsx(Box, { minWidth: 0, title: children2, children: /* @__PURE__ */ jsx(Text, { baseline: false, truncate: true, icon: icon2, children: children2 }) }),
+            /* @__PURE__ */ jsx(Box, { minWidth: 0, title: children2, children: /* @__PURE__ */ jsx(Text, { baseline: false, maxLines: 1, icon: icon2, children: children2 }) }),
             onClear ? /* @__PURE__ */ jsx(Box, { flexShrink: 0, display: "flex", className: clearGutter, children: /* @__PURE__ */ jsx(
               ButtonIcon,
               {

package/dist/reset.d.ts

@@ -2724,7 +2724,9 @@ interface TypographyProps extends Pick<BoxProps, 'id' | 'component'> {
     children?: ReactNode;
     icon?: ReactElement<UseIconProps>;
     align?: BoxProps['textAlign'];
+    /** @deprecated Use `maxLines={1}` instead. */
     truncate?: boolean;
+    maxLines?: number;
     data?: DataAttributeMap;
 }
 
@@ -3061,9 +3063,10 @@ type CardProps = {
     children: ReactNode;
     tone?: 'promote' | 'formAccent';
     component?: (typeof validCardComponents)[number];
+    height?: Extract<BoxProps['height'], 'full'> | 'content';
     data?: DataAttributeMap;
 } & (SimpleCardRounding | ResponsiveCardRounding);
-declare const Card$1: ({ children, component, tone, data, ...restProps }: CardProps) => JSX.Element;
+declare const Card$1: ({ children, component, tone, data, height, ...restProps }: CardProps) => JSX.Element;
 
 declare const sizes$1: {
     readonly standard: "standard";

package/dist/styles/lib/components/TextLink/TextLink.css.cjs

@@ -31,9 +31,21 @@ const weakLinkVars = css.assignVars(textLinkVars, {
 const base = css.style({
   color: textLinkVars.color,
   textDecoration: textLinkVars.textDecoration,
+  textDecorationThickness: "0.1em",
+  textUnderlineOffset: "0.32em",
   ":hover": {
     color: textLinkVars.colorHover,
-    textDecoration: textLinkVars.textDecorationHover
+    textDecoration: textLinkVars.textDecorationHover,
+    /*
+          Duplicating the thickness rule due to inconsistent support
+          for shorthand properties of `text-decoration`. Without this,
+          applying the above decoration rule resets the thickness in
+          browsers that do support shorthands.
+    
+          We also cannot use the long-form `text-decoration-line` due
+          to browser support policy of Edge 16+.
+        */
+    textDecorationThickness: "0.1em"
   },
   ":focus": {
     color: textLinkVars.colorHover

package/dist/styles/lib/components/TextLink/TextLink.css.mjs

@@ -30,9 +30,21 @@ const weakLinkVars = assignVars(textLinkVars, {
 const base = style({
   color: textLinkVars.color,
   textDecoration: textLinkVars.textDecoration,
+  textDecorationThickness: "0.1em",
+  textUnderlineOffset: "0.32em",
   ":hover": {
     color: textLinkVars.colorHover,
-    textDecoration: textLinkVars.textDecorationHover
+    textDecoration: textLinkVars.textDecorationHover,
+    /*
+          Duplicating the thickness rule due to inconsistent support
+          for shorthand properties of `text-decoration`. Without this,
+          applying the above decoration rule resets the thickness in
+          browsers that do support shorthands.
+    
+          We also cannot use the long-form `text-decoration-line` due
+          to browser support policy of Edge 16+.
+        */
+    textDecorationThickness: "0.1em"
   },
   ":focus": {
     color: textLinkVars.colorHover

package/dist/styles/lib/components/private/MaxLines/MaxLines.css.cjs

@@ -0,0 +1,30 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_entries_css_cjs = require("../../../../../css.cjs");
+fileScope.setFileScope("src/lib/components/private/MaxLines/MaxLines.css.ts?used", "braid-design-system");
+const base = css.style([styles_entries_css_cjs.atoms({
+  display: "block",
+  overflow: "hidden",
+  minWidth: 0
+}), {
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}], "base");
+const lineLimit = css.createVar("lineLimit");
+const lineClampSupportsQuery = "(display: -webkit-box) and (-webkit-line-clamp: 1)";
+const multiLine = css.style({
+  // Can drop supports query when Edge 16 is removed from browser support policy
+  "@supports": {
+    [lineClampSupportsQuery]: {
+      whiteSpace: "initial",
+      display: "-webkit-box",
+      WebkitLineClamp: lineLimit,
+      WebkitBoxOrient: "vertical"
+    }
+  }
+}, "multiLine");
+fileScope.endFileScope();
+exports.base = base;
+exports.lineLimit = lineLimit;
+exports.multiLine = multiLine;

package/dist/styles/lib/components/private/MaxLines/MaxLines.css.mjs

@@ -0,0 +1,31 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style, createVar } from "@vanilla-extract/css";
+import { atoms } from "../../../../../css.mjs";
+setFileScope("src/lib/components/private/MaxLines/MaxLines.css.ts?used", "braid-design-system");
+const base = style([atoms({
+  display: "block",
+  overflow: "hidden",
+  minWidth: 0
+}), {
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}], "base");
+const lineLimit = createVar("lineLimit");
+const lineClampSupportsQuery = "(display: -webkit-box) and (-webkit-line-clamp: 1)";
+const multiLine = style({
+  // Can drop supports query when Edge 16 is removed from browser support policy
+  "@supports": {
+    [lineClampSupportsQuery]: {
+      whiteSpace: "initial",
+      display: "-webkit-box",
+      WebkitLineClamp: lineLimit,
+      WebkitBoxOrient: "vertical"
+    }
+  }
+}, "multiLine");
+endFileScope();
+export {
+  base,
+  lineLimit,
+  multiLine
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "32.3.1",
+  "version": "32.4.0",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {

package/dist/styles/lib/components/private/Truncate/Truncate.css.cjs

@@ -1,15 +0,0 @@
-"use strict";
-const fileScope = require("@vanilla-extract/css/fileScope");
-const css = require("@vanilla-extract/css");
-const styles_entries_css_cjs = require("../../../../../css.cjs");
-fileScope.setFileScope("src/lib/components/private/Truncate/Truncate.css.ts?used", "braid-design-system");
-const truncate = css.style([styles_entries_css_cjs.atoms({
-  display: "block",
-  overflow: "hidden",
-  minWidth: 0
-}), {
-  whiteSpace: "nowrap",
-  textOverflow: "ellipsis"
-}], "truncate");
-fileScope.endFileScope();
-exports.truncate = truncate;

package/dist/styles/lib/components/private/Truncate/Truncate.css.mjs

@@ -1,16 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { style } from "@vanilla-extract/css";
-import { atoms } from "../../../../../css.mjs";
-setFileScope("src/lib/components/private/Truncate/Truncate.css.ts?used", "braid-design-system");
-const truncate = style([atoms({
-  display: "block",
-  overflow: "hidden",
-  minWidth: 0
-}), {
-  whiteSpace: "nowrap",
-  textOverflow: "ellipsis"
-}], "truncate");
-endFileScope();
-export {
-  truncate
-};