@instructure/ui-pill 8.48.3 → 8.48.4-snapshot-0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.48.4-snapshot-0](https://github.com/instructure/instructure-ui/compare/v8.48.3...v8.48.4-snapshot-0) (2023-11-24)
+
+
+### Features
+
+* **shared-types,ui-pill:** change pill according to new design guidelines ([3bd8ee6](https://github.com/instructure/instructure-ui/commit/3bd8ee6316650dc66068f6e4d1a3fbb2fbb09e42))
+
+
+
+
+
 ## [8.48.3](https://github.com/instructure/instructure-ui/compare/v8.48.2...v8.48.3) (2023-11-23)
 
 **Note:** Version bump only for package @instructure/ui-pill

package/es/Pill/__new-tests__/Pill.test.js

@@ -0,0 +1,80 @@
+var _Pill, _Pill2, _Pill3, _Pill4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+// eslint-disable-next-line no-restricted-imports
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { Pill } from '../index';
+import { IconEyeLine } from '@instructure/ui-icons';
+const originalResizeObserver = global.ResizeObserver;
+describe('<Pill />', () => {
+  beforeAll(() => {
+    // Mock for ResizeObserver browser API
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn()
+    }));
+  });
+  it('should render', async () => {
+    const _render = render(_Pill || (_Pill = /*#__PURE__*/React.createElement(Pill, null, "Overdue"))),
+      container = _render.container;
+    expect(container).toHaveTextContent('Overdue');
+  });
+  it('should display status text', async () => {
+    const _render2 = render(_Pill2 || (_Pill2 = /*#__PURE__*/React.createElement(Pill, {
+        statusLabel: "Statuslabel"
+      }, "Overdue"))),
+      container = _render2.container;
+    expect(container).toHaveTextContent('Statuslabel:');
+    expect(container).toHaveTextContent('Overdue');
+  });
+  it('should render icon text', async () => {
+    const _render3 = render(_Pill3 || (_Pill3 = /*#__PURE__*/React.createElement(Pill, {
+        statusLabel: "Statuslabel",
+        renderIcon: /*#__PURE__*/React.createElement(IconEyeLine, {
+          color: "auto",
+          title: "Love"
+        })
+      }, "Overdue"))),
+      container = _render3.container;
+    const svg = container.querySelector('svg');
+    expect(container).toHaveTextContent('Statuslabel:');
+    expect(container).toHaveTextContent('Overdue');
+    expect(svg).toHaveAttribute('name', 'IconEye');
+  });
+  it('should be accessible', async () => {
+    const _render4 = render(_Pill4 || (_Pill4 = /*#__PURE__*/React.createElement(Pill, null, "Overdue"))),
+      container = _render4.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  afterAll(() => {
+    global.ResizeObserver = originalResizeObserver;
+  });
+});

package/es/Pill/index.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["margin", "children", "color", "as", "elementRef", "styles", "makeStyles"];
+const _excluded = ["margin", "children", "color", "as", "elementRef", "styles", "makeStyles", "statusLabel", "renderIcon"];
 var _dec, _dec2, _class, _class2;
 /*
  * The MIT License (MIT)
@@ -28,7 +28,6 @@ var _dec, _dec2, _class, _class2;
 /** @jsx jsx */
 import { Component } from 'react';
 import { View } from '@instructure/ui-view';
-import { TruncateText } from '@instructure/ui-truncate-text';
 import { passthroughProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { Tooltip } from '@instructure/ui-tooltip';
@@ -46,6 +45,7 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   constructor(props) {
     super(props);
     this.ref = null;
+    this.ellipsisRef = null;
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
@@ -59,16 +59,17 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
+    this.setTruncation();
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-  handleTruncation(truncated) {
-    if (truncated !== this.state.truncated) {
+  setTruncation() {
+    if (this.ellipsisRef) {
       this.setState({
-        truncated: truncated
+        truncated: this.ellipsisRef.offsetWidth < this.ellipsisRef.scrollWidth
       });
     }
   }
@@ -81,6 +82,8 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       elementRef = _this$props3.elementRef,
       styles = _this$props3.styles,
       makeStyles = _this$props3.makeStyles,
+      statusLabel = _this$props3.statusLabel,
+      renderIcon = _this$props3.renderIcon,
       props = _objectWithoutProperties(_this$props3, _excluded);
     const filteredProps = passthroughProps(props);
     const containerProps = typeof getTriggerProps === 'function' ? getTriggerProps(filteredProps) : filteredProps;
@@ -100,20 +103,23 @@ let Pill = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       position: "relative",
       withFocusOutline: focused,
       focusColor: "info"
-    }), jsx("span", {
+    }), jsx("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.pill
-    }, jsx("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.text
-    }, jsx(TruncateText, {
-      onUpdate: truncated => {
-        this.handleTruncation(truncated);
+    }, renderIcon && jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.icon
+    }, renderIcon), jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.text,
+      ref: el => {
+        this.ellipsisRef = el;
       }
-    }, children))));
+    }, statusLabel && jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.status
+    }, statusLabel && statusLabel.concat(':')), children)));
   }
   render() {
     if (this.state.truncated) {
       return jsx(Tooltip, {
-        renderTip: this.props.children,
+        renderTip: this.props.statusLabel ? this.props.statusLabel.concat(': ', this.props.children) : this.props.children,
         elementRef: this.handleRef
       }, ({
         focused,

package/es/Pill/props.js

@@ -30,7 +30,9 @@ const propTypes = {
   children: PropTypes.node.isRequired,
   color: PropTypes.oneOf(['primary', 'success', 'danger', 'info', 'warning', 'alert']),
   elementRef: PropTypes.func,
-  margin: ThemeablePropTypes.spacing
+  margin: ThemeablePropTypes.spacing,
+  statusLabel: PropTypes.string,
+  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
 const allowedProps = ['as', 'children', 'color', 'elementRef', 'margin'];
 export { propTypes, allowedProps };

package/es/Pill/styles.js

@@ -63,7 +63,9 @@ const generateStyle = (componentTheme, props) => {
   return {
     pill: {
       label: 'pill',
-      display: 'block',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
       fontFamily: componentTheme.fontFamily,
       boxSizing: 'border-box',
       padding: componentTheme.padding,
@@ -75,13 +77,29 @@ const generateStyle = (componentTheme, props) => {
       lineHeight: `calc(${componentTheme.height} - (${componentTheme.borderWidth} * 2))`,
       ...pillColorVariants[color]
     },
+    status: {
+      label: 'pill__status',
+      boxSizing: 'border-box',
+      fontSize: componentTheme.textFontSize,
+      fontWeight: componentTheme.statusLabelFontWeight,
+      marginRight: '0.125rem'
+    },
+    icon: {
+      label: 'pill__icon',
+      display: 'flex',
+      alignItems: 'center',
+      marginRight: '0.375rem',
+      fontSize: '0.75rem'
+    },
     text: {
       label: 'pill__text',
       boxSizing: 'border-box',
-      textTransform: componentTheme.textTransformStyle,
+      maxWidth: componentTheme.maxWidth,
       fontSize: componentTheme.textFontSize,
       fontWeight: componentTheme.textFontWeight,
-      letterSpacing: '0.0625rem'
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
     },
     maxWidth: componentTheme.maxWidth
   };

package/es/Pill/theme.js

@@ -41,11 +41,11 @@ const generateComponentTheme = theme => {
   const componentVariables = {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall}`,
-    height: '1.3125rem',
+    height: '1.5rem',
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
-    textTransformStyle: 'uppercase',
-    textFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
-    textFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
+    textFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    textFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    statusLabelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
     maxWidth: '15rem',
     primaryColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
     infoColor: colors === null || colors === void 0 ? void 0 : colors.textInfo,

package/lib/Pill/__new-tests__/Pill.test.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+var _IconEyeLine = require("@instructure/ui-icons/lib/IconEyeLine.js");
+var _Pill, _Pill2, _Pill3, _Pill4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// eslint-disable-next-line no-restricted-imports
+const originalResizeObserver = global.ResizeObserver;
+describe('<Pill />', () => {
+  beforeAll(() => {
+    // Mock for ResizeObserver browser API
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn()
+    }));
+  });
+  it('should render', async () => {
+    const _render = (0, _react2.render)(_Pill || (_Pill = /*#__PURE__*/_react.default.createElement(_index.Pill, null, "Overdue"))),
+      container = _render.container;
+    expect(container).toHaveTextContent('Overdue');
+  });
+  it('should display status text', async () => {
+    const _render2 = (0, _react2.render)(_Pill2 || (_Pill2 = /*#__PURE__*/_react.default.createElement(_index.Pill, {
+        statusLabel: "Statuslabel"
+      }, "Overdue"))),
+      container = _render2.container;
+    expect(container).toHaveTextContent('Statuslabel:');
+    expect(container).toHaveTextContent('Overdue');
+  });
+  it('should render icon text', async () => {
+    const _render3 = (0, _react2.render)(_Pill3 || (_Pill3 = /*#__PURE__*/_react.default.createElement(_index.Pill, {
+        statusLabel: "Statuslabel",
+        renderIcon: /*#__PURE__*/_react.default.createElement(_IconEyeLine.IconEyeLine, {
+          color: "auto",
+          title: "Love"
+        })
+      }, "Overdue"))),
+      container = _render3.container;
+    const svg = container.querySelector('svg');
+    expect(container).toHaveTextContent('Statuslabel:');
+    expect(container).toHaveTextContent('Overdue');
+    expect(svg).toHaveAttribute('name', 'IconEye');
+  });
+  it('should be accessible', async () => {
+    const _render4 = (0, _react2.render)(_Pill4 || (_Pill4 = /*#__PURE__*/_react.default.createElement(_index.Pill, null, "Overdue"))),
+      container = _render4.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+  afterAll(() => {
+    global.ResizeObserver = originalResizeObserver;
+  });
+});

package/lib/Pill/index.js

@@ -8,7 +8,6 @@ exports.default = exports.Pill = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _View = require("@instructure/ui-view/lib/View");
-var _TruncateText = require("@instructure/ui-truncate-text/lib/TruncateText");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
@@ -16,7 +15,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-const _excluded = ["margin", "children", "color", "as", "elementRef", "styles", "makeStyles"];
+const _excluded = ["margin", "children", "color", "as", "elementRef", "styles", "makeStyles", "statusLabel", "renderIcon"];
 var _dec, _dec2, _class, _class2;
 /*
  * The MIT License (MIT)
@@ -51,6 +50,7 @@ let Pill = exports.Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   constructor(props) {
     super(props);
     this.ref = null;
+    this.ellipsisRef = null;
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
@@ -64,16 +64,17 @@ let Pill = exports.Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
+    this.setTruncation();
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-  handleTruncation(truncated) {
-    if (truncated !== this.state.truncated) {
+  setTruncation() {
+    if (this.ellipsisRef) {
       this.setState({
-        truncated: truncated
+        truncated: this.ellipsisRef.offsetWidth < this.ellipsisRef.scrollWidth
       });
     }
   }
@@ -86,6 +87,8 @@ let Pill = exports.Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       elementRef = _this$props3.elementRef,
       styles = _this$props3.styles,
       makeStyles = _this$props3.makeStyles,
+      statusLabel = _this$props3.statusLabel,
+      renderIcon = _this$props3.renderIcon,
       props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const filteredProps = (0, _passthroughProps.passthroughProps)(props);
     const containerProps = typeof getTriggerProps === 'function' ? getTriggerProps(filteredProps) : filteredProps;
@@ -105,20 +108,23 @@ let Pill = exports.Pill = (_dec = (0, _emotion.withStyle)(_styles.default, _them
       position: "relative",
       withFocusOutline: focused,
       focusColor: "info"
-    }), (0, _emotion.jsx)("span", {
+    }), (0, _emotion.jsx)("div", {
       css: styles === null || styles === void 0 ? void 0 : styles.pill
-    }, (0, _emotion.jsx)("span", {
-      css: styles === null || styles === void 0 ? void 0 : styles.text
-    }, (0, _emotion.jsx)(_TruncateText.TruncateText, {
-      onUpdate: truncated => {
-        this.handleTruncation(truncated);
+    }, renderIcon && (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.icon
+    }, renderIcon), (0, _emotion.jsx)("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.text,
+      ref: el => {
+        this.ellipsisRef = el;
       }
-    }, children))));
+    }, statusLabel && (0, _emotion.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.status
+    }, statusLabel && statusLabel.concat(':')), children)));
   }
   render() {
     if (this.state.truncated) {
       return (0, _emotion.jsx)(_Tooltip.Tooltip, {
-        renderTip: this.props.children,
+        renderTip: this.props.statusLabel ? this.props.statusLabel.concat(': ', this.props.children) : this.props.children,
         elementRef: this.handleRef
       }, ({
         focused,

package/lib/Pill/props.js

@@ -37,6 +37,8 @@ const propTypes = exports.propTypes = {
   children: _propTypes.default.node.isRequired,
   color: _propTypes.default.oneOf(['primary', 'success', 'danger', 'info', 'warning', 'alert']),
   elementRef: _propTypes.default.func,
-  margin: _emotion.ThemeablePropTypes.spacing
+  margin: _emotion.ThemeablePropTypes.spacing,
+  statusLabel: _propTypes.default.string,
+  renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 };
 const allowedProps = exports.allowedProps = ['as', 'children', 'color', 'elementRef', 'margin'];

package/lib/Pill/styles.js

@@ -69,7 +69,9 @@ const generateStyle = (componentTheme, props) => {
   return {
     pill: {
       label: 'pill',
-      display: 'block',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
       fontFamily: componentTheme.fontFamily,
       boxSizing: 'border-box',
       padding: componentTheme.padding,
@@ -81,13 +83,29 @@ const generateStyle = (componentTheme, props) => {
       lineHeight: `calc(${componentTheme.height} - (${componentTheme.borderWidth} * 2))`,
       ...pillColorVariants[color]
     },
+    status: {
+      label: 'pill__status',
+      boxSizing: 'border-box',
+      fontSize: componentTheme.textFontSize,
+      fontWeight: componentTheme.statusLabelFontWeight,
+      marginRight: '0.125rem'
+    },
+    icon: {
+      label: 'pill__icon',
+      display: 'flex',
+      alignItems: 'center',
+      marginRight: '0.375rem',
+      fontSize: '0.75rem'
+    },
     text: {
       label: 'pill__text',
       boxSizing: 'border-box',
-      textTransform: componentTheme.textTransformStyle,
+      maxWidth: componentTheme.maxWidth,
       fontSize: componentTheme.textFontSize,
       fontWeight: componentTheme.textFontWeight,
-      letterSpacing: '0.0625rem'
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
     },
     maxWidth: componentTheme.maxWidth
   };

package/lib/Pill/theme.js

@@ -47,11 +47,11 @@ const generateComponentTheme = theme => {
   const componentVariables = {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall}`,
-    height: '1.3125rem',
+    height: '1.5rem',
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
-    textTransformStyle: 'uppercase',
-    textFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
-    textFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
+    textFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    textFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    statusLabelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
     maxWidth: '15rem',
     primaryColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
     infoColor: colors === null || colors === void 0 ? void 0 : colors.textInfo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pill",
-  "version": "8.48.3",
+  "version": "8.48.4-snapshot-0",
   "description": "A UI component to communicate concise status.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,24 +24,29 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.48.3",
-    "@instructure/emotion": "8.48.3",
-    "@instructure/shared-types": "8.48.3",
-    "@instructure/ui-react-utils": "8.48.3",
-    "@instructure/ui-testable": "8.48.3",
-    "@instructure/ui-tooltip": "8.48.3",
-    "@instructure/ui-truncate-text": "8.48.3",
-    "@instructure/ui-utils": "8.48.3",
-    "@instructure/ui-view": "8.48.3",
+    "@instructure/console": "8.48.4-snapshot-0",
+    "@instructure/emotion": "8.48.4-snapshot-0",
+    "@instructure/shared-types": "8.48.4-snapshot-0",
+    "@instructure/ui-react-utils": "8.48.4-snapshot-0",
+    "@instructure/ui-testable": "8.48.4-snapshot-0",
+    "@instructure/ui-tooltip": "8.48.4-snapshot-0",
+    "@instructure/ui-truncate-text": "8.48.4-snapshot-0",
+    "@instructure/ui-utils": "8.48.4-snapshot-0",
+    "@instructure/ui-view": "8.48.4-snapshot-0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.48.3",
-    "@instructure/ui-color-utils": "8.48.3",
-    "@instructure/ui-test-locator": "8.48.3",
-    "@instructure/ui-test-queries": "8.48.3",
-    "@instructure/ui-test-utils": "8.48.3",
-    "@instructure/ui-themes": "8.48.3"
+    "@instructure/ui-axe-check": "8.48.4-snapshot-0",
+    "@instructure/ui-babel-preset": "8.48.4-snapshot-0",
+    "@instructure/ui-color-utils": "8.48.4-snapshot-0",
+    "@instructure/ui-icons": "8.48.4-snapshot-0",
+    "@instructure/ui-scripts": "8.48.4-snapshot-0",
+    "@instructure/ui-test-locator": "8.48.4-snapshot-0",
+    "@instructure/ui-test-queries": "8.48.4-snapshot-0",
+    "@instructure/ui-test-utils": "8.48.4-snapshot-0",
+    "@instructure/ui-themes": "8.48.4-snapshot-0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/Pill/README.md

@@ -4,7 +4,8 @@ describes: Pill
 
 Displays short, contextual information about an item. Change the border
 and text color via the `color` prop. Use the `margin` prop to add space around
-the component.
+the component. Use the `renderIcon` prop to add an icon to the left of the text. Additionally,
+you can use the `statusLabel` prop to add a label to the left of the main text.
 
 ```js
 ---
@@ -17,30 +18,36 @@ example: true
     Excused
   </Pill>
   <Pill
+    statusLabel="Status"
     color="info"
     margin="x-small"
   >
     Draft
   </Pill>
   <Pill
+    statusLabel="Status"
+    renderIcon={<IconCheckLine />}
     color="success"
     margin="x-small"
   >
     Checked In
   </Pill>
   <Pill
+    renderIcon={<IconEndLine />}
     color="danger"
     margin="x-small"
   >
     Missing
   </Pill>
   <Pill
+    renderIcon={<IconClockLine />}
     color="warning"
     margin="x-small"
   >
     Late
   </Pill>
   <Pill
+    renderIcon={<IconMessageLine />}
     color="alert"
     margin="x-small"
   >
@@ -57,7 +64,7 @@ be handled via ellipses.
 example: true
 ---
 <Pill>
-  extraordinary superfluousness
+  Supercalifragilisticexpialidocious bear
 </Pill>
 ```