braid-design-system 32.12.3 → 32.12.5

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # braid-design-system
 
+## 32.12.5
+
+### Patch Changes
+
+- The Braid Provider contains some code to check that it's running in a browser context (otherwise a BraidTestProvider should be used). ([#1382](https://github.com/seek-oss/braid-design-system/pull/1382))
+
+  Part of this check was looking to see if there was a `navigator` object, which was not available in Node.
+  If there were, it would check the `userAgent` to determine if it was inside jsdom.
+
+  Node 21 has a `navigator` object, but it doesn't have a `userAgent` property, so this check was failing (cannot read property 'indexOf' of undefined).
+
+  The "are we in JSDom" check in the BraidProvider has now been reworked slightly to account for the potentially existing but empty `navigator` object.
+
+## 32.12.4
+
+### Patch Changes
+
+- **TextLink, TextLinkButton:** Ensure consistent underline thickness on weak links ([#1380](https://github.com/seek-oss/braid-design-system/pull/1380))
+
+  A subtle bug affecting weak links was resulting in a change in underline thickness on hover.
+  This bug has been fixed such that weak links now always have the same underline thickness regardless of hover state.
+
 ## 32.12.3
 
 ### Patch Changes

package/dist/side-effects/lib/components/BraidProvider/BraidProvider.cjs

@@ -125,7 +125,7 @@ const BraidProvider = ({
   const linkComponentFromContext = React.useContext(LinkComponentContext);
   useHideFocusRings(!(alreadyInBraidProvider || inTestProvider));
   assert__default.default(
-    typeof navigator !== "object" || navigator.userAgent.indexOf("jsdom") === -1 || inTestProvider,
+    inTestProvider || typeof navigator === "undefined" || navigator.userAgent === void 0 || navigator.userAgent.indexOf("jsdom") === -1,
     `Rendering 'BraidProvider' in Jest is not supported as it expects a browser environment. Please switch to 'BraidTestProvider'. See the docs for more info: https://seek-oss.github.io/braid-design-system/components/BraidTestProvider`
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(BraidThemeContext.Provider, { value: theme, children: [

package/dist/side-effects/lib/components/BraidProvider/BraidProvider.mjs

@@ -121,7 +121,7 @@ const BraidProvider = ({
   const linkComponentFromContext = useContext(LinkComponentContext);
   useHideFocusRings(!(alreadyInBraidProvider || inTestProvider));
   assert(
-    typeof navigator !== "object" || navigator.userAgent.indexOf("jsdom") === -1 || inTestProvider,
+    inTestProvider || typeof navigator === "undefined" || navigator.userAgent === void 0 || navigator.userAgent.indexOf("jsdom") === -1,
     `Rendering 'BraidProvider' in Jest is not supported as it expects a browser environment. Please switch to 'BraidTestProvider'. See the docs for more info: https://seek-oss.github.io/braid-design-system/components/BraidTestProvider`
   );
   return /* @__PURE__ */ jsxs(BraidThemeContext.Provider, { value: theme, children: [

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

@@ -20,16 +20,17 @@ const weakLinkVars = css.assignVars(textLinkVars, {
   color: "inherit",
   colorHover: "inherit"
 });
+const textDecorationThickness = "0.08em";
 const base = css.style({
   color: textLinkVars.color,
   textDecoration: styles_lib_themes_vars_css_cjs.vars.linkDecoration,
-  textDecorationThickness: "0.08em",
+  textDecorationThickness,
   textUnderlineOffset: 3,
   ":hover": {
     color: textLinkVars.colorHover,
     textDecoration: "underline",
     /*
-          Duplicating the thickness rule due to inconsistent support
+          Duplicating the thickness property 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.
@@ -37,7 +38,7 @@ const base = css.style({
           We also cannot use the long-form `text-decoration-line` due
           to browser support policy of Edge 16+.
         */
-    textDecorationThickness: "0.08em"
+    textDecorationThickness
   },
   ":focus-visible": {
     color: textLinkVars.colorHover,
@@ -48,7 +49,15 @@ const base = css.style({
 }, "base");
 const weakLink = css.style({
   vars: weakLinkVars,
-  textDecoration: "underline"
+  textDecoration: "underline",
+  /*
+    Duplicating the thickness property again as the `textDecoration`
+    property above overrides the `textDecorationThickness` property
+    in the `base` style due to CSS rule ordering. Without this property,
+    weak links were receiving `auto` thickness instead of the desired
+    value.
+  */
+  textDecorationThickness
 }, "weakLink");
 const regularLinkLightMode = css.styleVariants({
   light: {

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

@@ -19,16 +19,17 @@ const weakLinkVars = assignVars(textLinkVars, {
   color: "inherit",
   colorHover: "inherit"
 });
+const textDecorationThickness = "0.08em";
 const base = style({
   color: textLinkVars.color,
   textDecoration: vars.linkDecoration,
-  textDecorationThickness: "0.08em",
+  textDecorationThickness,
   textUnderlineOffset: 3,
   ":hover": {
     color: textLinkVars.colorHover,
     textDecoration: "underline",
     /*
-          Duplicating the thickness rule due to inconsistent support
+          Duplicating the thickness property 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.
@@ -36,7 +37,7 @@ const base = style({
           We also cannot use the long-form `text-decoration-line` due
           to browser support policy of Edge 16+.
         */
-    textDecorationThickness: "0.08em"
+    textDecorationThickness
   },
   ":focus-visible": {
     color: textLinkVars.colorHover,
@@ -47,7 +48,15 @@ const base = style({
 }, "base");
 const weakLink = style({
   vars: weakLinkVars,
-  textDecoration: "underline"
+  textDecoration: "underline",
+  /*
+    Duplicating the thickness property again as the `textDecoration`
+    property above overrides the `textDecorationThickness` property
+    in the `base` style due to CSS rule ordering. Without this property,
+    weak links were receiving `auto` thickness instead of the desired
+    value.
+  */
+  textDecorationThickness
 }, "weakLink");
 const regularLinkLightMode = styleVariants({
   light: {

package/package.json

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