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

package/src/Pill/__new-tests__/Pill.test.tsx

@@ -0,0 +1,86 @@
+/*
+ * 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 { container } = render(<Pill>Overdue</Pill>)
+
+    expect(container).toHaveTextContent('Overdue')
+  })
+
+  it('should display status text', async () => {
+    const { container } = render(<Pill statusLabel="Statuslabel">Overdue</Pill>)
+
+    expect(container).toHaveTextContent('Statuslabel:')
+    expect(container).toHaveTextContent('Overdue')
+  })
+
+  it('should render icon text', async () => {
+    const { container } = render(
+      <Pill
+        statusLabel="Statuslabel"
+        renderIcon={<IconEyeLine color="auto" title="Love" />}
+      >
+        Overdue
+      </Pill>
+    )
+
+    const svg = container.querySelector('svg')
+
+    expect(container).toHaveTextContent('Statuslabel:')
+    expect(container).toHaveTextContent('Overdue')
+    expect(svg).toHaveAttribute('name', 'IconEye')
+  })
+
+  it('should be accessible', async () => {
+    const { container } = render(<Pill>Overdue</Pill>)
+    const axeCheck = await runAxeCheck(container)
+
+    expect(axeCheck).toBe(true)
+  })
+
+  afterAll(() => {
+    global.ResizeObserver = originalResizeObserver
+  })
+})

package/src/Pill/index.tsx

@@ -26,7 +26,6 @@
 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'
@@ -59,6 +58,8 @@ class Pill extends Component<PillProps, PillState> {
 
   ref: Element | null = null
 
+  ellipsisRef: HTMLElement | null = null
+
   constructor(props: PillProps) {
     super(props)
 
@@ -68,6 +69,7 @@ class Pill extends Component<PillProps, PillState> {
   }
 
   componentDidMount() {
+    this.setTruncation()
     this.props.makeStyles?.()
   }
 
@@ -75,10 +77,10 @@ class Pill extends Component<PillProps, PillState> {
     this.props.makeStyles?.()
   }
 
-  handleTruncation(truncated: boolean) {
-    if (truncated !== this.state.truncated) {
+  setTruncation() {
+    if (this.ellipsisRef) {
       this.setState({
-        truncated: truncated
+        truncated: this.ellipsisRef.offsetWidth < this.ellipsisRef.scrollWidth
       })
     }
   }
@@ -105,6 +107,8 @@ class Pill extends Component<PillProps, PillState> {
       elementRef,
       styles,
       makeStyles,
+      statusLabel,
+      renderIcon,
       ...props
     } = this.props
 
@@ -132,17 +136,22 @@ class Pill extends Component<PillProps, PillState> {
         withFocusOutline={focused}
         focusColor="info"
       >
-        <span css={styles?.pill}>
-          <span css={styles?.text}>
-            <TruncateText
-              onUpdate={(truncated) => {
-                this.handleTruncation(truncated)
-              }}
-            >
-              {children}
-            </TruncateText>
-          </span>
-        </span>
+        <div css={styles?.pill}>
+          {renderIcon && <div css={styles?.icon}>{renderIcon}</div>}
+          <div
+            css={styles?.text}
+            ref={(el) => {
+              this.ellipsisRef = el
+            }}
+          >
+            {statusLabel && (
+              <span css={styles?.status}>
+                {statusLabel && statusLabel.concat(':')}
+              </span>
+            )}
+            {children}
+          </div>
+        </div>
       </View>
     )
   }
@@ -150,7 +159,17 @@ class Pill extends Component<PillProps, PillState> {
   render() {
     if (this.state.truncated) {
       return (
-        <Tooltip renderTip={this.props.children} elementRef={this.handleRef}>
+        <Tooltip
+          renderTip={
+            this.props.statusLabel
+              ? this.props.statusLabel.concat(
+                  ': ',
+                  this.props.children as string
+                )
+              : this.props.children
+          }
+          elementRef={this.handleRef}
+        >
           {({ focused, getTriggerProps }) => {
             return this.renderPill(focused, getTriggerProps)
           }}

package/src/Pill/props.ts

@@ -52,6 +52,16 @@ type PillOwnProps = {
    */
   margin?: Spacing
   children: React.ReactNode
+
+  /**
+   * Adds a status label to the left of the main text.
+   */
+  statusLabel?: string
+
+  /**
+   * An icon displayed to the left of the text.
+   */
+  renderIcon?: React.ReactNode
 }
 type PropKeys = keyof PillOwnProps
 
@@ -61,7 +71,9 @@ type PillProps = PillOwnProps &
   WithStyleProps<PillTheme, PillStyle> &
   OtherHTMLAttributes<PillOwnProps>
 
-type PillStyle = ComponentStyle<'pill' | 'text' | 'maxWidth'>
+type PillStyle = ComponentStyle<
+  'pill' | 'text' | 'maxWidth' | 'status' | 'icon'
+>
 
 const propTypes: PropValidators<PropKeys> = {
   as: PropTypes.elementType, // eslint-disable-line react/require-default-props
@@ -75,7 +87,9 @@ const propTypes: PropValidators<PropKeys> = {
     'alert'
   ]),
   elementRef: PropTypes.func,
-  margin: ThemeablePropTypes.spacing
+  margin: ThemeablePropTypes.spacing,
+  statusLabel: PropTypes.string,
+  renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 }
 
 const allowedProps: AllowedPropKeys = [

package/src/Pill/styles.ts

@@ -71,7 +71,9 @@ const generateStyle = (
   return {
     pill: {
       label: 'pill',
-      display: 'block',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
       fontFamily: componentTheme.fontFamily,
       boxSizing: 'border-box',
       padding: componentTheme.padding,
@@ -83,13 +85,29 @@ const generateStyle = (
       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/src/Pill/theme.ts

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

package/tsconfig.build.json

@@ -21,6 +21,9 @@
     { "path": "../ui-test-locator/tsconfig.build.json" },
     { "path": "../ui-test-queries/tsconfig.build.json" },
     { "path": "../ui-test-utils/tsconfig.build.json" },
+    { "path": "../ui-axe-check/tsconfig.build.json" },
+    { "path": "../ui-scripts/tsconfig.build.json" },
+    { "path": "../ui-icons/tsconfig.build.json" },
     { "path": "../ui-themes/tsconfig.build.json" }
   ]
 }