@instructure/ui-pill 10.16.1-snapshot-0 → 10.16.1-snapshot-1

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 (12) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Pill/__new-tests__/Pill.test.js +19 -11
  3. package/es/Pill/index.js +32 -25
  4. package/lib/Pill/__new-tests__/Pill.test.js +20 -13
  5. package/lib/Pill/index.js +31 -24
  6. package/package.json +19 -19
  7. package/src/Pill/__new-tests__/Pill.test.tsx +0 -1
  8. package/src/Pill/index.tsx +1 -2
  9. package/tsconfig.build.tsbuildinfo +1 -1
  10. package/types/Pill/__new-tests__/Pill.test.d.ts.map +1 -1
  11. package/types/Pill/index.d.ts +2 -4
  12. package/types/Pill/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
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.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
6
+ ## [10.16.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-pill
9
9
 
package/es/Pill/__new-tests__/Pill.test.js CHANGED
@@ -23,41 +23,47 @@ var _Pill, _Pill2, _Pill3, _Pill4, _Pill5;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render } from '@testing-library/react';
28
27
  import '@testing-library/jest-dom';
29
28
  import { runAxeCheck } from '@instructure/ui-axe-check';
30
29
  import { Pill } from '../index';
31
30
  import { IconEyeLine } from '@instructure/ui-icons';
31
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
32
32
  describe('<Pill />', () => {
33
33
  it('should render', async () => {
34
- const _render = render(_Pill || (_Pill = /*#__PURE__*/React.createElement(Pill, null, "Overdue"))),
34
+ const _render = render(_Pill || (_Pill = _jsx(Pill, {
35
+ children: "Overdue"
36
+ }))),
35
37
  container = _render.container;
36
38
  const pill = container.querySelector('div[class$="-pill"]');
37
39
  expect(pill).toBeInTheDocument();
38
40
  expect(pill).toHaveTextContent('Overdue');
39
41
  });
40
42
  it('should display text', async () => {
41
- const _render2 = render(_Pill2 || (_Pill2 = /*#__PURE__*/React.createElement(Pill, null, "Overdue"))),
43
+ const _render2 = render(_Pill2 || (_Pill2 = _jsx(Pill, {
44
+ children: "Overdue"
45
+ }))),
42
46
  container = _render2.container;
43
47
  expect(container).toHaveTextContent('Overdue');
44
48
  });
45
49
  it('should display status text', async () => {
46
- const _render3 = render(_Pill3 || (_Pill3 = /*#__PURE__*/React.createElement(Pill, {
47
- statusLabel: "Statuslabel"
48
- }, "Overdue"))),
50
+ const _render3 = render(_Pill3 || (_Pill3 = _jsx(Pill, {
51
+ statusLabel: "Statuslabel",
52
+ children: "Overdue"
53
+ }))),
49
54
  container = _render3.container;
50
55
  expect(container).toHaveTextContent('Statuslabel:');
51
56
  expect(container).toHaveTextContent('Overdue');
52
57
  });
53
58
  it('should render icon text', async () => {
54
- const _render4 = render(_Pill4 || (_Pill4 = /*#__PURE__*/React.createElement(Pill, {
59
+ const _render4 = render(_Pill4 || (_Pill4 = _jsx(Pill, {
55
60
  statusLabel: "Statuslabel",
56
- renderIcon: /*#__PURE__*/React.createElement(IconEyeLine, {
61
+ renderIcon: _jsx(IconEyeLine, {
57
62
  color: "auto",
58
63
  title: "Love"
59
- })
60
- }, "Overdue"))),
64
+ }),
65
+ children: "Overdue"
66
+ }))),
61
67
  container = _render4.container;
62
68
  const svg = container.querySelector('svg');
63
69
  expect(container).toHaveTextContent('Statuslabel:');
@@ -65,7 +71,9 @@ describe('<Pill />', () => {
65
71
  expect(svg).toHaveAttribute('name', 'IconEye');
66
72
  });
67
73
  it('should be accessible', async () => {
68
- const _render5 = render(_Pill5 || (_Pill5 = /*#__PURE__*/React.createElement(Pill, null, "Overdue"))),
74
+ const _render5 = render(_Pill5 || (_Pill5 = _jsx(Pill, {
75
+ children: "Overdue"
76
+ }))),
69
77
  container = _render5.container;
70
78
  const axeCheck = await runAxeCheck(container);
71
79
  expect(axeCheck).toBe(true);
package/es/Pill/index.js CHANGED
@@ -25,13 +25,12 @@ var _dec, _dec2, _class, _Pill;
25
25
  * SOFTWARE.
26
26
  */
27
27
 
28
- /** @jsx jsx */
29
28
  import { Component } from 'react';
30
29
  import { View } from '@instructure/ui-view';
31
30
  import { passthroughProps } from '@instructure/ui-react-utils';
32
31
  import { testable } from '@instructure/ui-testable';
33
32
  import { Tooltip } from '@instructure/ui-tooltip';
34
- import { withStyle, jsx } from '@instructure/emotion';
33
+ import { withStyle } from '@instructure/emotion';
35
34
  import generateStyle from './styles';
36
35
  import generateComponentTheme from './theme';
37
36
  import { allowedProps, propTypes } from './props';
@@ -41,6 +40,7 @@ import { allowedProps, propTypes } from './props';
41
40
  category: components
42
41
  ---
43
42
  **/
43
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
44
44
  let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_Pill = class Pill extends Component {
45
45
  constructor(props) {
46
46
  super(props);
@@ -90,9 +90,10 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
90
90
  const refProp = this.state.truncated ? {} : {
91
91
  elementRef: this.handleRef
92
92
  };
93
- return jsx(View, Object.assign({}, containerProps, {
94
- as: as
95
- }, refProp, {
93
+ return _jsx(View, {
94
+ ...containerProps,
95
+ as: as,
96
+ ...refProp,
96
97
  margin: margin,
97
98
  padding: "0",
98
99
  maxWidth: styles === null || styles === void 0 ? void 0 : styles.maxWidth,
@@ -102,30 +103,36 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
102
103
  display: "inline-block",
103
104
  position: "relative",
104
105
  withFocusOutline: focused,
105
- focusColor: "info"
106
- }), jsx("div", {
107
- css: styles === null || styles === void 0 ? void 0 : styles.pill
108
- }, renderIcon && jsx("div", {
109
- css: styles === null || styles === void 0 ? void 0 : styles.icon
110
- }, renderIcon), jsx("div", {
111
- css: styles === null || styles === void 0 ? void 0 : styles.text,
112
- ref: el => {
113
- this.ellipsisRef = el;
114
- }
115
- }, statusLabel && jsx("span", {
116
- css: styles === null || styles === void 0 ? void 0 : styles.status
117
- }, statusLabel && statusLabel.concat(':')), children)));
106
+ focusColor: "info",
107
+ children: _jsxs("div", {
108
+ css: styles === null || styles === void 0 ? void 0 : styles.pill,
109
+ children: [renderIcon && _jsx("div", {
110
+ css: styles === null || styles === void 0 ? void 0 : styles.icon,
111
+ children: renderIcon
112
+ }), _jsxs("div", {
113
+ css: styles === null || styles === void 0 ? void 0 : styles.text,
114
+ ref: el => {
115
+ this.ellipsisRef = el;
116
+ },
117
+ children: [statusLabel && _jsx("span", {
118
+ css: styles === null || styles === void 0 ? void 0 : styles.status,
119
+ children: statusLabel && statusLabel.concat(':')
120
+ }), children]
121
+ })]
122
+ })
123
+ });
118
124
  }
119
125
  render() {
120
126
  if (this.state.truncated) {
121
- return jsx(Tooltip, {
127
+ return _jsx(Tooltip, {
122
128
  renderTip: this.props.statusLabel ? this.props.statusLabel.concat(': ', this.props.children) : this.props.children,
123
- elementRef: this.handleRef
124
- }, ({
125
- focused,
126
- getTriggerProps
127
- }) => {
128
- return this.renderPill(focused, getTriggerProps);
129
+ elementRef: this.handleRef,
130
+ children: ({
131
+ focused,
132
+ getTriggerProps
133
+ }) => {
134
+ return this.renderPill(focused, getTriggerProps);
135
+ }
129
136
  });
130
137
  } else {
131
138
  return this.renderPill();
package/lib/Pill/__new-tests__/Pill.test.js CHANGED
@@ -1,12 +1,11 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
3
+ var _react = require("@testing-library/react");
6
4
  require("@testing-library/jest-dom");
7
5
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
8
6
  var _index = require("../index");
9
7
  var _IconEyeLine = require("@instructure/ui-icons/lib/IconEyeLine.js");
8
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
10
9
  var _Pill, _Pill2, _Pill3, _Pill4, _Pill5;
11
10
  /*
12
11
  * The MIT License (MIT)
@@ -33,33 +32,39 @@ var _Pill, _Pill2, _Pill3, _Pill4, _Pill5;
33
32
  */
34
33
  describe('<Pill />', () => {
35
34
  it('should render', async () => {
36
- const _render = (0, _react2.render)(_Pill || (_Pill = /*#__PURE__*/_react.default.createElement(_index.Pill, null, "Overdue"))),
35
+ const _render = (0, _react.render)(_Pill || (_Pill = (0, _jsxRuntime.jsx)(_index.Pill, {
36
+ children: "Overdue"
37
+ }))),
37
38
  container = _render.container;
38
39
  const pill = container.querySelector('div[class$="-pill"]');
39
40
  expect(pill).toBeInTheDocument();
40
41
  expect(pill).toHaveTextContent('Overdue');
41
42
  });
42
43
  it('should display text', async () => {
43
- const _render2 = (0, _react2.render)(_Pill2 || (_Pill2 = /*#__PURE__*/_react.default.createElement(_index.Pill, null, "Overdue"))),
44
+ const _render2 = (0, _react.render)(_Pill2 || (_Pill2 = (0, _jsxRuntime.jsx)(_index.Pill, {
45
+ children: "Overdue"
46
+ }))),
44
47
  container = _render2.container;
45
48
  expect(container).toHaveTextContent('Overdue');
46
49
  });
47
50
  it('should display status text', async () => {
48
- const _render3 = (0, _react2.render)(_Pill3 || (_Pill3 = /*#__PURE__*/_react.default.createElement(_index.Pill, {
49
- statusLabel: "Statuslabel"
50
- }, "Overdue"))),
51
+ const _render3 = (0, _react.render)(_Pill3 || (_Pill3 = (0, _jsxRuntime.jsx)(_index.Pill, {
52
+ statusLabel: "Statuslabel",
53
+ children: "Overdue"
54
+ }))),
51
55
  container = _render3.container;
52
56
  expect(container).toHaveTextContent('Statuslabel:');
53
57
  expect(container).toHaveTextContent('Overdue');
54
58
  });
55
59
  it('should render icon text', async () => {
56
- const _render4 = (0, _react2.render)(_Pill4 || (_Pill4 = /*#__PURE__*/_react.default.createElement(_index.Pill, {
60
+ const _render4 = (0, _react.render)(_Pill4 || (_Pill4 = (0, _jsxRuntime.jsx)(_index.Pill, {
57
61
  statusLabel: "Statuslabel",
58
- renderIcon: /*#__PURE__*/_react.default.createElement(_IconEyeLine.IconEyeLine, {
62
+ renderIcon: (0, _jsxRuntime.jsx)(_IconEyeLine.IconEyeLine, {
59
63
  color: "auto",
60
64
  title: "Love"
61
- })
62
- }, "Overdue"))),
65
+ }),
66
+ children: "Overdue"
67
+ }))),
63
68
  container = _render4.container;
64
69
  const svg = container.querySelector('svg');
65
70
  expect(container).toHaveTextContent('Statuslabel:');
@@ -67,7 +72,9 @@ describe('<Pill />', () => {
67
72
  expect(svg).toHaveAttribute('name', 'IconEye');
68
73
  });
69
74
  it('should be accessible', async () => {
70
- const _render5 = (0, _react2.render)(_Pill5 || (_Pill5 = /*#__PURE__*/_react.default.createElement(_index.Pill, null, "Overdue"))),
75
+ const _render5 = (0, _react.render)(_Pill5 || (_Pill5 = (0, _jsxRuntime.jsx)(_index.Pill, {
76
+ children: "Overdue"
77
+ }))),
71
78
  container = _render5.container;
72
79
  const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
73
80
  expect(axeCheck).toBe(true);
package/lib/Pill/index.js CHANGED
@@ -15,6 +15,7 @@ var _emotion = require("@instructure/emotion");
15
15
  var _styles = _interopRequireDefault(require("./styles"));
16
16
  var _theme = _interopRequireDefault(require("./theme"));
17
17
  var _props = require("./props");
18
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
19
  const _excluded = ["margin", "children", "color", "as", "elementRef", "styles", "makeStyles", "statusLabel", "renderIcon"];
19
20
  var _dec, _dec2, _class, _Pill;
20
21
  /*
@@ -40,7 +41,6 @@ var _dec, _dec2, _class, _Pill;
40
41
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
41
42
  * SOFTWARE.
42
43
  */
43
- /** @jsx jsx */
44
44
  /**
45
45
  ---
46
46
  category: components
@@ -95,9 +95,10 @@ let Pill = exports.Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _them
95
95
  const refProp = this.state.truncated ? {} : {
96
96
  elementRef: this.handleRef
97
97
  };
98
- return (0, _emotion.jsx)(_View.View, Object.assign({}, containerProps, {
99
- as: as
100
- }, refProp, {
98
+ return (0, _jsxRuntime.jsx)(_View.View, {
99
+ ...containerProps,
100
+ as: as,
101
+ ...refProp,
101
102
  margin: margin,
102
103
  padding: "0",
103
104
  maxWidth: styles === null || styles === void 0 ? void 0 : styles.maxWidth,
@@ -107,30 +108,36 @@ let Pill = exports.Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _them
107
108
  display: "inline-block",
108
109
  position: "relative",
109
110
  withFocusOutline: focused,
110
- focusColor: "info"
111
- }), (0, _emotion.jsx)("div", {
112
- css: styles === null || styles === void 0 ? void 0 : styles.pill
113
- }, renderIcon && (0, _emotion.jsx)("div", {
114
- css: styles === null || styles === void 0 ? void 0 : styles.icon
115
- }, renderIcon), (0, _emotion.jsx)("div", {
116
- css: styles === null || styles === void 0 ? void 0 : styles.text,
117
- ref: el => {
118
- this.ellipsisRef = el;
119
- }
120
- }, statusLabel && (0, _emotion.jsx)("span", {
121
- css: styles === null || styles === void 0 ? void 0 : styles.status
122
- }, statusLabel && statusLabel.concat(':')), children)));
111
+ focusColor: "info",
112
+ children: (0, _jsxRuntime.jsxs)("div", {
113
+ css: styles === null || styles === void 0 ? void 0 : styles.pill,
114
+ children: [renderIcon && (0, _jsxRuntime.jsx)("div", {
115
+ css: styles === null || styles === void 0 ? void 0 : styles.icon,
116
+ children: renderIcon
117
+ }), (0, _jsxRuntime.jsxs)("div", {
118
+ css: styles === null || styles === void 0 ? void 0 : styles.text,
119
+ ref: el => {
120
+ this.ellipsisRef = el;
121
+ },
122
+ children: [statusLabel && (0, _jsxRuntime.jsx)("span", {
123
+ css: styles === null || styles === void 0 ? void 0 : styles.status,
124
+ children: statusLabel && statusLabel.concat(':')
125
+ }), children]
126
+ })]
127
+ })
128
+ });
123
129
  }
124
130
  render() {
125
131
  if (this.state.truncated) {
126
- return (0, _emotion.jsx)(_Tooltip.Tooltip, {
132
+ return (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
127
133
  renderTip: this.props.statusLabel ? this.props.statusLabel.concat(': ', this.props.children) : this.props.children,
128
- elementRef: this.handleRef
129
- }, ({
130
- focused,
131
- getTriggerProps
132
- }) => {
133
- return this.renderPill(focused, getTriggerProps);
134
+ elementRef: this.handleRef,
135
+ children: ({
136
+ focused,
137
+ getTriggerProps
138
+ }) => {
139
+ return this.renderPill(focused, getTriggerProps);
140
+ }
134
141
  });
135
142
  } else {
136
143
  return this.renderPill();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-pill",
3
- "version": "10.16.1-snapshot-0",
3
+ "version": "10.16.1-snapshot-1",
4
4
  "description": "A UI component to communicate concise status.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,27 +24,27 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.26.0",
27
- "@instructure/console": "10.16.1-snapshot-0",
28
- "@instructure/emotion": "10.16.1-snapshot-0",
29
- "@instructure/shared-types": "10.16.1-snapshot-0",
30
- "@instructure/ui-react-utils": "10.16.1-snapshot-0",
31
- "@instructure/ui-testable": "10.16.1-snapshot-0",
32
- "@instructure/ui-tooltip": "10.16.1-snapshot-0",
33
- "@instructure/ui-truncate-text": "10.16.1-snapshot-0",
34
- "@instructure/ui-utils": "10.16.1-snapshot-0",
35
- "@instructure/ui-view": "10.16.1-snapshot-0",
27
+ "@instructure/console": "10.16.1-snapshot-1",
28
+ "@instructure/emotion": "10.16.1-snapshot-1",
29
+ "@instructure/shared-types": "10.16.1-snapshot-1",
30
+ "@instructure/ui-react-utils": "10.16.1-snapshot-1",
31
+ "@instructure/ui-testable": "10.16.1-snapshot-1",
32
+ "@instructure/ui-tooltip": "10.16.1-snapshot-1",
33
+ "@instructure/ui-truncate-text": "10.16.1-snapshot-1",
34
+ "@instructure/ui-utils": "10.16.1-snapshot-1",
35
+ "@instructure/ui-view": "10.16.1-snapshot-1",
36
36
  "prop-types": "^15.8.1"
37
37
  },
38
38
  "devDependencies": {
39
- "@instructure/ui-axe-check": "10.16.1-snapshot-0",
40
- "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
41
- "@instructure/ui-color-utils": "10.16.1-snapshot-0",
42
- "@instructure/ui-icons": "10.16.1-snapshot-0",
43
- "@instructure/ui-scripts": "10.16.1-snapshot-0",
44
- "@instructure/ui-test-locator": "10.16.1-snapshot-0",
45
- "@instructure/ui-test-queries": "10.16.1-snapshot-0",
46
- "@instructure/ui-test-utils": "10.16.1-snapshot-0",
47
- "@instructure/ui-themes": "10.16.1-snapshot-0",
39
+ "@instructure/ui-axe-check": "10.16.1-snapshot-1",
40
+ "@instructure/ui-babel-preset": "10.16.1-snapshot-1",
41
+ "@instructure/ui-color-utils": "10.16.1-snapshot-1",
42
+ "@instructure/ui-icons": "10.16.1-snapshot-1",
43
+ "@instructure/ui-scripts": "10.16.1-snapshot-1",
44
+ "@instructure/ui-test-locator": "10.16.1-snapshot-1",
45
+ "@instructure/ui-test-queries": "10.16.1-snapshot-1",
46
+ "@instructure/ui-test-utils": "10.16.1-snapshot-1",
47
+ "@instructure/ui-themes": "10.16.1-snapshot-1",
48
48
  "@testing-library/jest-dom": "^6.6.3",
49
49
  "@testing-library/react": "^16.0.1",
50
50
  "vitest": "^2.1.8"
package/src/Pill/__new-tests__/Pill.test.tsx CHANGED
@@ -22,7 +22,6 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React from 'react'
26
25
  import { render } from '@testing-library/react'
27
26
  import '@testing-library/jest-dom'
28
27
 
package/src/Pill/index.tsx CHANGED
@@ -22,7 +22,6 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- /** @jsx jsx */
26
25
  import { Component } from 'react'
27
26
 
28
27
  import { View } from '@instructure/ui-view'
@@ -31,7 +30,7 @@ import { testable } from '@instructure/ui-testable'
31
30
  import { Tooltip } from '@instructure/ui-tooltip'
32
31
  import type { TooltipRenderChildrenArgs } from '@instructure/ui-tooltip'
33
32
 
34
- import { withStyle, jsx } from '@instructure/emotion'
33
+ import { withStyle } from '@instructure/emotion'
35
34
 
36
35
  import generateStyle from './styles'
37
36
  import generateComponentTheme from './theme'