@instructure/ui-options 8.19.1-snapshot.8 → 8.20.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.20.0](https://github.com/instructure/instructure-ui/compare/v8.19.0...v8.20.0) (2022-03-22)
+
+### Features
+
+- **ui-options:** add `href` prop to Options.Item ([49bf28c](https://github.com/instructure/instructure-ui/commit/49bf28c637f395f7ae5d23c0f676d83a15c2ee43))
+- **ui-options:** modify default nested Options padding to have no extra padding ([bfc4f7c](https://github.com/instructure/instructure-ui/commit/bfc4f7cb094d91d25b58a87a24a473363c90796b))
+
 # [8.19.0](https://github.com/instructure/instructure-ui/compare/v8.18.0...v8.19.0) (2022-03-16)
 
 ### Bug Fixes

package/es/Options/Item/__examples__/Item.examples.js

@@ -27,6 +27,7 @@ export default {
   propValues: {
     renderAfterLabel: [null, IconArrowOpenEndSolid],
     renderBeforeLabel: [null, IconCheckSolid],
+    href: [void 0, '/hello'],
     description: [null, 'Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa. Integer sit amet ante vitae lectus gravida pulvinar.']
   },
   getComponentProps: props => {
@@ -60,6 +61,10 @@ export default {
       }
     }
 
+    if (props.href && (props.beforeLabelContentVAlign !== 'center' || props.afterLabelContentVAlign !== 'center' || props.description)) {
+      return true;
+    }
+
     return false;
   }
 };

package/es/Options/Item/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2, _temp;
+var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 /*
  * The MIT License (MIT)
@@ -26,7 +26,7 @@ var _dec, _dec2, _class, _class2, _temp;
 
 /** @jsx jsx */
 import { Component } from 'react';
-import { omitProps, getElementType, callRenderProp } from '@instructure/ui-react-utils';
+import { omitProps, getElementType, callRenderProp, withDeterministicId } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyles from './styles';
@@ -40,10 +40,12 @@ id: Options.Item
 @tsProps
 **/
 
-let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Item extends Component {
-  constructor() {
-    super(...arguments);
+let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Item extends Component {
+  constructor(props) {
+    super(props);
     this.ref = null;
+    this._descriptionId = void 0;
+    this._descriptionId = props.deterministicId('OptionsItem-description');
   }
 
   componentDidMount() {
@@ -80,6 +82,7 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
   render() {
     const _this$props4 = this.props,
           as = _this$props4.as,
+          href = _this$props4.href,
           role = _this$props4.role,
           styles = _this$props4.styles,
           description = _this$props4.description,
@@ -89,6 +92,7 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
           elementRef = _this$props4.elementRef,
           children = _this$props4.children;
     const ElementType = getElementType(Item, this.props, () => as);
+    const InnerElementType = href ? 'a' : 'span';
     const passthroughProps = omitProps(this.props, Item.allowedProps);
     const childrenContent = callRenderProp(children);
     const descriptionContent = callRenderProp(description);
@@ -102,12 +106,15 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
           elementRef(element);
         }
       }
-    }, jsx("span", Object.assign({}, passthroughProps, {
+    }, jsx(InnerElementType, Object.assign({}, passthroughProps, {
       css: styles === null || styles === void 0 ? void 0 : styles.container,
-      role: role
+      role: href ? void 0 : role,
+      href: href,
+      "aria-describedby": this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0)
     }), childrenContent, descriptionContent && jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.description,
-      role: descriptionRole
+      role: descriptionRole,
+      id: this._descriptionId
     }, descriptionContent)), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles === null || styles === void 0 ? void 0 : styles.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles === null || styles === void 0 ? void 0 : styles.contentAfter));
   }
 
@@ -118,6 +125,6 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
   descriptionRole: 'note',
   beforeLabelContentVAlign: 'center',
   afterLabelContentVAlign: 'center'
-}, _temp)) || _class) || _class);
+}, _temp)) || _class) || _class) || _class);
 export default Item;
 export { Item };

package/es/Options/Item/props.js

@@ -24,7 +24,7 @@
 import PropTypes from 'prop-types';
 const propTypes = {
   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]),
@@ -32,8 +32,9 @@ const propTypes = {
   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])
 };
-const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'elementRef', 'children'];
+const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'href', 'elementRef', 'children'];
 export { propTypes, allowedProps };

package/es/Options/Item/styles.js

@@ -55,6 +55,12 @@ const generateStyle = (componentTheme, props) => {
       cursor: 'not-allowed',
       opacity: 0.5
     },
+    ['highlighted-disabled']: {
+      background: componentTheme.highlightedBackground,
+      color: componentTheme.highlightedLabelColor,
+      cursor: 'not-allowed',
+      opacity: 0.5
+    },
     default: {}
   };
 
@@ -78,6 +84,10 @@ const generateStyle = (componentTheme, props) => {
     }[vAlign];
   };
 
+  const linkStyles = {
+    textDecoration: 'none',
+    color: 'currentColor'
+  };
   const transition = 'background 200ms';
   return {
     item: {
@@ -129,7 +139,14 @@ const generateStyle = (componentTheme, props) => {
       ...(hasContentBeforeLabel && 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/es/Options/Item/theme.js

@@ -51,7 +51,7 @@ const generateComponentTheme = theme => {
     selectedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
     padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
     iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    nestedPadding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
+    nestedPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
     beforeLabelContentVOffset: '0.625rem',
     afterLabelContentVOffset: '0.625rem',
     descriptionFontSize: typography.fontSizeSmall,

package/es/Options/index.js

@@ -106,7 +106,7 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
 
       if (matchComponentTypes(child, ['Item', 'Separator'])) {
         return safeCloneElement(child, {
-          as: this.childAs
+          as: this.childAs || child.props.as
         });
       }
 
@@ -135,7 +135,7 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
       margin: "none",
       padding: "none",
       background: "primary",
-      "aria-labelledby": renderLabel ? this._labelId : void 0
+      "aria-labelledby": renderLabel ? this._labelId : this.props['aria-labelledby'] ? this.props['aria-labelledby'] : void 0
     }), this.renderChildren()));
   }
 

package/lib/Options/Item/__examples__/Item.examples.js

@@ -35,6 +35,7 @@ var _default = {
   propValues: {
     renderAfterLabel: [null, _uiIcons.IconArrowOpenEndSolid],
     renderBeforeLabel: [null, _uiIcons.IconCheckSolid],
+    href: [void 0, '/hello'],
     description: [null, 'Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa. Integer sit amet ante vitae lectus gravida pulvinar.']
   },
   getComponentProps: props => {
@@ -68,6 +69,10 @@ var _default = {
       }
     }
 
+    if (props.href && (props.beforeLabelContentVAlign !== 'center' || props.afterLabelContentVAlign !== 'center' || props.description)) {
+      return true;
+    }
+
     return false;
   }
 };

package/lib/Options/Item/index.js

@@ -21,7 +21,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class, _class2, _temp;
+var _dec, _dec2, _dec3, _class, _class2, _temp;
 
 /**
 ---
@@ -30,10 +30,12 @@ id: Options.Item
 ---
 @tsProps
 **/
-let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Item extends _react.Component {
-  constructor() {
-    super(...arguments);
+let Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Item extends _react.Component {
+  constructor(props) {
+    super(props);
     this.ref = null;
+    this._descriptionId = void 0;
+    this._descriptionId = props.deterministicId('OptionsItem-description');
   }
 
   componentDidMount() {
@@ -70,6 +72,7 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   render() {
     const _this$props4 = this.props,
           as = _this$props4.as,
+          href = _this$props4.href,
           role = _this$props4.role,
           styles = _this$props4.styles,
           description = _this$props4.description,
@@ -79,6 +82,7 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
           elementRef = _this$props4.elementRef,
           children = _this$props4.children;
     const ElementType = (0, _uiReactUtils.getElementType)(Item, this.props, () => as);
+    const InnerElementType = href ? 'a' : 'span';
     const passthroughProps = (0, _uiReactUtils.omitProps)(this.props, Item.allowedProps);
     const childrenContent = (0, _uiReactUtils.callRenderProp)(children);
     const descriptionContent = (0, _uiReactUtils.callRenderProp)(description);
@@ -92,12 +96,15 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
           elementRef(element);
         }
       }
-    }, (0, _emotion.jsx)("span", Object.assign({}, passthroughProps, {
+    }, (0, _emotion.jsx)(InnerElementType, Object.assign({}, passthroughProps, {
       css: styles === null || styles === void 0 ? void 0 : styles.container,
-      role: role
+      role: href ? void 0 : role,
+      href: href,
+      "aria-describedby": this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0)
     }), childrenContent, descriptionContent && (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.description,
-      role: descriptionRole
+      role: descriptionRole,
+      id: this._descriptionId
     }, descriptionContent)), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles === null || styles === void 0 ? void 0 : styles.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles === null || styles === void 0 ? void 0 : styles.contentAfter));
   }
 
@@ -108,7 +115,7 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   descriptionRole: 'note',
   beforeLabelContentVAlign: 'center',
   afterLabelContentVAlign: 'center'
-}, _temp)) || _class) || _class);
+}, _temp)) || _class) || _class) || _class);
 exports.Item = Item;
 var _default = Item;
 exports.default = _default;

package/lib/Options/Item/props.js

@@ -34,7 +34,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  */
 const propTypes = {
   as: _propTypes.default.elementType,
-  variant: _propTypes.default.oneOf(['default', 'highlighted', 'selected', 'disabled']),
+  variant: _propTypes.default.oneOf(['default', 'highlighted', 'selected', 'disabled', 'highlighted-disabled']),
   role: _propTypes.default.string,
   renderBeforeLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   renderAfterLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
@@ -42,9 +42,10 @@ const propTypes = {
   afterLabelContentVAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
   description: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   descriptionRole: _propTypes.default.string,
+  href: _propTypes.default.string,
   elementRef: _propTypes.default.func,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'elementRef', 'children'];
+const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'href', 'elementRef', 'children'];
 exports.allowedProps = allowedProps;

package/lib/Options/Item/styles.js

@@ -63,6 +63,12 @@ const generateStyle = (componentTheme, props) => {
       cursor: 'not-allowed',
       opacity: 0.5
     },
+    ['highlighted-disabled']: {
+      background: componentTheme.highlightedBackground,
+      color: componentTheme.highlightedLabelColor,
+      cursor: 'not-allowed',
+      opacity: 0.5
+    },
     default: {}
   };
 
@@ -86,6 +92,10 @@ const generateStyle = (componentTheme, props) => {
     }[vAlign];
   };
 
+  const linkStyles = {
+    textDecoration: 'none',
+    color: 'currentColor'
+  };
   const transition = 'background 200ms';
   return {
     item: {
@@ -137,7 +147,14 @@ const generateStyle = (componentTheme, props) => {
       ...(hasContentBeforeLabel && 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/lib/Options/Item/theme.js

@@ -58,7 +58,7 @@ const generateComponentTheme = theme => {
     selectedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
     padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
     iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    nestedPadding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
+    nestedPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
     beforeLabelContentVOffset: '0.625rem',
     afterLabelContentVOffset: '0.625rem',
     descriptionFontSize: typography.fontSizeSmall,

package/lib/Options/index.js

@@ -101,7 +101,7 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
 
       if ((0, _uiReactUtils.matchComponentTypes)(child, ['Item', 'Separator'])) {
         return (0, _uiReactUtils.safeCloneElement)(child, {
-          as: this.childAs
+          as: this.childAs || child.props.as
         });
       }
 
@@ -131,7 +131,7 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
       margin: "none",
       padding: "none",
       background: "primary",
-      "aria-labelledby": renderLabel ? this._labelId : void 0
+      "aria-labelledby": renderLabel ? this._labelId : this.props['aria-labelledby'] ? this.props['aria-labelledby'] : void 0
     }), this.renderChildren()));
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "8.19.1-snapshot.8+8648faa3b",
+  "version": "8.20.0",
   "description": "A view-only component for composing interactive lists and menus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,21 +23,21 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-color-utils": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-test-locator": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-test-utils": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-themes": "8.19.1-snapshot.8+8648faa3b"
+    "@instructure/ui-babel-preset": "8.20.0",
+    "@instructure/ui-color-utils": "8.20.0",
+    "@instructure/ui-test-locator": "8.20.0",
+    "@instructure/ui-test-utils": "8.20.0",
+    "@instructure/ui-themes": "8.20.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/shared-types": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-icons": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-prop-types": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-react-utils": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-testable": "8.19.1-snapshot.8+8648faa3b",
-    "@instructure/ui-view": "8.19.1-snapshot.8+8648faa3b",
+    "@instructure/emotion": "8.20.0",
+    "@instructure/shared-types": "8.20.0",
+    "@instructure/ui-icons": "8.20.0",
+    "@instructure/ui-prop-types": "8.20.0",
+    "@instructure/ui-react-utils": "8.20.0",
+    "@instructure/ui-testable": "8.20.0",
+    "@instructure/ui-view": "8.20.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -46,6 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "8648faa3b9f006a729a4d13195dd9c28e23d1335"
+  "sideEffects": false
 }

package/src/Options/Item/__examples__/Item.examples.ts

@@ -31,6 +31,7 @@ export default {
   propValues: {
     renderAfterLabel: [null, IconArrowOpenEndSolid],
     renderBeforeLabel: [null, IconCheckSolid],
+    href: [undefined, '/hello'],
     description: [
       null,
       'Curabitur fringilla, urna ut efficitur molestie, nibh lacus tincidunt elit, ut tempor ipsum nunc sit amet massa. Integer sit amet ante vitae lectus gravida pulvinar.'
@@ -76,6 +77,15 @@ export default {
       }
     }
 
+    if (
+      props.href &&
+      (props.beforeLabelContentVAlign !== 'center' ||
+        props.afterLabelContentVAlign !== 'center' ||
+        props.description)
+    ) {
+      return true
+    }
+
     return false
   }
 } as StoryConfig<OptionsItemProps>

package/src/Options/Item/index.tsx

@@ -28,7 +28,8 @@ import { Component } from 'react'
 import {
   omitProps,
   getElementType,
-  callRenderProp
+  callRenderProp,
+  withDeterministicId
 } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 
@@ -46,6 +47,7 @@ id: Options.Item
 ---
 @tsProps
 **/
+@withDeterministicId()
 @withStyle(generateStyles, generateComponentTheme)
 @testable()
 class Item extends Component<OptionsItemProps> {
@@ -65,6 +67,14 @@ class Item extends Component<OptionsItemProps> {
 
   ref: Element | null = null
 
+  private readonly _descriptionId: string
+
+  constructor(props: OptionsItemProps) {
+    super(props)
+
+    this._descriptionId = props.deterministicId!('OptionsItem-description')
+  }
+
   componentDidMount() {
     this.props.makeStyles?.()
   }
@@ -102,6 +112,7 @@ class Item extends Component<OptionsItemProps> {
   render() {
     const {
       as,
+      href,
       role,
       styles,
       description,
@@ -113,6 +124,9 @@ class Item extends Component<OptionsItemProps> {
     } = this.props
 
     const ElementType = getElementType(Item, this.props, () => as!)
+
+    const InnerElementType = href ? 'a' : 'span'
+
     const passthroughProps = omitProps(this.props, Item.allowedProps)
 
     const childrenContent = callRenderProp(children)
@@ -131,14 +145,27 @@ class Item extends Component<OptionsItemProps> {
           }
         }}
       >
-        <span {...passthroughProps} css={styles?.container} role={role}>
+        <InnerElementType
+          {...passthroughProps}
+          css={styles?.container}
+          role={href ? undefined : role}
+          href={href}
+          aria-describedby={
+            this.props['aria-describedby'] ||
+            (descriptionContent ? this._descriptionId : undefined)
+          }
+        >
           {childrenContent}
           {descriptionContent && (
-            <span css={styles?.description} role={descriptionRole}>
+            <span
+              css={styles?.description}
+              role={descriptionRole}
+              id={this._descriptionId}
+            >
               {descriptionContent}
             </span>
           )}
-        </span>
+        </InnerElementType>
         {renderBeforeLabel &&
           this.renderContent(renderBeforeLabel, styles?.contentBefore)}
         {renderAfterLabel &&

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',