@instructure/ui-options 8.14.1-snapshot.53 → 8.14.1-snapshot.68

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

@@ -26,14 +26,40 @@ export default {
   maxExamplesPerPage: 50,
   propValues: {
     renderAfterLabel: [null, IconArrowOpenEndSolid],
-    renderBeforeLabel: [null, IconCheckSolid]
+    renderBeforeLabel: [null, IconCheckSolid],
+    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 => {
     return {
       renderAfterLabel: props.renderAfterLabel,
       renderBeforeLabel: props.renderBeforeLabel,
       children: 'Lorem ipsum dolor sit amet',
-      role: 'none'
+      role: 'none',
+      descriptionRole: 'note'
     };
+  },
+  getExampleProps: () => {
+    return {
+      width: '400px'
+    };
+  },
+  filter: props => {
+    if (props.description) {
+      if (props.beforeLabelContentVAlign !== 'center' && (!props.renderBeforeLabel || props.renderAfterLabel)) {
+        return true;
+      }
+
+      if (props.afterLabelContentVAlign !== 'center' && (!props.renderAfterLabel || props.renderBeforeLabel)) {
+        return true;
+      }
+    }
+
+    if (!props.description) {
+      if (props.afterLabelContentVAlign !== 'center' || props.beforeLabelContentVAlign !== 'center') {
+        return true;
+      }
+    }
+
+    return false;
   }
 };

package/es/Options/Item/index.js

@@ -82,11 +82,15 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
           as = _this$props4.as,
           role = _this$props4.role,
           styles = _this$props4.styles,
+          description = _this$props4.description,
+          descriptionRole = _this$props4.descriptionRole,
           renderBeforeLabel = _this$props4.renderBeforeLabel,
           renderAfterLabel = _this$props4.renderAfterLabel,
           children = _this$props4.children;
     const ElementType = getElementType(Item, this.props, () => as);
     const passthroughProps = omitProps(this.props, Item.allowedProps);
+    const childrenContent = callRenderProp(children);
+    const descriptionContent = callRenderProp(description);
     return jsx(ElementType, {
       role: "none",
       css: styles === null || styles === void 0 ? void 0 : styles.item,
@@ -96,16 +100,19 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
     }, jsx("span", Object.assign({}, passthroughProps, {
       css: styles === null || styles === void 0 ? void 0 : styles.container,
       role: role
-    }), children), 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));
+    }), childrenContent, descriptionContent && jsx("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.description,
+      role: descriptionRole
+    }, 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));
   }
 
 }, _class2.displayName = "Item", _class2.componentId = 'Options.Item', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   as: 'span',
   variant: 'default',
   role: 'listitem',
-  renderBeforeLabel: null,
-  renderAfterLabel: null,
-  children: null
+  descriptionRole: 'note',
+  beforeLabelContentVAlign: 'center',
+  afterLabelContentVAlign: 'center'
 }, _temp)) || _class) || _class);
 export default Item;
 export { Item };

package/es/Options/Item/props.js

@@ -28,7 +28,11 @@ const propTypes = {
   role: PropTypes.string,
   renderBeforeLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   renderAfterLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  beforeLabelContentVAlign: PropTypes.oneOf(['start', 'center', 'end']),
+  afterLabelContentVAlign: PropTypes.oneOf(['start', 'center', 'end']),
+  description: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  descriptionRole: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
-const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'children'];
+const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'children'];
 export { propTypes, allowedProps };

package/es/Options/Item/styles.js

@@ -37,8 +37,11 @@ const generateStyle = (componentTheme, props) => {
   const variant = props.variant,
         children = props.children,
         hasContentBeforeLabel = props.renderBeforeLabel,
-        hasContentAfterLabel = props.renderAfterLabel;
-  const containsList = matchComponentTypes(children, ['Options']);
+        hasContentAfterLabel = props.renderAfterLabel,
+        beforeLabelContentVAlign = props.beforeLabelContentVAlign,
+        afterLabelContentVAlign = props.afterLabelContentVAlign;
+  const containsList = matchComponentTypes(children, ['Options']); // used for label and description too
+
   const variantVariants = {
     highlighted: {
       background: componentTheme.highlightedBackground,
@@ -54,6 +57,28 @@ const generateStyle = (componentTheme, props) => {
     },
     default: {}
   };
+
+  const getContentVAlign = type => {
+    const vAlign = type === 'before' ? beforeLabelContentVAlign : afterLabelContentVAlign;
+    const vOffset = type === 'before' ? componentTheme.beforeLabelContentVOffset : componentTheme.afterLabelContentVOffset;
+    return {
+      start: {
+        alignItems: 'flex-start',
+        paddingBlockStart: vOffset
+      },
+      center: {
+        alignItems: 'center',
+        paddingBlockStart: vOffset,
+        paddingBlockEnd: vOffset
+      },
+      end: {
+        alignItems: 'flex-end',
+        paddingBlockEnd: vOffset
+      }
+    }[vAlign];
+  };
+
+  const transition = 'background 200ms';
   return {
     item: {
       label: 'optionItem',
@@ -67,7 +92,7 @@ const generateStyle = (componentTheme, props) => {
       lineHeight: componentTheme.lineHeight,
       outline: 'none',
       position: 'relative',
-      transition: 'background 200ms',
+      transition,
       userSelect: 'none',
       ...variantVariants[variant],
       ...(containsList && {
@@ -107,9 +132,9 @@ const generateStyle = (componentTheme, props) => {
     },
     content: {
       label: 'optionItem__content',
-      alignItems: 'center',
       display: 'flex',
       height: '100%',
+      boxSizing: 'border-box',
       pointerEvents: 'none',
       position: 'absolute',
       top: '0'
@@ -117,12 +142,27 @@ const generateStyle = (componentTheme, props) => {
     contentBefore: {
       label: 'optionItem__content--before',
       insetInlineEnd: 'auto',
-      insetInlineStart: componentTheme.iconPadding
+      insetInlineStart: componentTheme.iconPadding,
+      ...getContentVAlign('before')
     },
     contentAfter: {
       label: 'optionItem__content--after',
       insetInlineEnd: componentTheme.iconPadding,
-      insetInlineStart: 'auto'
+      insetInlineStart: 'auto',
+      ...getContentVAlign('after')
+    },
+    description: {
+      label: 'optionItem__description',
+      display: 'block',
+      transition,
+      paddingBlockStart: componentTheme.descriptionPaddingStart,
+      fontWeight: componentTheme.descriptionFontWeight,
+      fontSize: componentTheme.descriptionFontSize,
+      lineHeight: componentTheme.descriptionLineHeight,
+      color: componentTheme.descriptionColor,
+      ...variantVariants[variant],
+      background: 'none' // needed to clear variant background
+
     }
   };
 };

package/es/Options/Item/theme.js

@@ -51,7 +51,14 @@ 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.medium,
+    beforeLabelContentVOffset: '0.625rem',
+    afterLabelContentVOffset: '0.625rem',
+    descriptionFontSize: typography.fontSizeSmall,
+    descriptionFontWeight: typography.fontWeightNormal,
+    descriptionLineHeight: typography.lineHeight,
+    descriptionPaddingStart: '0.25em',
+    descriptionColor: colors.textDark
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/es/Options/index.js

@@ -25,7 +25,7 @@ var _dec, _dec2, _class, _class2, _temp;
  */
 
 /** @jsx jsx */
-import { Component, Children } from 'react';
+import React, { Component, Children } from 'react';
 import { omitProps, matchComponentTypes, callRenderProp, safeCloneElement } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { uid } from '@instructure/uid';
@@ -36,13 +36,13 @@ import generateComponentTheme from './theme';
 import { Item } from './Item';
 import { Separator } from './Separator';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 let Options = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Options extends Component {
   constructor() {
     super(...arguments);
@@ -89,13 +89,13 @@ let Options = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 =
     }, callRenderProp(renderLabel));
   }
 
-  renderSubList(children) {
+  renderSubList(subOptions) {
     const styles = this.props.styles;
     return jsx(Item, {
       as: this.childAs,
       role: "presentation",
       css: styles === null || styles === void 0 ? void 0 : styles.label
-    }, children);
+    }, subOptions);
   }
 
   renderChildren() {

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

@@ -34,15 +34,41 @@ var _default = {
   maxExamplesPerPage: 50,
   propValues: {
     renderAfterLabel: [null, _uiIcons.IconArrowOpenEndSolid],
-    renderBeforeLabel: [null, _uiIcons.IconCheckSolid]
+    renderBeforeLabel: [null, _uiIcons.IconCheckSolid],
+    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 => {
     return {
       renderAfterLabel: props.renderAfterLabel,
       renderBeforeLabel: props.renderBeforeLabel,
       children: 'Lorem ipsum dolor sit amet',
-      role: 'none'
+      role: 'none',
+      descriptionRole: 'note'
     };
+  },
+  getExampleProps: () => {
+    return {
+      width: '400px'
+    };
+  },
+  filter: props => {
+    if (props.description) {
+      if (props.beforeLabelContentVAlign !== 'center' && (!props.renderBeforeLabel || props.renderAfterLabel)) {
+        return true;
+      }
+
+      if (props.afterLabelContentVAlign !== 'center' && (!props.renderAfterLabel || props.renderBeforeLabel)) {
+        return true;
+      }
+    }
+
+    if (!props.description) {
+      if (props.afterLabelContentVAlign !== 'center' || props.beforeLabelContentVAlign !== 'center') {
+        return true;
+      }
+    }
+
+    return false;
   }
 };
 exports.default = _default;

package/lib/Options/Item/index.js

@@ -72,11 +72,15 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
           as = _this$props4.as,
           role = _this$props4.role,
           styles = _this$props4.styles,
+          description = _this$props4.description,
+          descriptionRole = _this$props4.descriptionRole,
           renderBeforeLabel = _this$props4.renderBeforeLabel,
           renderAfterLabel = _this$props4.renderAfterLabel,
           children = _this$props4.children;
     const ElementType = (0, _uiReactUtils.getElementType)(Item, this.props, () => as);
     const passthroughProps = (0, _uiReactUtils.omitProps)(this.props, Item.allowedProps);
+    const childrenContent = (0, _uiReactUtils.callRenderProp)(children);
+    const descriptionContent = (0, _uiReactUtils.callRenderProp)(description);
     return (0, _emotion.jsx)(ElementType, {
       role: "none",
       css: styles === null || styles === void 0 ? void 0 : styles.item,
@@ -86,16 +90,19 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     }, (0, _emotion.jsx)("span", Object.assign({}, passthroughProps, {
       css: styles === null || styles === void 0 ? void 0 : styles.container,
       role: role
-    }), children), 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));
+    }), childrenContent, descriptionContent && (0, _emotion.jsx)("span", {
+      css: styles === null || styles === void 0 ? void 0 : styles.description,
+      role: descriptionRole
+    }, 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));
   }
 
 }, _class2.displayName = "Item", _class2.componentId = 'Options.Item', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   as: 'span',
   variant: 'default',
   role: 'listitem',
-  renderBeforeLabel: null,
-  renderAfterLabel: null,
-  children: null
+  descriptionRole: 'note',
+  beforeLabelContentVAlign: 'center',
+  afterLabelContentVAlign: 'center'
 }, _temp)) || _class) || _class);
 exports.Item = Item;
 var _default = Item;

package/lib/Options/Item/props.js

@@ -38,8 +38,12 @@ const propTypes = {
   role: _propTypes.default.string,
   renderBeforeLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   renderAfterLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  beforeLabelContentVAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
+  afterLabelContentVAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
+  description: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  descriptionRole: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'children'];
+const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'children'];
 exports.allowedProps = allowedProps;

package/lib/Options/Item/styles.js

@@ -45,8 +45,11 @@ const generateStyle = (componentTheme, props) => {
   const variant = props.variant,
         children = props.children,
         hasContentBeforeLabel = props.renderBeforeLabel,
-        hasContentAfterLabel = props.renderAfterLabel;
-  const containsList = (0, _uiReactUtils.matchComponentTypes)(children, ['Options']);
+        hasContentAfterLabel = props.renderAfterLabel,
+        beforeLabelContentVAlign = props.beforeLabelContentVAlign,
+        afterLabelContentVAlign = props.afterLabelContentVAlign;
+  const containsList = (0, _uiReactUtils.matchComponentTypes)(children, ['Options']); // used for label and description too
+
   const variantVariants = {
     highlighted: {
       background: componentTheme.highlightedBackground,
@@ -62,6 +65,28 @@ const generateStyle = (componentTheme, props) => {
     },
     default: {}
   };
+
+  const getContentVAlign = type => {
+    const vAlign = type === 'before' ? beforeLabelContentVAlign : afterLabelContentVAlign;
+    const vOffset = type === 'before' ? componentTheme.beforeLabelContentVOffset : componentTheme.afterLabelContentVOffset;
+    return {
+      start: {
+        alignItems: 'flex-start',
+        paddingBlockStart: vOffset
+      },
+      center: {
+        alignItems: 'center',
+        paddingBlockStart: vOffset,
+        paddingBlockEnd: vOffset
+      },
+      end: {
+        alignItems: 'flex-end',
+        paddingBlockEnd: vOffset
+      }
+    }[vAlign];
+  };
+
+  const transition = 'background 200ms';
   return {
     item: {
       label: 'optionItem',
@@ -75,7 +100,7 @@ const generateStyle = (componentTheme, props) => {
       lineHeight: componentTheme.lineHeight,
       outline: 'none',
       position: 'relative',
-      transition: 'background 200ms',
+      transition,
       userSelect: 'none',
       ...variantVariants[variant],
       ...(containsList && {
@@ -115,9 +140,9 @@ const generateStyle = (componentTheme, props) => {
     },
     content: {
       label: 'optionItem__content',
-      alignItems: 'center',
       display: 'flex',
       height: '100%',
+      boxSizing: 'border-box',
       pointerEvents: 'none',
       position: 'absolute',
       top: '0'
@@ -125,12 +150,27 @@ const generateStyle = (componentTheme, props) => {
     contentBefore: {
       label: 'optionItem__content--before',
       insetInlineEnd: 'auto',
-      insetInlineStart: componentTheme.iconPadding
+      insetInlineStart: componentTheme.iconPadding,
+      ...getContentVAlign('before')
     },
     contentAfter: {
       label: 'optionItem__content--after',
       insetInlineEnd: componentTheme.iconPadding,
-      insetInlineStart: 'auto'
+      insetInlineStart: 'auto',
+      ...getContentVAlign('after')
+    },
+    description: {
+      label: 'optionItem__description',
+      display: 'block',
+      transition,
+      paddingBlockStart: componentTheme.descriptionPaddingStart,
+      fontWeight: componentTheme.descriptionFontWeight,
+      fontSize: componentTheme.descriptionFontSize,
+      lineHeight: componentTheme.descriptionLineHeight,
+      color: componentTheme.descriptionColor,
+      ...variantVariants[variant],
+      background: 'none' // needed to clear variant background
+
     }
   };
 };

package/lib/Options/Item/theme.js

@@ -58,7 +58,14 @@ 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.medium,
+    beforeLabelContentVOffset: '0.625rem',
+    afterLabelContentVOffset: '0.625rem',
+    descriptionFontSize: typography.fontSizeSmall,
+    descriptionFontWeight: typography.fontWeightNormal,
+    descriptionLineHeight: typography.lineHeight,
+    descriptionPaddingStart: '0.25em',
+    descriptionColor: colors.textDark
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/Options/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Options = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _uiReactUtils = require("@instructure/ui-react-utils");
 
@@ -83,13 +85,13 @@ let Options = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
     }, (0, _uiReactUtils.callRenderProp)(renderLabel));
   }
 
-  renderSubList(children) {
+  renderSubList(subOptions) {
     const styles = this.props.styles;
     return (0, _emotion.jsx)(_Item.Item, {
       as: this.childAs,
       role: "presentation",
       css: styles === null || styles === void 0 ? void 0 : styles.label
-    }, children);
+    }, subOptions);
   }
 
   renderChildren() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "8.14.1-snapshot.53+b89b1f0a9",
+  "version": "8.14.1-snapshot.68+a2cfa0cd8",
   "description": "A view-only component for composing interactive lists and menus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,22 +24,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.14.1-snapshot.53+b89b1f0a9",
-    "@instructure/ui-color-utils": "8.14.1-snapshot.53+b89b1f0a9",
-    "@instructure/ui-test-locator": "8.14.1-snapshot.53+b89b1f0a9",
-    "@instructure/ui-test-utils": "8.14.1-snapshot.53+b89b1f0a9",
-    "@instructure/ui-themes": "8.14.1-snapshot.53+b89b1f0a9"
+    "@instructure/ui-babel-preset": "8.14.1-snapshot.68+a2cfa0cd8",
+    "@instructure/ui-color-utils": "8.14.1-snapshot.68+a2cfa0cd8",
+    "@instructure/ui-test-locator": "8.14.1-snapshot.68+a2cfa0cd8",
+    "@instructure/ui-test-utils": "8.14.1-snapshot.68+a2cfa0cd8",
+    "@instructure/ui-themes": "8.14.1-snapshot.68+a2cfa0cd8"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.14.1-snapshot.53+b89b1f0a9",
-    "@instructure/shared-types": "8.14.1-snapshot.53+b89b1f0a9",
-    "@instructure/ui-icons": "8.14.1-snapshot.53+b89b1f0a9",
-    "@instructure/ui-prop-types": "8.14.1-snapshot.53+b89b1f0a9",
-    "@instructure/ui-react-utils": "8.14.1-snapshot.53+b89b1f0a9",
-    "@instructure/ui-testable": "8.14.1-snapshot.53+b89b1f0a9",
-    "@instructure/ui-view": "8.14.1-snapshot.53+b89b1f0a9",
-    "@instructure/uid": "8.14.1-snapshot.53+b89b1f0a9",
+    "@instructure/emotion": "8.14.1-snapshot.68+a2cfa0cd8",
+    "@instructure/shared-types": "8.14.1-snapshot.68+a2cfa0cd8",
+    "@instructure/ui-icons": "8.14.1-snapshot.68+a2cfa0cd8",
+    "@instructure/ui-prop-types": "8.14.1-snapshot.68+a2cfa0cd8",
+    "@instructure/ui-react-utils": "8.14.1-snapshot.68+a2cfa0cd8",
+    "@instructure/ui-testable": "8.14.1-snapshot.68+a2cfa0cd8",
+    "@instructure/ui-view": "8.14.1-snapshot.68+a2cfa0cd8",
+    "@instructure/uid": "8.14.1-snapshot.68+a2cfa0cd8",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "b89b1f0a97fcaa3de36d67962261dff130a23daa"
+  "gitHead": "a2cfa0cd8bf43d6072f1b352bbd6e43542081be8"
 }

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

@@ -23,20 +23,59 @@
  */
 
 import { IconCheckSolid, IconArrowOpenEndSolid } from '@instructure/ui-icons'
-import { OptionsItemProps } from '../props'
+import type { StoryConfig } from '@instructure/ui-test-utils'
+import type { OptionsItemProps } from '../props'
 
 export default {
   maxExamplesPerPage: 50,
   propValues: {
     renderAfterLabel: [null, IconArrowOpenEndSolid],
-    renderBeforeLabel: [null, IconCheckSolid]
+    renderBeforeLabel: [null, IconCheckSolid],
+    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: OptionsItemProps) => {
+  getComponentProps: (props) => {
     return {
       renderAfterLabel: props.renderAfterLabel,
       renderBeforeLabel: props.renderBeforeLabel,
       children: 'Lorem ipsum dolor sit amet',
-      role: 'none'
+      role: 'none',
+      descriptionRole: 'note'
     }
+  },
+  getExampleProps: () => {
+    return {
+      width: '400px'
+    }
+  },
+  filter: (props) => {
+    if (props.description) {
+      if (
+        props.beforeLabelContentVAlign !== 'center' &&
+        (!props.renderBeforeLabel || props.renderAfterLabel)
+      ) {
+        return true
+      }
+
+      if (
+        props.afterLabelContentVAlign !== 'center' &&
+        (!props.renderAfterLabel || props.renderBeforeLabel)
+      ) {
+        return true
+      }
+    }
+
+    if (!props.description) {
+      if (
+        props.afterLabelContentVAlign !== 'center' ||
+        props.beforeLabelContentVAlign !== 'center'
+      ) {
+        return true
+      }
+    }
+
+    return false
   }
-}
+} as StoryConfig<OptionsItemProps>

package/src/Options/Item/index.tsx

@@ -58,9 +58,9 @@ class Item extends Component<OptionsItemProps> {
     as: 'span',
     variant: 'default',
     role: 'listitem',
-    renderBeforeLabel: null,
-    renderAfterLabel: null,
-    children: null
+    descriptionRole: 'note',
+    beforeLabelContentVAlign: 'center',
+    afterLabelContentVAlign: 'center'
   } as const
 
   ref: Element | null = null
@@ -104,6 +104,8 @@ class Item extends Component<OptionsItemProps> {
       as,
       role,
       styles,
+      description,
+      descriptionRole,
       renderBeforeLabel,
       renderAfterLabel,
       children
@@ -112,6 +114,9 @@ class Item extends Component<OptionsItemProps> {
     const ElementType = getElementType(Item, this.props, () => as!)
     const passthroughProps = omitProps(this.props, Item.allowedProps)
 
+    const childrenContent = callRenderProp(children)
+    const descriptionContent = callRenderProp(description)
+
     return (
       <ElementType
         role="none"
@@ -122,7 +127,12 @@ class Item extends Component<OptionsItemProps> {
         }}
       >
         <span {...passthroughProps} css={styles?.container} role={role}>
-          {children}
+          {childrenContent}
+          {descriptionContent && (
+            <span css={styles?.description} role={descriptionRole}>
+              {descriptionContent}
+            </span>
+          )}
         </span>
         {renderBeforeLabel &&
           this.renderContent(renderBeforeLabel, styles?.contentBefore)}