@instructure/ui-options 8.20.1-snapshot.5 → 8.21.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.21.0](https://github.com/instructure/instructure-ui/compare/v8.20.0...v8.21.0) (2022-03-30)
+
+**Note:** Version bump only for package @instructure/ui-options
+
 # [8.20.0](https://github.com/instructure/instructure-ui/compare/v8.19.0...v8.20.0) (2022-03-22)
 
 ### Features

package/es/Options/index.js

@@ -114,6 +114,18 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
     });
   }
 
+  get ariaLabelledby() {
+    if (this.props.renderLabel) {
+      return this._labelId;
+    }
+
+    if (this.props['aria-labelledby']) {
+      return this.props['aria-labelledby'];
+    }
+
+    return void 0;
+  }
+
   render() {
     const passthroughProps = View.omitViewProps(omitProps(this.props, Options.allowedProps), Options);
     const _this$props4 = this.props,
@@ -135,7 +147,7 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
       margin: "none",
       padding: "none",
       background: "primary",
-      "aria-labelledby": renderLabel ? this._labelId : this.props['aria-labelledby'] ? this.props['aria-labelledby'] : void 0
+      "aria-labelledby": this.ariaLabelledby
     }), this.renderChildren()));
   }
 

package/es/Options/theme.js

@@ -21,18 +21,16 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const optionsThemeKeys = ['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.
  * @return {Object} The final theme object with the overrides and component variables
  */
-
 const generateComponentTheme = theme => {
   const colors = theme.colors,
         typography = theme.typography,
-        spacing = theme.spacing; // TODO: if updated, update optionsThemeKeys array too
-
+        spacing = theme.spacing;
   const componentVariables = {
     labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
@@ -44,5 +42,5 @@ const generateComponentTheme = theme => {
   };
 };
 
-export { generateComponentTheme as optionsThemeGenerator, optionsThemeKeys };
+export { generateComponentTheme as optionsThemeGenerator };
 export default generateComponentTheme;

package/es/index.js

@@ -22,6 +22,6 @@
  * SOFTWARE.
  */
 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';

package/lib/Options/index.js

@@ -109,6 +109,18 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
     });
   }
 
+  get ariaLabelledby() {
+    if (this.props.renderLabel) {
+      return this._labelId;
+    }
+
+    if (this.props['aria-labelledby']) {
+      return this.props['aria-labelledby'];
+    }
+
+    return void 0;
+  }
+
   render() {
     const passthroughProps = _uiView.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Options.allowedProps), Options);
 
@@ -131,7 +143,7 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
       margin: "none",
       padding: "none",
       background: "primary",
-      "aria-labelledby": renderLabel ? this._labelId : this.props['aria-labelledby'] ? this.props['aria-labelledby'] : void 0
+      "aria-labelledby": this.ariaLabelledby
     }), this.renderChildren()));
   }
 

package/lib/Options/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.optionsThemeKeys = exports.optionsThemeGenerator = exports.default = void 0;
+exports.optionsThemeGenerator = exports.default = void 0;
 
 /*
  * The MIT License (MIT)
@@ -28,20 +28,16 @@ exports.optionsThemeKeys = exports.optionsThemeGenerator = exports.default = voi
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-const optionsThemeKeys = ['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.
  * @return {Object} The final theme object with the overrides and component variables
  */
-
-exports.optionsThemeKeys = optionsThemeKeys;
-
 const generateComponentTheme = theme => {
   const colors = theme.colors,
         typography = theme.typography,
-        spacing = theme.spacing; // TODO: if updated, update optionsThemeKeys array too
-
+        spacing = theme.spacing;
   const componentVariables = {
     labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
     background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,

package/lib/index.js

@@ -27,12 +27,6 @@ Object.defineProperty(exports, "optionsThemeGenerator", {
     return _theme.optionsThemeGenerator;
   }
 });
-Object.defineProperty(exports, "optionsThemeKeys", {
-  enumerable: true,
-  get: function () {
-    return _theme.optionsThemeKeys;
-  }
-});
 
 var _Options = require("./Options");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "8.20.1-snapshot.5+b20e944b1",
+  "version": "8.21.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.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-color-utils": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-test-locator": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-test-utils": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-themes": "8.20.1-snapshot.5+b20e944b1"
+    "@instructure/ui-babel-preset": "8.21.0",
+    "@instructure/ui-color-utils": "8.21.0",
+    "@instructure/ui-test-locator": "8.21.0",
+    "@instructure/ui-test-utils": "8.21.0",
+    "@instructure/ui-themes": "8.21.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/shared-types": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-icons": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-prop-types": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-react-utils": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-testable": "8.20.1-snapshot.5+b20e944b1",
-    "@instructure/ui-view": "8.20.1-snapshot.5+b20e944b1",
+    "@instructure/emotion": "8.21.0",
+    "@instructure/shared-types": "8.21.0",
+    "@instructure/ui-icons": "8.21.0",
+    "@instructure/ui-prop-types": "8.21.0",
+    "@instructure/ui-react-utils": "8.21.0",
+    "@instructure/ui-testable": "8.21.0",
+    "@instructure/ui-view": "8.21.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -46,6 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "b20e944b13616f430d7b27eb61ccdb3eb3c87fcf"
+  "sideEffects": false
 }

package/src/Options/index.tsx

@@ -140,6 +140,18 @@ class Options extends Component<OptionsProps> {
     })
   }
 
+  get ariaLabelledby() {
+    if (this.props.renderLabel) {
+      return this._labelId
+    }
+
+    if (this.props['aria-labelledby']) {
+      return this.props['aria-labelledby']
+    }
+
+    return undefined
+  }
+
   render() {
     const passthroughProps = View.omitViewProps(
       omitProps(this.props, Options.allowedProps),
@@ -161,13 +173,7 @@ class Options extends Component<OptionsProps> {
           margin="none"
           padding="none"
           background="primary"
-          aria-labelledby={
-            renderLabel
-              ? this._labelId
-              : this.props['aria-labelledby']
-              ? this.props['aria-labelledby']
-              : undefined
-          }
+          aria-labelledby={this.ariaLabelledby}
         >
           {this.renderChildren()}
         </View>

package/src/Options/props.ts

@@ -52,6 +52,7 @@ type OptionsOwnProps = {
    * Content to render as a label. Mostly for when the component is nested
    */
   renderLabel?: React.ReactNode | (() => React.ReactNode)
+
   //TODO children has to be typed better
   //e.g.: ChildrenPropTypes.oneOf(['Options', 'Item', 'Separator']))
   children?: React.ReactNode
@@ -63,7 +64,8 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type OptionsProps = OptionsOwnProps &
   WithStyleProps<OptionsTheme, OptionsStyle> &
-  OtherHTMLAttributes<OptionsOwnProps> & WithDeterministicIdProps
+  OtherHTMLAttributes<OptionsOwnProps> &
+  WithDeterministicIdProps
 
 type OptionsStyle = ComponentStyle<'options' | 'list' | 'label'>
 

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'