@instructure/ui-pill 11.6.0 → 11.6.1-snapshot-129

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@instructure/ui-pill",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A UI component to communicate concise status.",
   "author": "Instructure, Inc. Engineering and Product Design",
-  "module": "./es/index.js",
-  "main": "./lib/index.js",
-  "types": "./types/index.d.ts",
+  "module": "./es/Pill/11_5/index.js",
+  "main": "./lib/Pill/11_5/index.js",
+  "types": "./types/Pill/11_5/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/instructure/instructure-ui.git"
@@ -15,25 +15,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-tooltip": "11.6.0",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/ui-truncate-text": "11.6.0",
-    "@instructure/ui-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-tooltip": "11.6.1-snapshot-129",
+    "@instructure/ui-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "11.6.1-snapshot-129",
+    "@instructure/ui-truncate-text": "11.6.1-snapshot-129"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-axe-check": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0",
-    "@instructure/ui-icons": "11.6.0",
-    "@instructure/ui-scripts": "11.6.0",
-    "@instructure/ui-themes": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-icons": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129",
+    "@instructure/ui-scripts": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -43,17 +43,39 @@
   },
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./es/index.js",
-      "require": "./lib/index.js",
-      "default": "./es/index.js"
-    },
     "./lib/*": "./lib/*",
     "./es/*": "./es/*",
     "./types/*": "./types/*",
     "./package.json": "./package.json",
-    "./src/*": "./src/*"
+    "./src/*": "./src/*",
+    ".": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_6": {
+      "src": "./src/exports/a.ts",
+      "types": "./types/exports/a.d.ts",
+      "import": "./es/exports/a.js",
+      "require": "./lib/exports/a.js",
+      "default": "./es/exports/a.js"
+    },
+    "./v11_7": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    },
+    "./latest": {
+      "src": "./src/exports/b.ts",
+      "types": "./types/exports/b.d.ts",
+      "import": "./es/exports/b.js",
+      "require": "./lib/exports/b.js",
+      "default": "./es/exports/b.js"
+    }
   },
   "scripts": {
     "lint": "ui-scripts lint",

package/src/Pill/{index.tsx → v1/index.tsx}

@@ -24,12 +24,12 @@
 
 import { Component } from 'react'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import { passthroughProps } from '@instructure/ui-react-utils'
-import { Tooltip } from '@instructure/ui-tooltip'
-import type { TooltipRenderChildrenArgs } from '@instructure/ui-tooltip'
+import { Tooltip } from '@instructure/ui-tooltip/v11_6'
+import type { TooltipRenderChildrenArgs } from '@instructure/ui-tooltip/v11_6'
 
-import { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

package/src/Pill/v2/README.md

@@ -0,0 +1,80 @@
+---
+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. 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
+---
+type: example
+---
+<div>
+  <Pill
+    margin="x-small"
+  >
+    Excused
+  </Pill>
+  <Pill
+    statusLabel="Status"
+    color="info"
+    margin="x-small"
+  >
+    Draft
+  </Pill>
+  <Pill
+    statusLabel="Status"
+    renderIcon={<CheckInstUIIcon size="sm" />}
+    color="success"
+    margin="x-small"
+  >
+    Checked In
+  </Pill>
+  <Pill
+    renderIcon={<Clock4InstUIIcon size="sm" />}
+    color="warning"
+    margin="x-small"
+  >
+    Late
+  </Pill>
+  <Pill
+    renderIcon={<MailInstUIIcon size="sm" />}
+    color="error"
+    margin="x-small"
+  >
+    Notification
+  </Pill>
+</div>
+```
+
+The component has a `max-width`, set by its theme. Any overflowing text will be handled via ellipses.
+
+> **DEPRECATED** Please do not make Pills that have overflowing text, it's an a11y anti-pattern. The issue is if text overflows it cannot be read by keyboard-only users. We could make the Pill focusable, but that would be an anti-pattern too because only elements that are interactive should be focusable (and just displaying a tooltip is not a real interaction)
+
+```js
+---
+type: example
+---
+<Pill>
+  Supercalifragilisticexpialidocious bear
+</Pill>
+```
+
+### Guidelines
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="no" title="Don't">
+    <Figure.Item>Use more than 2 words for the main text</Figure.Item>
+    <Figure.Item>Use more than 2 words for the statusLabel</Figure.Item>
+    <Figure.Item>Use for dismissible items (use a <Link href="/#Tag">Tag</Link> instead)</Figure.Item>
+    <Figure.Item>Use for counts (use a <Link href="/#Badge">Badge</Link> instead)</Figure.Item>
+    <Figure.Item>Put actions next to the text</Figure.Item>
+  </Figure>
+</Guidelines>
+```

package/src/Pill/v2/index.tsx

@@ -0,0 +1,183 @@
+/*
+ * 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 { Component } from 'react'
+
+import { View } from '@instructure/ui-view/latest'
+import { passthroughProps } from '@instructure/ui-react-utils'
+import { Tooltip } from '@instructure/ui-tooltip/latest'
+import type { TooltipRenderChildrenArgs } from '@instructure/ui-tooltip/latest'
+
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+
+import type { PillProps, PillState } from './props'
+import { allowedProps } from './props'
+
+/**
+---
+category: components
+---
+**/
+
+@withStyle(generateStyle)
+class Pill extends Component<PillProps, PillState> {
+  static readonly componentId = 'Pill'
+
+  static allowedProps = allowedProps
+
+  static defaultProps = {
+    color: 'primary'
+  }
+
+  ref: Element | null = null
+
+  ellipsisRef: HTMLElement | null = null
+
+  constructor(props: PillProps) {
+    super(props)
+
+    this.state = {
+      truncated: false
+    }
+  }
+
+  componentDidMount() {
+    this.setTruncation()
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  setTruncation() {
+    if (this.ellipsisRef) {
+      this.setState({
+        truncated: this.ellipsisRef.offsetWidth < this.ellipsisRef.scrollWidth
+      })
+    }
+  }
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  renderPill(
+    focused?: TooltipRenderChildrenArgs['focused'],
+    getTriggerProps?: TooltipRenderChildrenArgs['getTriggerProps']
+  ) {
+    const {
+      margin,
+      children,
+      color,
+      as,
+      elementRef,
+      styles,
+      makeStyles,
+      statusLabel,
+      renderIcon,
+      ...props
+    } = this.props
+
+    const filteredProps = passthroughProps(props)
+
+    const containerProps =
+      typeof getTriggerProps === 'function'
+        ? getTriggerProps(filteredProps)
+        : filteredProps
+
+    const refProp = this.state.truncated ? {} : { elementRef: this.handleRef }
+    return (
+      <View
+        {...containerProps}
+        as={as}
+        {...refProp}
+        margin={margin}
+        padding="0"
+        maxWidth={styles?.maxWidth as string}
+        background="transparent"
+        borderRadius="pill"
+        borderWidth="0"
+        display="inline-block"
+        position="relative"
+        withFocusOutline={focused}
+        focusColor="info"
+        data-cid="Pill"
+      >
+        <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>
+    )
+  }
+
+  render() {
+    if (this.state.truncated) {
+      return (
+        <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)
+          }}
+        </Tooltip>
+      )
+    } else {
+      return this.renderPill()
+    }
+  }
+}
+
+export default Pill
+export { Pill }
+export type { PillProps }

package/src/Pill/v2/props.ts

@@ -0,0 +1,85 @@
+/*
+ * 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 type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type {
+  AsElementType,
+  PillTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+
+type PillOwnProps = {
+  as?: AsElementType
+  color?: 'primary' | 'success' | 'info' | 'warning' | 'error'
+  /**
+   * Provides a reference to the underlying HTML element
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  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
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type PillProps = PillOwnProps &
+  WithStyleProps<PillTheme, PillStyle> &
+  OtherHTMLAttributes<PillOwnProps>
+
+type PillStyle = ComponentStyle<
+  'pill' | 'text' | 'maxWidth' | 'status' | 'icon'
+>
+const allowedProps: AllowedPropKeys = [
+  'as',
+  'children',
+  'color',
+  'elementRef',
+  'margin'
+]
+
+type PillState = {
+  truncated: boolean
+}
+
+export type { PillProps, PillStyle, PillState }
+export { allowedProps }

package/src/Pill/v2/styles.ts

@@ -0,0 +1,110 @@
+/*
+ * 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 type { NewComponentTypes } from '@instructure/ui-themes'
+import type { PillProps, PillStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['Pill'],
+  props: PillProps
+): PillStyle => {
+  const { color } = props
+
+  const pillColorVariants = {
+    primary: {
+      color: componentTheme.baseTextColor,
+      borderColor: componentTheme.baseBorderColor
+    },
+    success: {
+      color: componentTheme.successTextColor,
+      borderColor: componentTheme.successBorderColor
+    },
+    info: {
+      color: componentTheme.infoTextColor,
+      borderColor: componentTheme.infoBorderColor
+    },
+    warning: {
+      color: componentTheme.warningTextColor,
+      borderColor: componentTheme.warningBorderColor
+    },
+    error: {
+      color: componentTheme.errorTextColor,
+      borderColor: componentTheme.errorBorderColor
+    }
+  }
+
+  return {
+    pill: {
+      label: 'pill',
+      display: 'flex',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      padding: `0 ${componentTheme.paddingHorizontal}`,
+      background: componentTheme.backgroundColor,
+      borderWidth: componentTheme.borderWidth,
+      borderStyle: componentTheme.borderStyle,
+      borderRadius: componentTheme.borderRadius,
+      fontFamily: componentTheme.fontFamily,
+      height: componentTheme.height,
+      lineHeight: componentTheme.lineHeight,
+      ...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',
+      maxWidth: componentTheme.maxWidth,
+      fontSize: componentTheme.textFontSize,
+      fontWeight: componentTheme.textFontWeight,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    maxWidth: componentTheme.maxWidth
+  }
+}
+
+export default generateStyle

package/src/exports/a.ts

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+export { Pill } from '../Pill/v1'
+export type { PillProps } from '../Pill/v1/props'

package/src/exports/b.ts

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+export { Pill } from '../Pill/v2'
+export type { PillProps } from '../Pill/v2/props'