@instructure/ui-options 8.19.1-snapshot.8 → 8.20.1-snapshot.18

package/src/Options/Item/props.ts

@@ -31,18 +31,24 @@ import type {
   OptionsItemTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 
 type ItemProps = {
   children?: React.ReactNode | (() => React.ReactNode)
   /**
-   * Element type to render as
+   * Element type to render as. Will be set to `<a>` if href is provided.
    */
   as?: AsElementType
   /**
    * The style variant of the item
    */
-  variant?: 'default' | 'highlighted' | 'selected' | 'disabled'
+  variant?:
+    | 'default'
+    | 'highlighted'
+    | 'selected'
+    | 'disabled'
+    | 'highlighted-disabled'
   /**
    * The ARIA role of the element
    */
@@ -76,6 +82,10 @@ type OptionsItemOwnProps = ItemProps & {
    * The ARIA role of the description element
    */
   descriptionRole?: string
+  /**
+   * Providing href will render the option as `<a>`.
+   */
+  href?: string
   /**
    * provides a reference to the underlying html root element
    */
@@ -88,6 +98,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type OptionsItemProps = OptionsItemOwnProps &
   WithStyleProps<OptionsItemTheme, OptionsItemStyle> &
+  WithDeterministicIdProps &
   OtherHTMLAttributes<OptionsItemOwnProps>
 
 type OptionsItemStyle = ComponentStyle<
@@ -101,7 +112,13 @@ type OptionsItemStyle = ComponentStyle<
 
 const propTypes: PropValidators<PropKeys> = {
   as: PropTypes.elementType,
-  variant: PropTypes.oneOf(['default', 'highlighted', 'selected', 'disabled']),
+  variant: PropTypes.oneOf([
+    'default',
+    'highlighted',
+    'selected',
+    'disabled',
+    'highlighted-disabled'
+  ]),
   role: PropTypes.string,
   renderBeforeLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderAfterLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
@@ -109,6 +126,7 @@ const propTypes: PropValidators<PropKeys> = {
   afterLabelContentVAlign: PropTypes.oneOf(['start', 'center', 'end']),
   description: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   descriptionRole: PropTypes.string,
+  href: PropTypes.string,
   elementRef: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 }
@@ -123,6 +141,7 @@ const allowedProps: AllowedPropKeys = [
   'afterLabelContentVAlign',
   'description',
   'descriptionRole',
+  'href',
   'elementRef',
   'children'
 ]

package/src/Options/Item/styles.ts

@@ -63,6 +63,12 @@ const generateStyle = (
       color: componentTheme.highlightedLabelColor
     },
     disabled: { cursor: 'not-allowed', opacity: 0.5 },
+    ['highlighted-disabled']: {
+      background: componentTheme.highlightedBackground,
+      color: componentTheme.highlightedLabelColor,
+      cursor: 'not-allowed',
+      opacity: 0.5
+    },
     default: {}
   }
 
@@ -92,6 +98,8 @@ const generateStyle = (
     }[vAlign!]
   }
 
+  const linkStyles = { textDecoration: 'none', color: 'currentColor' }
+
   const transition = 'background 200ms'
 
   return {
@@ -143,7 +151,15 @@ const generateStyle = (
         hasContentAfterLabel && {
           paddingInlineEnd: `calc(${componentTheme.iconPadding} * 2 + 1em)`,
           paddingInlineStart: `calc(${componentTheme.iconPadding} * 2 + 1em)`
-        })
+        }),
+
+      // NOTE: needs separate groups for `:is()` and `:-webkit-any()` because of css selector group validation (see https://www.w3.org/TR/selectors-3/#grouping)
+      '&:is(a)': {
+        '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
+      },
+      '&:-webkit-any(a)': {
+        '&, &:link, &:visited, &:active, &:hover, &:focus': linkStyles
+      }
     },
     content: {
       label: 'optionItem__content',

package/src/Options/Item/theme.ts

@@ -55,7 +55,7 @@ const generateComponentTheme = (theme: Theme): OptionsItemTheme => {
 
     padding: `${spacing?.xSmall} ${spacing?.small}`,
     iconPadding: spacing?.small,
-    nestedPadding: spacing?.medium,
+    nestedPadding: spacing?.small,
 
     beforeLabelContentVOffset: '0.625rem',
     afterLabelContentVOffset: '0.625rem',

package/src/Options/README.md

@@ -24,6 +24,9 @@ example: true
     <Options.Item variant="disabled">
       Disabled option
     </Options.Item>
+    <Options.Item variant="highlighted-disabled">
+      Highlighted disabled option
+    </Options.Item>
   </Options>
 </View>
 ```
@@ -372,3 +375,61 @@ class Example extends React.Component {
 
 render(<Example />)
 ```
+
+Providing a `href` prop will render the option as `<a>` link element.
+
+**WARNING!** Since `Options` is a view-only component, you have to make sure it is accessible, and if set the variant to disabled, disable the links as well!
+
+```js
+---
+render: false
+example: true
+---
+class Example extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      highlighted: -1
+    }
+  }
+
+  handleMouseOver = (index) => {
+    this.setState({ highlighted: index })
+  }
+
+  render() {
+    return (
+      <View display="block" width="300px">
+        <Options onMouseOut={(e) => this.setState({ highlighted: -1 })}>
+          <Options.Item
+            onMouseOver={(e) => this.handleMouseOver(1)}
+            variant={this.state.highlighted === 1 ? 'highlighted' : 'default'}
+            href="/"
+          >
+            Link one
+          </Options.Item>
+          <Options.Item
+            onMouseOver={(e) => this.handleMouseOver(2)}
+            variant={this.state.highlighted === 2 ? 'highlighted' : 'default'}
+            href="/"
+          >
+            Link two
+          </Options.Item>
+          <Options.Item
+            onMouseOver={(e) => this.handleMouseOver(3)}
+            variant={this.state.highlighted === 3 ? 'highlighted' : 'default'}
+            variant="disabled"
+            onClick={(e) => { e.preventDefault() }}
+            href="/"
+          >
+            Link three
+          </Options.Item>
+        </Options>
+      </View>
+    )
+  }
+}
+
+render(<Example />)
+```

package/src/Options/index.tsx

@@ -134,7 +134,7 @@ class Options extends Component<OptionsProps> {
         return this.renderSubList(child)
       }
       if (matchComponentTypes(child, ['Item', 'Separator'])) {
-        return safeCloneElement(child, { as: this.childAs })
+        return safeCloneElement(child, { as: this.childAs || child.props.as })
       }
       return undefined
     })
@@ -161,7 +161,13 @@ class Options extends Component<OptionsProps> {
           margin="none"
           padding="none"
           background="primary"
-          aria-labelledby={renderLabel ? this._labelId : undefined}
+          aria-labelledby={
+            renderLabel
+              ? this._labelId
+              : this.props['aria-labelledby']
+              ? this.props['aria-labelledby']
+              : undefined
+          }
         >
           {this.renderChildren()}
         </View>

package/src/Options/theme.ts

@@ -25,14 +25,6 @@
 import type { Theme } from '@instructure/ui-themes'
 import type { OptionsTheme } from '@instructure/shared-types'
 
-const optionsThemeKeys: (keyof OptionsTheme)[] = [
-  'labelFontWeight',
-  'background',
-  'labelColor',
-  'labelPadding',
-  'nestedLabelPadding'
-]
-
 /**
  * Generates the theme object for the component from the theme and provided additional information
  * @param  {Object} theme The actual theme object.
@@ -41,7 +33,6 @@ const optionsThemeKeys: (keyof OptionsTheme)[] = [
 const generateComponentTheme = (theme: Theme): OptionsTheme => {
   const { colors, typography, spacing } = theme
 
-  // TODO: if updated, update optionsThemeKeys array too
   const componentVariables: OptionsTheme = {
     labelFontWeight: typography?.fontWeightBold,
 
@@ -57,5 +48,5 @@ const generateComponentTheme = (theme: Theme): OptionsTheme => {
   }
 }
 
-export { generateComponentTheme as optionsThemeGenerator, optionsThemeKeys }
+export { generateComponentTheme as optionsThemeGenerator }
 export default generateComponentTheme

package/src/index.ts

@@ -24,7 +24,7 @@
 
 export { Options } from './Options'
 
-export { optionsThemeGenerator, optionsThemeKeys } from './Options/theme'
+export { optionsThemeGenerator } from './Options/theme'
 export { optionsItemThemeGenerator } from './Options/Item/theme'
 export { optionsSeparatorThemeGenerator } from './Options/Separator/theme'