braid-design-system 33.11.3 → 33.11.4

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # braid-design-system
2
2
 
3
+ ## 33.11.4
4
+
5
+ ### Patch Changes
6
+
7
+ - **Button, ButtonIcon, ButtonLink:** Ensure active transition is correctly applied ([#1868](https://github.com/seek-oss/braid-design-system/pull/1868))
8
+
3
9
  ## 33.11.3
4
10
 
5
11
  ### Patch Changes
@@ -332,7 +332,6 @@ const useButtonStyles = ({
332
332
  display: "flex",
333
333
  alignItems: "center",
334
334
  justifyContent: "center",
335
- transition: "touchable",
336
335
  textAlign: "center",
337
336
  userSelect: "none",
338
337
  background: stylesForVariant.background && typeof stylesForVariant.background !== "string" ? colorContrast(stylesForVariant.background) : stylesForVariant.background,
@@ -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)
@@ -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)
@@ -329,7 +329,6 @@ const useButtonStyles = ({
329
329
  display: "flex",
330
330
  alignItems: "center",
331
331
  justifyContent: "center",
332
- transition: "touchable",
333
332
  textAlign: "center",
334
333
  userSelect: "none",
335
334
  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.4",
4
4
  "description": "Themeable design system for the SEEK Group",
5
5
  "homepage": "https://seek-oss.github.io/braid-design-system/",
6
6
  "bugs": {