@instructure/ui-buttons 11.7.4-snapshot-117 → 11.7.4-snapshot-119

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 (7) hide show
  1. package/CHANGELOG.md +2 -1
  2. package/es/BaseButton/v2/styles.js +29 -0
  3. package/lib/BaseButton/v2/styles.js +29 -0
  4. package/package.json +17 -17
  5. package/src/BaseButton/v2/styles.ts +28 -0
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/BaseButton/v2/styles.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,11 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.4-snapshot-117](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-117) (2026-07-21)
6
+ ## [11.7.4-snapshot-119](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-119) (2026-07-21)
7
7
 
8
8
 
9
9
  ### Bug Fixes
10
10
 
11
+ * **ui-buttons:** fix ai-secondary button size diff ([d559a3f](https://github.com/instructure/instructure-ui/commit/d559a3f5444ac70ef4f037f8810336825fb5e795))
11
12
  * **ui-buttons:** fix buttons disabled style and color ([2f2f7b0](https://github.com/instructure/instructure-ui/commit/2f2f7b04c7d666aef0e76054c9f722dab9f679e7))
12
13
  * **ui-table:** fix caption for table to be responsive to sorting ([aac2b17](https://github.com/instructure/instructure-ui/commit/aac2b1790f970a1e8e2d959723eb0e4248105dd2))
13
14
 
package/es/BaseButton/v2/styles.js CHANGED
@@ -44,6 +44,23 @@ const generateStyle = (componentTheme, params, _sharedTokens, extraArgs) => {
44
44
  condensedSmall: componentTheme.gapButtonContentSm,
45
45
  condensedMedium: componentTheme.gapButtonContentSm
46
46
  };
47
+
48
+ // Outer height token per size, keyed like `sizeVariants`. Used to compensate
49
+ // the ai-secondary gradient-border padding.
50
+ const heightForSize = {
51
+ small: componentTheme.smallHeight,
52
+ medium: componentTheme.mediumHeight,
53
+ large: componentTheme.largeHeight,
54
+ condensedSmall: componentTheme.heightXxs,
55
+ condensedMedium: componentTheme.heightXs
56
+ };
57
+
58
+ // ai-secondary draws its gradient "border" as a ::before ring whose space is
59
+ // reserved by padding on the button wrapper (see the `&&&&&&&&&&` block below).
60
+ // That padding is additive to the content box, so an ai-secondary button ends
61
+ // up 2 × borderWidth taller — and, when icon-only, wider — than the same button
62
+ // in any other color. Shrink the content box by the same amount to compensate.
63
+ const aiSecondaryContentSize = color === 'ai-secondary' ? `calc(${heightForSize[size]} - ${componentTheme.borderWidth} * 2)` : undefined;
47
64
  const shapeVariants = {
48
65
  circle: {
49
66
  borderRadius: componentTheme.borderRadiusFull
@@ -514,6 +531,18 @@ const generateStyle = (componentTheme, params, _sharedTokens, extraArgs) => {
514
531
  }),
515
532
  ...(!withBorder && {
516
533
  borderStyle: 'none'
534
+ }),
535
+ // ai-secondary uses padding to render its gradient border, which increases
536
+ // the outer size. Reduce the content size to keep dimensions consistent.
537
+ ...(aiSecondaryContentSize && {
538
+ ...(size === 'condensedSmall' || size === 'condensedMedium' ? {
539
+ height: aiSecondaryContentSize
540
+ } : {
541
+ minHeight: aiSecondaryContentSize
542
+ }),
543
+ ...(hasOnlyIconVisible && {
544
+ width: aiSecondaryContentSize
545
+ })
517
546
  })
518
547
  },
519
548
  children: {
package/lib/BaseButton/v2/styles.js CHANGED
@@ -50,6 +50,23 @@ const generateStyle = (componentTheme, params, _sharedTokens, extraArgs) => {
50
50
  condensedSmall: componentTheme.gapButtonContentSm,
51
51
  condensedMedium: componentTheme.gapButtonContentSm
52
52
  };
53
+
54
+ // Outer height token per size, keyed like `sizeVariants`. Used to compensate
55
+ // the ai-secondary gradient-border padding.
56
+ const heightForSize = {
57
+ small: componentTheme.smallHeight,
58
+ medium: componentTheme.mediumHeight,
59
+ large: componentTheme.largeHeight,
60
+ condensedSmall: componentTheme.heightXxs,
61
+ condensedMedium: componentTheme.heightXs
62
+ };
63
+
64
+ // ai-secondary draws its gradient "border" as a ::before ring whose space is
65
+ // reserved by padding on the button wrapper (see the `&&&&&&&&&&` block below).
66
+ // That padding is additive to the content box, so an ai-secondary button ends
67
+ // up 2 × borderWidth taller — and, when icon-only, wider — than the same button
68
+ // in any other color. Shrink the content box by the same amount to compensate.
69
+ const aiSecondaryContentSize = color === 'ai-secondary' ? `calc(${heightForSize[size]} - ${componentTheme.borderWidth} * 2)` : undefined;
53
70
  const shapeVariants = {
54
71
  circle: {
55
72
  borderRadius: componentTheme.borderRadiusFull
@@ -520,6 +537,18 @@ const generateStyle = (componentTheme, params, _sharedTokens, extraArgs) => {
520
537
  }),
521
538
  ...(!withBorder && {
522
539
  borderStyle: 'none'
540
+ }),
541
+ // ai-secondary uses padding to render its gradient border, which increases
542
+ // the outer size. Reduce the content size to keep dimensions consistent.
543
+ ...(aiSecondaryContentSize && {
544
+ ...(size === 'condensedSmall' || size === 'condensedMedium' ? {
545
+ height: aiSecondaryContentSize
546
+ } : {
547
+ minHeight: aiSecondaryContentSize
548
+ }),
549
+ ...(hasOnlyIconVisible && {
550
+ width: aiSecondaryContentSize
551
+ })
523
552
  })
524
553
  },
525
554
  children: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-buttons",
3
- "version": "11.7.4-snapshot-117",
3
+ "version": "11.7.4-snapshot-119",
4
4
  "description": "Accessible button components",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -16,28 +16,28 @@
16
16
  "dependencies": {
17
17
  "@babel/runtime": "^7.29.7",
18
18
  "keycode": "^2",
19
- "@instructure/console": "11.7.4-snapshot-117",
20
- "@instructure/shared-types": "11.7.4-snapshot-117",
21
- "@instructure/ui-a11y-content": "11.7.4-snapshot-117",
22
- "@instructure/ui-a11y-utils": "11.7.4-snapshot-117",
23
- "@instructure/emotion": "11.7.4-snapshot-117",
24
- "@instructure/ui-color-utils": "11.7.4-snapshot-117",
25
- "@instructure/ui-icons": "11.7.4-snapshot-117",
26
- "@instructure/ui-position": "11.7.4-snapshot-117",
27
- "@instructure/ui-react-utils": "11.7.4-snapshot-117",
28
- "@instructure/ui-tooltip": "11.7.4-snapshot-117",
29
- "@instructure/ui-dom-utils": "11.7.4-snapshot-117",
30
- "@instructure/ui-themes": "11.7.4-snapshot-117",
31
- "@instructure/ui-view": "11.7.4-snapshot-117",
32
- "@instructure/ui-utils": "11.7.4-snapshot-117"
19
+ "@instructure/console": "11.7.4-snapshot-119",
20
+ "@instructure/emotion": "11.7.4-snapshot-119",
21
+ "@instructure/shared-types": "11.7.4-snapshot-119",
22
+ "@instructure/ui-a11y-utils": "11.7.4-snapshot-119",
23
+ "@instructure/ui-a11y-content": "11.7.4-snapshot-119",
24
+ "@instructure/ui-color-utils": "11.7.4-snapshot-119",
25
+ "@instructure/ui-dom-utils": "11.7.4-snapshot-119",
26
+ "@instructure/ui-icons": "11.7.4-snapshot-119",
27
+ "@instructure/ui-position": "11.7.4-snapshot-119",
28
+ "@instructure/ui-themes": "11.7.4-snapshot-119",
29
+ "@instructure/ui-react-utils": "11.7.4-snapshot-119",
30
+ "@instructure/ui-tooltip": "11.7.4-snapshot-119",
31
+ "@instructure/ui-utils": "11.7.4-snapshot-119",
32
+ "@instructure/ui-view": "11.7.4-snapshot-119"
33
33
  },
34
34
  "devDependencies": {
35
35
  "@testing-library/jest-dom": "^6.9.1",
36
36
  "@testing-library/react": "16.3.2",
37
37
  "@testing-library/user-event": "^14.6.1",
38
38
  "vitest": "^4.1.9",
39
- "@instructure/ui-axe-check": "11.7.4-snapshot-117",
40
- "@instructure/ui-babel-preset": "11.7.4-snapshot-117"
39
+ "@instructure/ui-axe-check": "11.7.4-snapshot-119",
40
+ "@instructure/ui-babel-preset": "11.7.4-snapshot-119"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "react": ">=18 <=19"
package/src/BaseButton/v2/styles.ts CHANGED
@@ -55,6 +55,26 @@ const generateStyle = (
55
55
  condensedMedium: componentTheme.gapButtonContentSm
56
56
  }
57
57
 
58
+ // Outer height token per size, keyed like `sizeVariants`. Used to compensate
59
+ // the ai-secondary gradient-border padding.
60
+ const heightForSize = {
61
+ small: componentTheme.smallHeight,
62
+ medium: componentTheme.mediumHeight,
63
+ large: componentTheme.largeHeight,
64
+ condensedSmall: componentTheme.heightXxs,
65
+ condensedMedium: componentTheme.heightXs
66
+ }
67
+
68
+ // ai-secondary draws its gradient "border" as a ::before ring whose space is
69
+ // reserved by padding on the button wrapper (see the `&&&&&&&&&&` block below).
70
+ // That padding is additive to the content box, so an ai-secondary button ends
71
+ // up 2 × borderWidth taller — and, when icon-only, wider — than the same button
72
+ // in any other color. Shrink the content box by the same amount to compensate.
73
+ const aiSecondaryContentSize =
74
+ color === 'ai-secondary'
75
+ ? `calc(${heightForSize[size!]} - ${componentTheme.borderWidth} * 2)`
76
+ : undefined
77
+
58
78
  const shapeVariants = {
59
79
  circle: { borderRadius: componentTheme.borderRadiusFull },
60
80
  rectangle: {}
@@ -560,6 +580,14 @@ const generateStyle = (
560
580
  }),
561
581
  ...(!withBorder && {
562
582
  borderStyle: 'none'
583
+ }),
584
+ // ai-secondary uses padding to render its gradient border, which increases
585
+ // the outer size. Reduce the content size to keep dimensions consistent.
586
+ ...(aiSecondaryContentSize && {
587
+ ...(size === 'condensedSmall' || size === 'condensedMedium'
588
+ ? { height: aiSecondaryContentSize }
589
+ : { minHeight: aiSecondaryContentSize }),
590
+ ...(hasOnlyIconVisible && { width: aiSecondaryContentSize })
563
591
  })
564
592
  },
565
593