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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-list",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "Components for displaying vertical or horizontal lists.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,20 +15,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/shared-types": "11.6.0",
-    "@instructure/emotion": "11.6.0",
-    "@instructure/ui-react-utils": "11.6.0",
-    "@instructure/ui-view": "11.6.0",
-    "@instructure/console": "11.6.0"
+    "@instructure/console": "11.6.1-snapshot-129",
+    "@instructure/emotion": "11.6.1-snapshot-129",
+    "@instructure/ui-react-utils": "11.6.1-snapshot-129",
+    "@instructure/shared-types": "11.6.1-snapshot-129",
+    "@instructure/ui-view": "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-axe-check": "11.6.0",
-    "@instructure/ui-babel-preset": "11.6.0",
-    "@instructure/ui-themes": "11.6.0",
-    "@instructure/ui-color-utils": "11.6.0"
+    "@instructure/ui-axe-check": "11.6.1-snapshot-129",
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129",
+    "@instructure/ui-themes": "11.6.1-snapshot-129",
+    "@instructure/ui-color-utils": "11.6.1-snapshot-129"
   },
   "peerDependencies": {
     "react": ">=18 <=19"
@@ -38,17 +38,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/InlineList/{InlineListItem → v1/InlineListItem}/index.tsx

@@ -24,10 +24,10 @@
 
 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 { withStyle } from '@instructure/emotion'
+import { withStyleLegacy as withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'

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

@@ -23,7 +23,7 @@
  */
 import { Children, Component, ReactElement } from 'react'
 
-import { View } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view/v11_6'
 import { passthroughProps, safeCloneElement } from '@instructure/ui-react-utils'
 
 import { InlineListItem } from './InlineListItem'

package/src/InlineList/v2/InlineListItem/index.tsx

@@ -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 { Component } from 'react'
+
+import { View } from '@instructure/ui-view/latest'
+import { passthroughProps } from '@instructure/ui-react-utils'
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import { allowedProps } from './props'
+import type { InlineListItemProps } from './props'
+
+/**
+---
+parent: InlineList
+id: InlineList.Item
+---
+**/
+@withStyle(generateStyle)
+class InlineListItem extends Component<InlineListItemProps> {
+  static readonly componentId = 'InlineList.Item'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    padding: 'none',
+    spacing: 'none',
+    delimiter: 'none',
+    size: 'medium',
+    lastPlaceholder: false
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.()
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.()
+  }
+
+  render() {
+    const {
+      delimiter,
+      size,
+      margin,
+      padding,
+      elementRef,
+      children,
+      spacing,
+      styles,
+      lastPlaceholder,
+      ...rest
+    } = this.props
+
+    return (
+      <View
+        {...passthroughProps(rest)}
+        css={styles?.inlineListItem}
+        as="li"
+        margin={margin}
+        padding={padding}
+        display="inline-block"
+        maxWidth="100%"
+        elementRef={this.handleRef}
+        data-cid="InlineListItem"
+      >
+        {children}
+        {!lastPlaceholder && (
+          <span css={styles?.delimiter} aria-hidden="true" />
+        )}
+      </View>
+    )
+  }
+}
+
+export default InlineListItem
+export { InlineListItem }

package/src/InlineList/v2/InlineListItem/props.ts

@@ -0,0 +1,99 @@
+/*
+ * 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 { PropsWithChildren } from 'react'
+
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type {
+  InlineListItemTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+
+type InlineListItemOwnProps = {
+  /**
+   * Inherits delimiter from the parent InlineList component
+   */
+  delimiter?: 'none' | 'pipe' | 'slash' | 'arrow'
+  size?: 'small' | 'medium' | 'large'
+  /**
+   * 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
+  /**
+   * Valid values are `0`, `none`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `padding="small x-large large"`.
+   */
+  padding?: Spacing
+  /**
+   * Inherits itemSpacing from the parent InlineList component
+   */
+  spacing?:
+    | 'none'
+    | 'xxx-small'
+    | 'xx-small'
+    | 'x-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'x-large'
+    | 'xx-large'
+  /**
+   * provides a reference to the underlying html root element
+   */
+  elementRef?: (element: Element | null) => void
+  /**
+   * Used internally to mark the last item as a placeholder
+   */
+  lastPlaceholder?: boolean
+} & PropsWithChildren<unknown> // <unknown> is needed for React 17 compatibility
+
+type PropKeys = keyof InlineListItemOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type InlineListItemProps = InlineListItemOwnProps &
+  WithStyleProps<InlineListItemTheme, InlineListItemStyle> &
+  OtherHTMLAttributes<InlineListItemOwnProps>
+
+type InlineListItemStyle = ComponentStyle<'inlineListItem' | 'delimiter'>
+
+const allowedProps: AllowedPropKeys = [
+  'children',
+  'delimiter',
+  'size',
+  'margin',
+  'padding',
+  'spacing',
+  'elementRef'
+]
+
+export type { InlineListItemProps, InlineListItemStyle }
+export { allowedProps }

package/src/InlineList/v2/InlineListItem/styles.ts

@@ -0,0 +1,142 @@
+/*
+ * 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 { logError as error } from '@instructure/console'
+
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { InlineListItemProps, InlineListItemStyle } 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['InlineListItem'],
+  props: InlineListItemProps
+): InlineListItemStyle => {
+  const { size, delimiter, spacing } = props
+
+  const withDelimiter = delimiter !== 'none'
+  const withSpacing = spacing !== 'none'
+
+  error(
+    !(withDelimiter && withSpacing),
+    `[InlineList] \`itemSpacing\` has no effect inside Lists with the \`delimiter\` prop set to anything other than \`none\`.`
+  )
+
+  const sizeVariants = {
+    small: { fontSize: componentTheme.fontSizeSmall },
+    medium: { fontSize: componentTheme.fontSizeMedium },
+    large: { fontSize: componentTheme.fontSizeLarge }
+  }
+
+  const spacingVariants = {
+    'xxx-small': {
+      marginInlineStart: componentTheme.spacingXXXSmall,
+      marginInlineEnd: componentTheme.spacingXXXSmall
+    },
+    'xx-small': {
+      marginInlineStart: componentTheme.spacingXXSmall,
+      marginInlineEnd: componentTheme.spacingXXSmall
+    },
+    'x-small': {
+      marginInlineStart: componentTheme.spacingXSmall,
+      marginInlineEnd: componentTheme.spacingXSmall
+    },
+    small: {
+      marginInlineStart: componentTheme.spacingSmall,
+      marginInlineEnd: componentTheme.spacingSmall
+    },
+    medium: {
+      marginInlineStart: componentTheme.spacingMedium,
+      marginInlineEnd: componentTheme.spacingMedium
+    },
+    large: {
+      marginInlineStart: componentTheme.spacingLarge,
+      marginInlineEnd: componentTheme.spacingLarge
+    },
+    'x-large': {
+      marginInlineStart: componentTheme.spacingXLarge,
+      marginInlineEnd: componentTheme.spacingXLarge
+    },
+    'xx-large': {
+      marginInlineStart: componentTheme.spacingXXLarge,
+      marginInlineEnd: componentTheme.spacingXXLarge
+    },
+    none: {}
+  }
+
+  const delimiterVariants = {
+    none: {
+      marginInlineStart: componentTheme.noneSpacing,
+      marginInlineEnd: componentTheme.noneSpacing
+    },
+    pipe: {
+      marginInlineStart: componentTheme.pipeSpacing,
+      marginInlineEnd: componentTheme.pipeSpacing,
+      '&::after': { content: '"\\007C"' }
+    },
+    slash: {
+      marginInlineStart: componentTheme.slashSpacing,
+      marginInlineEnd: componentTheme.slashSpacing,
+      '&::after': { content: '"\\002F"' }
+    },
+    arrow: {
+      marginInlineStart: componentTheme.arrowSpacing,
+      marginInlineEnd: componentTheme.arrowSpacing,
+      '&::after': { content: '"\\003E"' }
+    }
+  }
+
+  return {
+    inlineListItem: {
+      label: 'inlineListItem',
+      fontWeight: componentTheme.fontWeight,
+      fontFamily: componentTheme.fontFamily,
+      verticalAlign: 'middle',
+      boxSizing: 'border-box',
+      lineHeight: componentTheme.lineHeight,
+      color: componentTheme.color,
+      ...(withSpacing && !withDelimiter && spacingVariants[spacing!]),
+      ...sizeVariants[size!],
+      '&:first-of-type': { marginInlineStart: 0 },
+      '&:last-of-type': { marginInlineEnd: 0 }
+    },
+    delimiter: {
+      label: 'inlineListItem__delimiter',
+      ...delimiterVariants[delimiter!],
+      '[class$=-inlineListItem]:last-of-type > &:last-child::after': {
+        content: 'none'
+      },
+      color: componentTheme.delimiterColor
+    }
+  }
+}
+
+export default generateStyle

package/src/InlineList/v2/README.md

@@ -0,0 +1,146 @@
+---
+describes: InlineList
+---
+
+An `InlineList` component displays the list horizontally.
+
+```javascript
+---
+type: example
+---
+  <InlineList>
+    <InlineList.Item>{lorem.sentence()}</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Submitted</Link></InlineList.Item>
+  </InlineList>
+
+```
+
+### Adding a delimiter
+
+The `delimiter` prop lets you display a separator between Items in the List. The built-in delimiter options include ['none', 'pipe', 'slash', and 'arrow'].
+
+```javascript
+---
+type: example
+---
+<div>
+  <InlineList delimiter="none" margin="large 0">
+    <InlineList.Item>{lorem.sentence()}</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">No Separator</Link></InlineList.Item>
+  </InlineList>
+  <InlineList delimiter="pipe" margin="large 0">
+    <InlineList.Item>{lorem.sentence()}</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Pipe Separator</Link></InlineList.Item>
+  </InlineList>
+  <InlineList delimiter="slash" margin="large 0">
+    <InlineList.Item>{lorem.sentence()}</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Slash Separator</Link></InlineList.Item>
+  </InlineList>
+  <InlineList delimiter="arrow" margin="large 0">
+    <InlineList.Item>{lorem.sentence()}</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Arrow Separator</Link></InlineList.Item>
+  </InlineList>
+</div>
+```
+
+### Sizing
+
+The `size` prop lets you adjust the font-size of the List. The predefined values are aligned with other components that use a 'size' prop for overall consistency within your application. The default is 'medium'.
+
+```javascript
+---
+type: example
+---
+<div>
+  <InlineList size="small" margin="large 0">
+    <InlineList.Item>{lorem.sentence()}</InlineList.Item>
+    <InlineList.Item>Small Size</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Submitted</Link></InlineList.Item>
+  </InlineList>
+  <InlineList margin="large 0">
+    <InlineList.Item>{lorem.sentence()}</InlineList.Item>
+    <InlineList.Item>Medium (default) Size</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Submitted</Link></InlineList.Item>
+  </InlineList>
+  <InlineList size="large" margin="large 0">
+    <InlineList.Item>{lorem.sentence()}</InlineList.Item>
+    <InlineList.Item>Large Size</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Submitted</Link></InlineList.Item>
+  </InlineList>
+</div>
+```
+
+### Adding predefined space between each InlineList.Item
+
+Use the `itemSpacing` prop to add space around your list’s items. To avoid unwanted excess space at the start/end of a List, the first and last InlineList.Item will not receive margin via the `itemSpacing` prop.
+
+> NOTE: itemSpacing has no affect on an InlineList.Item that has the `delimiter` prop set to anything other than **none**.
+
+```javascript
+---
+type: example
+---
+<div>
+  <InlineList itemSpacing="xxx-small">
+    <InlineList.Item>Adding predefined space</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Set to xxx-small</Link></InlineList.Item>
+  </InlineList>
+  <InlineList itemSpacing="xx-small">
+    <InlineList.Item>Adding predefined space</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Set to xx-small</Link></InlineList.Item>
+  </InlineList>
+  <InlineList itemSpacing="x-small">
+    <InlineList.Item>Adding predefined space</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b>  Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Set to x-small</Link></InlineList.Item>
+  </InlineList>
+    <InlineList itemSpacing="small">
+    <InlineList.Item>Adding predefined space</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b>  Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Set to small</Link></InlineList.Item>
+  </InlineList>
+  <InlineList itemSpacing="medium">
+    <InlineList.Item>Adding predefined space</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b>  Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Set to medium</Link></InlineList.Item>
+  </InlineList>
+  <InlineList itemSpacing="large">
+    <InlineList.Item>Adding predefined space</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Set to large</Link></InlineList.Item>
+  </InlineList>
+    <InlineList itemSpacing="x-large">
+    <InlineList.Item>Adding predefined space</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Set to x-large</Link></InlineList.Item>
+  </InlineList>
+  <InlineList itemSpacing="xx-large">
+    <InlineList.Item>Adding predefined space</InlineList.Item>
+    <InlineList.Item>10pts</InlineList.Item>
+    <InlineList.Item><b>Due:</b> Oct 1, 2019</InlineList.Item>
+    <InlineList.Item><Link href="#">Set to xx-large</Link></InlineList.Item>
+  </InlineList>
+</div>
+```