braid-design-system 33.11.3 → 33.11.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/lib/components/Button/Button.cjs +0 -2
  3. package/dist/lib/components/Button/Button.css.cjs +8 -2
  4. package/dist/lib/components/Button/Button.css.mjs +8 -2
  5. package/dist/lib/components/Button/Button.mjs +0 -2
  6. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # braid-design-system
2
2
 
3
+ ## 33.11.5
4
+
5
+ ### Patch Changes
6
+
7
+ - **Button, ButtonIcon, ButtonLink:** Remove use of deprecated `outline` atoms value, in favour of CSS property ([#1871](https://github.com/seek-oss/braid-design-system/pull/1871))
8
+
9
+ ## 33.11.4
10
+
11
+ ### Patch Changes
12
+
13
+ - **Button, ButtonIcon, ButtonLink:** Ensure active transition is correctly applied ([#1868](https://github.com/seek-oss/braid-design-system/pull/1868))
14
+
3
15
  ## 33.11.3
4
16
 
5
17
  ### Patch Changes
package/dist/lib/components/Button/Button.cjs CHANGED
@@ -321,7 +321,6 @@ const useButtonStyles = ({
321
321
  width: "full",
322
322
  borderRadius: radius,
323
323
  cursor: !loading ? "pointer" : void 0,
324
- outline: "none",
325
324
  className: [lib_components_Button_Button_css_cjs.root, size === "small" ? lib_components_private_touchable_virtualTouchable_css_cjs.virtualTouchable : void 0]
326
325
  },
327
326
  content: {
@@ -332,7 +331,6 @@ const useButtonStyles = ({
332
331
  display: "flex",
333
332
  alignItems: "center",
334
333
  justifyContent: "center",
335
- transition: "touchable",
336
334
  textAlign: "center",
337
335
  userSelect: "none",
338
336
  background: stylesForVariant.background && typeof stylesForVariant.background !== "string" ? colorContrast(stylesForVariant.background) : stylesForVariant.background,
package/dist/lib/components/Button/Button.css.cjs CHANGED
@@ -13,7 +13,7 @@ const root = css.style({
13
13
  // Necessary to overwrite Safari's default value for 'align-items' in 'button' elements (which is 'flex-start')
14
14
  alignItems: "stretch",
15
15
  // Necessary to overwrite browser default for 'a' elements (which is '1px'), keeping Button & ButtonLink uniform.
16
- outlineOffset: 0
16
+ outline: "none"
17
17
  }, "root");
18
18
  const forceActive = css.style({}, "forceActive");
19
19
  const activeAnimation = css.style({
@@ -37,7 +37,13 @@ const hoverOverlay = css.style({
37
37
  }
38
38
  }
39
39
  }, "hoverOverlay");
40
- const focusRing = css.style(lib_css_outlineStyle_cjs.outlineStyle(`${root}:focus-visible > &`), "focusRing");
40
+ const {
41
+ transition: outlineTransition,
42
+ ...restOutlineStyles
43
+ } = lib_css_outlineStyle_cjs.outlineStyle(`${root}:focus-visible > &`);
44
+ const focusRing = css.style([{
45
+ transition: [lib_themes_vars_css_cjs.vars.transition.touchable, outlineTransition].join(", ")
46
+ }, restOutlineStyles], "focusRing");
41
47
  const minHeightValueForSize = {
42
48
  standard: lib_themes_vars_css_cjs.vars.touchableSize,
43
49
  small: cssUtils.calc.multiply(lib_themes_vars_css_cjs.vars.touchableSize, 0.8)
package/dist/lib/components/Button/Button.css.mjs CHANGED
@@ -12,7 +12,7 @@ const root = style({
12
12
  // Necessary to overwrite Safari's default value for 'align-items' in 'button' elements (which is 'flex-start')
13
13
  alignItems: "stretch",
14
14
  // Necessary to overwrite browser default for 'a' elements (which is '1px'), keeping Button & ButtonLink uniform.
15
- outlineOffset: 0
15
+ outline: "none"
16
16
  }, "root");
17
17
  const forceActive = style({}, "forceActive");
18
18
  const activeAnimation = style({
@@ -36,7 +36,13 @@ const hoverOverlay = style({
36
36
  }
37
37
  }
38
38
  }, "hoverOverlay");
39
- const focusRing = style(outlineStyle(`${root}:focus-visible > &`), "focusRing");
39
+ const {
40
+ transition: outlineTransition,
41
+ ...restOutlineStyles
42
+ } = outlineStyle(`${root}:focus-visible > &`);
43
+ const focusRing = style([{
44
+ transition: [vars.transition.touchable, outlineTransition].join(", ")
45
+ }, restOutlineStyles], "focusRing");
40
46
  const minHeightValueForSize = {
41
47
  standard: vars.touchableSize,
42
48
  small: calc.multiply(vars.touchableSize, 0.8)
package/dist/lib/components/Button/Button.mjs CHANGED
@@ -318,7 +318,6 @@ const useButtonStyles = ({
318
318
  width: "full",
319
319
  borderRadius: radius,
320
320
  cursor: !loading ? "pointer" : void 0,
321
- outline: "none",
322
321
  className: [root, size === "small" ? virtualTouchable : void 0]
323
322
  },
324
323
  content: {
@@ -329,7 +328,6 @@ const useButtonStyles = ({
329
328
  display: "flex",
330
329
  alignItems: "center",
331
330
  justifyContent: "center",
332
- transition: "touchable",
333
331
  textAlign: "center",
334
332
  userSelect: "none",
335
333
  background: stylesForVariant.background && typeof stylesForVariant.background !== "string" ? colorContrast(stylesForVariant.background) : stylesForVariant.background,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "braid-design-system",
3
- "version": "33.11.3",
3
+ "version": "33.11.5",
4
4
  "description": "Themeable design system for the SEEK Group",
5
5
  "homepage": "https://seek-oss.github.io/braid-design-system/",
6
6
  "bugs": {
@@ -217,7 +217,7 @@
217
217
  "react-dom": "^19.1.0",
218
218
  "react-router": "^7.6.3",
219
219
  "sanitize-html": "^2.12.1",
220
- "sku": "14.8.0",
220
+ "sku": "14.12.2",
221
221
  "storybook": "9.0.15",
222
222
  "svgo": "^2.8.0",
223
223
  "title-case": "^3.0.3",