@instructure/ui-radio-input 9.8.1 → 9.9.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.9.0](https://github.com/instructure/instructure-ui/compare/v9.8.1...v9.9.0) (2024-11-12)
+
+
+### Features
+
+* **many:** backport new error messages from v10 ([9003d19](https://github.com/instructure/instructure-ui/commit/9003d19cc66022dfdeecc2e2c8c8d9d2a7300e3f))
+
+
+
+
+
 ## [9.8.1](https://github.com/instructure/instructure-ui/compare/v9.8.0...v9.8.1) (2024-10-28)
 
 **Note:** Version bump only for package @instructure/ui-radio-input

package/es/RadioInputGroup/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _RadioInputGroup;
+var _dec, _dec2, _dec3, _class, _RadioInputGroup;
 /*
  * The MIT License (MIT)
  *
@@ -23,18 +23,23 @@ var _dec, _dec2, _class, _RadioInputGroup;
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import React, { Children, Component } from 'react';
 import { FormFieldGroup } from '@instructure/ui-form-field';
 import { testable } from '@instructure/ui-testable';
 import { matchComponentTypes, safeCloneElement, omitProps, pickProps, withDeterministicId } from '@instructure/ui-react-utils';
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { RadioInput } from '../RadioInput';
+import { jsx, withStyle } from '@instructure/emotion';
+import generateStyle from './styles';
+import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
 /**
 ---
 category: components
 ---
 **/
-let RadioInputGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_class = _dec2(_class = (_RadioInputGroup = class RadioInputGroup extends Component {
+let RadioInputGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_RadioInputGroup = class RadioInputGroup extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -67,6 +72,10 @@ let RadioInputGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_c
   get hasMessages() {
     return !!this.props.messages && this.props.messages.length > 0;
   }
+  get invalid() {
+    var _this$props$messages;
+    return !!((_this$props$messages = this.props.messages) !== null && _this$props$messages !== void 0 && _this$props$messages.find(m => m.type === 'newError' || m.type === 'error'));
+  }
   get value() {
     return typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
   }
@@ -110,11 +119,14 @@ let RadioInputGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_c
     const _this$props2 = this.props,
       variant = _this$props2.variant,
       layout = _this$props2.layout,
-      description = _this$props2.description;
-    return /*#__PURE__*/React.createElement(FormFieldGroup, Object.assign({}, omitProps(this.props, RadioInputGroup.allowedProps), pickProps(this.props, FormFieldGroup.allowedProps), {
-      description: description
-      // TODO: split out toggle variant into its own component
-      ,
+      description = _this$props2.description,
+      isRequired = _this$props2.isRequired,
+      styles = _this$props2.styles;
+    const descriptionWithRequired = hasVisibleChildren(description) ? jsx(React.Fragment, null, description, isRequired && description && jsx("span", {
+      css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.invalidAsterisk : {}
+    }, " *")) : description;
+    return jsx(FormFieldGroup, Object.assign({}, omitProps(this.props, RadioInputGroup.allowedProps), pickProps(this.props, FormFieldGroup.allowedProps), {
+      description: descriptionWithRequired,
       layout: layout === 'columns' && variant === 'toggle' ? 'stacked' : layout // toggles already display in cols
       ,
       vAlign: variant === 'toggle' ? 'middle' : 'top',
@@ -123,7 +135,8 @@ let RadioInputGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_c
       ,
       startAt: variant === 'toggle' ? 'small' : void 0,
       messagesId: this._messagesId,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      role: "radiogroup"
     }), this.renderChildren());
   }
 }, _RadioInputGroup.displayName = "RadioInputGroup", _RadioInputGroup.componentId = 'RadioInputGroup', _RadioInputGroup.allowedProps = allowedProps, _RadioInputGroup.propTypes = propTypes, _RadioInputGroup.defaultProps = {
@@ -132,6 +145,6 @@ let RadioInputGroup = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_c
   size: 'medium',
   layout: 'stacked',
   readOnly: false
-}, _RadioInputGroup)) || _class) || _class);
+}, _RadioInputGroup)) || _class) || _class) || _class);
 export default RadioInputGroup;
 export { RadioInputGroup };

package/es/RadioInputGroup/props.js

@@ -37,7 +37,8 @@ const propTypes = {
   children: PropTypes.node,
   variant: PropTypes.oneOf(['simple', 'toggle']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  layout: PropTypes.oneOf(['stacked', 'columns', 'inline'])
+  layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
+  isRequired: PropTypes.bool
 };
 const allowedProps = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'variant', 'size', 'layout'];
 export { propTypes, allowedProps };

package/es/RadioInputGroup/styles.js

@@ -0,0 +1,41 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = componentTheme => {
+  const invalidAsteriskColor = componentTheme.invalidAsteriskColor;
+  return {
+    invalidAsterisk: {
+      color: invalidAsteriskColor
+    }
+  };
+};
+export default generateStyle;

package/es/RadioInputGroup/theme.js

@@ -0,0 +1,39 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * 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;
+  const componentVariables = {
+    invalidAsteriskColor: colors === null || colors === void 0 ? void 0 : colors.textDanger
+  };
+  return {
+    ...componentVariables
+  };
+};
+export default generateComponentTheme;

package/lib/RadioInputGroup/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,9 +14,13 @@ var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElemen
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
+var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 var _RadioInput = require("../RadioInput");
+var _emotion = require("@instructure/emotion");
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
-var _dec, _dec2, _class, _RadioInputGroup;
+var _dec, _dec2, _dec3, _class, _RadioInputGroup;
 /*
  * The MIT License (MIT)
  *
@@ -39,12 +44,13 @@ var _dec, _dec2, _class, _RadioInputGroup;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+/** @jsx jsx */
 /**
 ---
 category: components
 ---
 **/
-let RadioInputGroup = exports.RadioInputGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_RadioInputGroup = class RadioInputGroup extends _react.Component {
+let RadioInputGroup = exports.RadioInputGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_RadioInputGroup = class RadioInputGroup extends _react.Component {
   constructor(props) {
     super(props);
     this.ref = null;
@@ -77,6 +83,10 @@ let RadioInputGroup = exports.RadioInputGroup = (_dec = (0, _withDeterministicId
   get hasMessages() {
     return !!this.props.messages && this.props.messages.length > 0;
   }
+  get invalid() {
+    var _this$props$messages;
+    return !!((_this$props$messages = this.props.messages) !== null && _this$props$messages !== void 0 && _this$props$messages.find(m => m.type === 'newError' || m.type === 'error'));
+  }
   get value() {
     return typeof this.props.value === 'undefined' ? this.state.value : this.props.value;
   }
@@ -120,11 +130,14 @@ let RadioInputGroup = exports.RadioInputGroup = (_dec = (0, _withDeterministicId
     const _this$props2 = this.props,
       variant = _this$props2.variant,
       layout = _this$props2.layout,
-      description = _this$props2.description;
-    return /*#__PURE__*/_react.default.createElement(_FormFieldGroup.FormFieldGroup, Object.assign({}, (0, _omitProps.omitProps)(this.props, RadioInputGroup.allowedProps), (0, _pickProps.pickProps)(this.props, _FormFieldGroup.FormFieldGroup.allowedProps), {
-      description: description
-      // TODO: split out toggle variant into its own component
-      ,
+      description = _this$props2.description,
+      isRequired = _this$props2.isRequired,
+      styles = _this$props2.styles;
+    const descriptionWithRequired = (0, _hasVisibleChildren.hasVisibleChildren)(description) ? (0, _emotion.jsx)(_react.default.Fragment, null, description, isRequired && description && (0, _emotion.jsx)("span", {
+      css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.invalidAsterisk : {}
+    }, " *")) : description;
+    return (0, _emotion.jsx)(_FormFieldGroup.FormFieldGroup, Object.assign({}, (0, _omitProps.omitProps)(this.props, RadioInputGroup.allowedProps), (0, _pickProps.pickProps)(this.props, _FormFieldGroup.FormFieldGroup.allowedProps), {
+      description: descriptionWithRequired,
       layout: layout === 'columns' && variant === 'toggle' ? 'stacked' : layout // toggles already display in cols
       ,
       vAlign: variant === 'toggle' ? 'middle' : 'top',
@@ -133,7 +146,8 @@ let RadioInputGroup = exports.RadioInputGroup = (_dec = (0, _withDeterministicId
       ,
       startAt: variant === 'toggle' ? 'small' : void 0,
       messagesId: this._messagesId,
-      elementRef: this.handleRef
+      elementRef: this.handleRef,
+      role: "radiogroup"
     }), this.renderChildren());
   }
 }, _RadioInputGroup.displayName = "RadioInputGroup", _RadioInputGroup.componentId = 'RadioInputGroup', _RadioInputGroup.allowedProps = _props.allowedProps, _RadioInputGroup.propTypes = _props.propTypes, _RadioInputGroup.defaultProps = {
@@ -142,5 +156,5 @@ let RadioInputGroup = exports.RadioInputGroup = (_dec = (0, _withDeterministicId
   size: 'medium',
   layout: 'stacked',
   readOnly: false
-}, _RadioInputGroup)) || _class) || _class);
+}, _RadioInputGroup)) || _class) || _class) || _class);
 var _default = exports.default = RadioInputGroup;

package/lib/RadioInputGroup/props.js

@@ -44,6 +44,7 @@ const propTypes = exports.propTypes = {
   children: _propTypes.default.node,
   variant: _propTypes.default.oneOf(['simple', 'toggle']),
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
-  layout: _propTypes.default.oneOf(['stacked', 'columns', 'inline'])
+  layout: _propTypes.default.oneOf(['stacked', 'columns', 'inline']),
+  isRequired: _propTypes.default.bool
 };
 const allowedProps = exports.allowedProps = ['name', 'description', 'defaultValue', 'value', 'onChange', 'disabled', 'readOnly', 'messages', 'children', 'variant', 'size', 'layout'];

package/lib/RadioInputGroup/styles.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = componentTheme => {
+  const invalidAsteriskColor = componentTheme.invalidAsteriskColor;
+  return {
+    invalidAsterisk: {
+      color: invalidAsteriskColor
+    }
+  };
+};
+var _default = exports.default = generateStyle;

package/lib/RadioInputGroup/theme.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * 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;
+  const componentVariables = {
+    invalidAsteriskColor: colors === null || colors === void 0 ? void 0 : colors.textDanger
+  };
+  return {
+    ...componentVariables
+  };
+};
+var _default = exports.default = generateComponentTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-radio-input",
-  "version": "9.8.1",
+  "version": "9.9.0",
   "description": "A styled HTML input type='radio' element",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,21 +24,22 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "9.8.1",
-    "@instructure/shared-types": "9.8.1",
-    "@instructure/ui-dom-utils": "9.8.1",
-    "@instructure/ui-form-field": "9.8.1",
-    "@instructure/ui-prop-types": "9.8.1",
-    "@instructure/ui-react-utils": "9.8.1",
-    "@instructure/ui-testable": "9.8.1",
+    "@instructure/emotion": "9.9.0",
+    "@instructure/shared-types": "9.9.0",
+    "@instructure/ui-a11y-utils": "9.9.0",
+    "@instructure/ui-dom-utils": "9.9.0",
+    "@instructure/ui-form-field": "9.9.0",
+    "@instructure/ui-prop-types": "9.9.0",
+    "@instructure/ui-react-utils": "9.9.0",
+    "@instructure/ui-testable": "9.9.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.8.1",
-    "@instructure/ui-color-utils": "9.8.1",
-    "@instructure/ui-test-locator": "9.8.1",
-    "@instructure/ui-test-utils": "9.8.1",
-    "@instructure/ui-themes": "9.8.1"
+    "@instructure/ui-babel-preset": "9.9.0",
+    "@instructure/ui-color-utils": "9.9.0",
+    "@instructure/ui-test-locator": "9.9.0",
+    "@instructure/ui-test-utils": "9.9.0",
+    "@instructure/ui-themes": "9.9.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/RadioInputGroup/index.tsx

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 
+/** @jsx jsx */
 import React, { Children, Component } from 'react'
 
 import { FormFieldGroup } from '@instructure/ui-form-field'
@@ -33,10 +34,16 @@ import {
   pickProps,
   withDeterministicId
 } from '@instructure/ui-react-utils'
+import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 
 import { RadioInput } from '../RadioInput'
 import type { RadioInputProps } from '../RadioInput/props'
 
+import { jsx, withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
 import type { RadioInputGroupProps, RadioInputGroupState } from './props'
 import { allowedProps, propTypes } from './props'
 
@@ -48,6 +55,7 @@ category: components
 ---
 **/
 @withDeterministicId()
+@withStyle(generateStyle, generateComponentTheme)
 @testable()
 class RadioInputGroup extends Component<
   RadioInputGroupProps,
@@ -90,6 +98,12 @@ class RadioInputGroup extends Component<
     return !!this.props.messages && this.props.messages.length > 0
   }
 
+  get invalid() {
+    return !!this.props.messages?.find(
+      (m) => m.type === 'newError' || m.type === 'error'
+    )
+  }
+
   handleChange: RadioInputProps['onChange'] = (e) => {
     const value = e.target.value
 
@@ -145,14 +159,24 @@ class RadioInputGroup extends Component<
   }
 
   render() {
-    const { variant, layout, description } = this.props
+    const { variant, layout, description, isRequired, styles } = this.props
+
+    const descriptionWithRequired = hasVisibleChildren(description) ? (
+      <React.Fragment>
+        {description}
+        {isRequired && description && (
+          <span css={this.invalid ? styles?.invalidAsterisk : {}}> *</span>
+        )}
+      </React.Fragment>
+    ) : (
+      description
+    )
 
     return (
       <FormFieldGroup
         {...omitProps(this.props, RadioInputGroup.allowedProps)}
         {...pickProps(this.props, FormFieldGroup.allowedProps)}
-        description={description}
-        // TODO: split out toggle variant into its own component
+        description={descriptionWithRequired}
         layout={
           layout === 'columns' && variant === 'toggle' ? 'stacked' : layout
         } // toggles already display in cols
@@ -162,6 +186,7 @@ class RadioInputGroup extends Component<
         startAt={variant === 'toggle' ? 'small' : undefined}
         messagesId={this._messagesId}
         elementRef={this.handleRef}
+        role="radiogroup"
       >
         {this.renderChildren()}
       </FormFieldGroup>

package/src/RadioInputGroup/props.ts

@@ -28,14 +28,23 @@ import PropTypes from 'prop-types'
 import { controllable } from '@instructure/ui-prop-types'
 import { FormPropTypes } from '@instructure/ui-form-field'
 
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { FormMessage } from '@instructure/ui-form-field'
 import type {
   OtherHTMLAttributes,
-  PropValidators
+  PropValidators,
+  RadioInputGroupTheme
 } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
 type RadioInputGroupOwnProps = {
+  /**
+   * This prop sets the
+   * [same low level HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#defining_a_radio_group)
+   *
+   * **Must be unique across the DOM** otherwise groups will interfere with
+   * each other
+   */
   name: string
 
   description: React.ReactNode
@@ -48,7 +57,7 @@ type RadioInputGroupOwnProps = {
   /**
    * the selected value (must be accompanied by an `onChange` prop)
    */
-  value?: string | number // TODO: controllable( PropTypes.oneOfType([PropTypes.string, PropTypes.number]) )
+  value?: string | number
 
   /**
    * when used with the `value` prop, the component will not control its own state
@@ -65,12 +74,12 @@ type RadioInputGroupOwnProps = {
   /**
    * Array of objects with shape: `{
    *   text: ReactNode,
-   *   type: One of: ['error', 'hint', 'success', 'screenreader-only']
+   *   type: One of: ['error', 'newError', 'hint', 'success', 'screenreader-only']
    * }`
    */
   messages?: FormMessage[]
 
-  variant?: 'simple' | 'toggle' // TODO: split toggle out to its own component
+  variant?: 'simple' | 'toggle'
 
   size?: 'small' | 'medium' | 'large'
 
@@ -80,6 +89,11 @@ type RadioInputGroupOwnProps = {
    * any children (ones that aren't `RadioInput` are passed through)
    */
   children?: React.ReactNode
+
+  /**
+   * Setting this to `true` adds and asterisk after the description (group label). It does not cause any behavioural change.
+   */
+  isRequired?: boolean
 }
 
 type PropKeys = keyof RadioInputGroupOwnProps
@@ -87,12 +101,16 @@ type PropKeys = keyof RadioInputGroupOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type RadioInputGroupProps = RadioInputGroupOwnProps &
-  OtherHTMLAttributes<RadioInputGroupOwnProps> & WithDeterministicIdProps
+  WithStyleProps<RadioInputGroupTheme, RadioInputGroupStyle> &
+  OtherHTMLAttributes<RadioInputGroupOwnProps> &
+  WithDeterministicIdProps
 
 type RadioInputGroupState = {
   value?: string | number
 }
 
+type RadioInputGroupStyle = ComponentStyle<'invalidAsterisk'>
+
 const propTypes: PropValidators<PropKeys> = {
   name: PropTypes.string.isRequired,
   description: PropTypes.node.isRequired,
@@ -107,7 +125,8 @@ const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node,
   variant: PropTypes.oneOf(['simple', 'toggle']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  layout: PropTypes.oneOf(['stacked', 'columns', 'inline'])
+  layout: PropTypes.oneOf(['stacked', 'columns', 'inline']),
+  isRequired: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -125,5 +144,5 @@ const allowedProps: AllowedPropKeys = [
   'layout'
 ]
 
-export type { RadioInputGroupProps, RadioInputGroupState }
+export type { RadioInputGroupProps, RadioInputGroupState, RadioInputGroupStyle }
 export { propTypes, allowedProps }

package/src/RadioInputGroup/styles.ts

@@ -0,0 +1,48 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { RadioInputGroupTheme } from '@instructure/shared-types'
+import type { RadioInputGroupStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: RadioInputGroupTheme
+): RadioInputGroupStyle => {
+  const { invalidAsteriskColor } = componentTheme
+
+  return {
+    invalidAsterisk: {
+      color: invalidAsteriskColor
+    }
+  }
+}
+
+export default generateStyle