@instructure/ui-color-picker 10.6.2-snapshot-2 → 10.6.2-snapshot-3

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 +5 -2
  2. package/es/ColorPicker/index.js +22 -6
  3. package/lib/ColorPicker/index.js +22 -6
  4. package/package.json +25 -25
  5. package/src/ColorPicker/index.tsx +14 -4
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/ColorPicker/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +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
- ## [10.6.2-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.6.1...v10.6.2-snapshot-2) (2024-11-28)
6
+ ## [10.6.2-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.6.1...v10.6.2-snapshot-3) (2024-11-29)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-color-picker
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-color-picker:** make ColorPicker tooltip VoiceOver focusable ([610c0d8](https://github.com/instructure/instructure-ui/commit/610c0d8a03dd9c8b7080c5e2819193b1a7a4f2cd))
9
12
 
10
13
 
11
14
 
package/es/ColorPicker/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _dec2, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine, _IconInfoLine;
1
+ var _dec, _dec2, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -26,7 +26,7 @@ var _dec, _dec2, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _Icon
26
26
  /** @jsx jsx */
27
27
  /** @jsxFrag React.Fragment */
28
28
  import React, { Component } from 'react';
29
- import { withStyle, jsx } from '@instructure/emotion';
29
+ import { withStyle, jsx, InstUISettingsProvider } from '@instructure/emotion';
30
30
  import { warn, error } from '@instructure/console';
31
31
  import { omitProps } from '@instructure/ui-react-utils';
32
32
  import { testable } from '@instructure/ui-testable';
@@ -385,10 +385,26 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
385
385
  styles = _this$props9.styles;
386
386
  return tooltip ? jsx("span", null, jsx("span", {
387
387
  css: styles === null || styles === void 0 ? void 0 : styles.label
388
- }, label), jsx("span", null, jsx(Tooltip, {
389
- renderTip: tooltip
390
- }, _IconInfoLine || (_IconInfoLine = jsx(IconInfoLine, {
391
- tabIndex: -1
388
+ }, label), jsx("span", null, jsx(InstUISettingsProvider, {
389
+ theme: {
390
+ componentOverrides: {
391
+ BaseButton: {
392
+ smallHeight: 'auto'
393
+ }
394
+ }
395
+ }
396
+ }, jsx(Tooltip, {
397
+ renderTip: jsx("span", {
398
+ "aria-hidden": true
399
+ }, tooltip)
400
+ }, jsx(IconButton, {
401
+ withBackground: false,
402
+ withBorder: false,
403
+ screenReaderLabel: tooltip,
404
+ size: "small",
405
+ shape: "circle",
406
+ width: "auto",
407
+ renderIcon: IconInfoLine
392
408
  }))))) : label;
393
409
  }
394
410
  render() {
package/lib/ColorPicker/index.js CHANGED
@@ -22,7 +22,7 @@ var _Popover = require("@instructure/ui-popover/lib/Popover");
22
22
  var _IconCheckDarkLine2 = require("@instructure/ui-icons/lib/IconCheckDarkLine.js");
23
23
  var _IconWarningLine2 = require("@instructure/ui-icons/lib/IconWarningLine.js");
24
24
  var _IconTroubleLine2 = require("@instructure/ui-icons/lib/IconTroubleLine.js");
25
- var _IconInfoLine2 = require("@instructure/ui-icons/lib/IconInfoLine.js");
25
+ var _IconInfoLine = require("@instructure/ui-icons/lib/IconInfoLine.js");
26
26
  var _ColorIndicator = _interopRequireDefault(require("../ColorIndicator"));
27
27
  var _ColorMixer = _interopRequireDefault(require("../ColorMixer"));
28
28
  var _ColorContrast = _interopRequireDefault(require("../ColorContrast"));
@@ -30,7 +30,7 @@ var _ColorPreset = _interopRequireDefault(require("../ColorPreset"));
30
30
  var _styles = _interopRequireDefault(require("./styles"));
31
31
  var _theme = _interopRequireDefault(require("./theme"));
32
32
  var _props = require("./props");
33
- var _dec, _dec2, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine, _IconInfoLine;
33
+ var _dec, _dec2, _class, _ColorPicker, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine;
34
34
  /*
35
35
  * The MIT License (MIT)
36
36
  *
@@ -397,10 +397,26 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
397
397
  styles = _this$props9.styles;
398
398
  return tooltip ? (0, _emotion.jsx)("span", null, (0, _emotion.jsx)("span", {
399
399
  css: styles === null || styles === void 0 ? void 0 : styles.label
400
- }, label), (0, _emotion.jsx)("span", null, (0, _emotion.jsx)(_Tooltip.Tooltip, {
401
- renderTip: tooltip
402
- }, _IconInfoLine || (_IconInfoLine = (0, _emotion.jsx)(_IconInfoLine2.IconInfoLine, {
403
- tabIndex: -1
400
+ }, label), (0, _emotion.jsx)("span", null, (0, _emotion.jsx)(_emotion.InstUISettingsProvider, {
401
+ theme: {
402
+ componentOverrides: {
403
+ BaseButton: {
404
+ smallHeight: 'auto'
405
+ }
406
+ }
407
+ }
408
+ }, (0, _emotion.jsx)(_Tooltip.Tooltip, {
409
+ renderTip: (0, _emotion.jsx)("span", {
410
+ "aria-hidden": true
411
+ }, tooltip)
412
+ }, (0, _emotion.jsx)(_IconButton.IconButton, {
413
+ withBackground: false,
414
+ withBorder: false,
415
+ screenReaderLabel: tooltip,
416
+ size: "small",
417
+ shape: "circle",
418
+ width: "auto",
419
+ renderIcon: _IconInfoLine.IconInfoLine
404
420
  }))))) : label;
405
421
  }
406
422
  render() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-color-picker",
3
- "version": "10.6.2-snapshot-2",
3
+ "version": "10.6.2-snapshot-3",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,33 +24,33 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.25.6",
27
- "@instructure/console": "10.6.2-snapshot-2",
28
- "@instructure/emotion": "10.6.2-snapshot-2",
29
- "@instructure/shared-types": "10.6.2-snapshot-2",
30
- "@instructure/ui-a11y-content": "10.6.2-snapshot-2",
31
- "@instructure/ui-buttons": "10.6.2-snapshot-2",
32
- "@instructure/ui-color-utils": "10.6.2-snapshot-2",
33
- "@instructure/ui-dom-utils": "10.6.2-snapshot-2",
34
- "@instructure/ui-drilldown": "10.6.2-snapshot-2",
35
- "@instructure/ui-form-field": "10.6.2-snapshot-2",
36
- "@instructure/ui-icons": "10.6.2-snapshot-2",
37
- "@instructure/ui-pill": "10.6.2-snapshot-2",
38
- "@instructure/ui-popover": "10.6.2-snapshot-2",
39
- "@instructure/ui-react-utils": "10.6.2-snapshot-2",
40
- "@instructure/ui-testable": "10.6.2-snapshot-2",
41
- "@instructure/ui-text": "10.6.2-snapshot-2",
42
- "@instructure/ui-text-input": "10.6.2-snapshot-2",
43
- "@instructure/ui-themes": "10.6.2-snapshot-2",
44
- "@instructure/ui-tooltip": "10.6.2-snapshot-2",
45
- "@instructure/ui-utils": "10.6.2-snapshot-2",
46
- "@instructure/ui-view": "10.6.2-snapshot-2",
27
+ "@instructure/console": "10.6.2-snapshot-3",
28
+ "@instructure/emotion": "10.6.2-snapshot-3",
29
+ "@instructure/shared-types": "10.6.2-snapshot-3",
30
+ "@instructure/ui-a11y-content": "10.6.2-snapshot-3",
31
+ "@instructure/ui-buttons": "10.6.2-snapshot-3",
32
+ "@instructure/ui-color-utils": "10.6.2-snapshot-3",
33
+ "@instructure/ui-dom-utils": "10.6.2-snapshot-3",
34
+ "@instructure/ui-drilldown": "10.6.2-snapshot-3",
35
+ "@instructure/ui-form-field": "10.6.2-snapshot-3",
36
+ "@instructure/ui-icons": "10.6.2-snapshot-3",
37
+ "@instructure/ui-pill": "10.6.2-snapshot-3",
38
+ "@instructure/ui-popover": "10.6.2-snapshot-3",
39
+ "@instructure/ui-react-utils": "10.6.2-snapshot-3",
40
+ "@instructure/ui-testable": "10.6.2-snapshot-3",
41
+ "@instructure/ui-text": "10.6.2-snapshot-3",
42
+ "@instructure/ui-text-input": "10.6.2-snapshot-3",
43
+ "@instructure/ui-themes": "10.6.2-snapshot-3",
44
+ "@instructure/ui-tooltip": "10.6.2-snapshot-3",
45
+ "@instructure/ui-utils": "10.6.2-snapshot-3",
46
+ "@instructure/ui-view": "10.6.2-snapshot-3",
47
47
  "prop-types": "^15.8.1"
48
48
  },
49
49
  "devDependencies": {
50
- "@instructure/ui-axe-check": "10.6.2-snapshot-2",
51
- "@instructure/ui-babel-preset": "10.6.2-snapshot-2",
52
- "@instructure/ui-scripts": "10.6.2-snapshot-2",
53
- "@instructure/ui-test-utils": "10.6.2-snapshot-2",
50
+ "@instructure/ui-axe-check": "10.6.2-snapshot-3",
51
+ "@instructure/ui-babel-preset": "10.6.2-snapshot-3",
52
+ "@instructure/ui-scripts": "10.6.2-snapshot-3",
53
+ "@instructure/ui-test-utils": "10.6.2-snapshot-3",
54
54
  "@testing-library/jest-dom": "^6.4.5",
55
55
  "@testing-library/react": "^16.0.1",
56
56
  "@testing-library/user-event": "^14.5.2",
package/src/ColorPicker/index.tsx CHANGED
@@ -26,7 +26,7 @@
26
26
  /** @jsxFrag React.Fragment */
27
27
  import React, { Component } from 'react'
28
28
 
29
- import { withStyle, jsx } from '@instructure/emotion'
29
+ import { withStyle, jsx, InstUISettingsProvider } from '@instructure/emotion'
30
30
  import { warn, error } from '@instructure/console'
31
31
  import { omitProps } from '@instructure/ui-react-utils'
32
32
  import { testable } from '@instructure/ui-testable'
@@ -389,9 +389,19 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
389
389
  <span>
390
390
  <span css={styles?.label}>{label}</span>
391
391
  <span>
392
- <Tooltip renderTip={tooltip}>
393
- <IconInfoLine tabIndex={-1} />
394
- </Tooltip>
392
+ <InstUISettingsProvider
393
+ theme={{
394
+ componentOverrides: {
395
+ BaseButton: {
396
+ smallHeight: 'auto'
397
+ }
398
+ }
399
+ }}
400
+ >
401
+ <Tooltip renderTip={<span aria-hidden={true}>{tooltip}</span>}>
402
+ <IconButton withBackground={false} withBorder={false} screenReaderLabel={tooltip} size="small" shape="circle" width="auto" renderIcon={IconInfoLine}/>
403
+ </Tooltip>
404
+ </InstUISettingsProvider>
395
405
  </span>
396
406
  </span>
397
407
  ) : (