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

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>