@instructure/ui-radio-input 10.4.2-snapshot-9 → 10.4.2-snapshot-11

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.4.2-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.4.2-snapshot-9) (2024-11-05)
+## [10.4.2-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.4.2-snapshot-11) (2024-11-06)
 
-**Note:** Version bump only for package @instructure/ui-radio-input
+
+### Features
+
+* **many:** add new form field error msg style + add asterisk for required fields ([9b03683](https://github.com/instructure/instructure-ui/commit/9b03683dadeef4c5deae2c60bea10686f143ff5d))
 
 
 

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,22 @@ 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 { 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 +71,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,9 +118,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,
+      description = _this$props2.description,
+      isRequired = _this$props2.isRequired,
+      styles = _this$props2.styles;
+    const descriptionWithRequired = jsx(React.Fragment, null, description, isRequired && jsx("span", {
+      css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.invalidAsterisk : {}
+    }, " *"));
+    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',
@@ -131,6 +144,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.primitives.red57
+  };
+  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
 });
@@ -14,8 +15,11 @@ 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 _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 +43,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 +82,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,9 +129,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,
+      description = _this$props2.description,
+      isRequired = _this$props2.isRequired,
+      styles = _this$props2.styles;
+    const descriptionWithRequired = (0, _emotion.jsx)(_react.default.Fragment, null, description, isRequired && (0, _emotion.jsx)("span", {
+      css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.invalidAsterisk : {}
+    }, " *"));
+    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',
@@ -141,5 +155,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.primitives.red57
+  };
+  return {
+    ...componentVariables
+  };
+};
+var _default = exports.default = generateComponentTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-radio-input",
-  "version": "10.4.2-snapshot-9",
+  "version": "10.4.2-snapshot-11",
   "description": "A styled HTML input type='radio' element",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,21 +24,21 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/emotion": "10.4.2-snapshot-9",
-    "@instructure/shared-types": "10.4.2-snapshot-9",
-    "@instructure/ui-dom-utils": "10.4.2-snapshot-9",
-    "@instructure/ui-form-field": "10.4.2-snapshot-9",
-    "@instructure/ui-prop-types": "10.4.2-snapshot-9",
-    "@instructure/ui-react-utils": "10.4.2-snapshot-9",
-    "@instructure/ui-testable": "10.4.2-snapshot-9",
+    "@instructure/emotion": "10.4.2-snapshot-11",
+    "@instructure/shared-types": "10.4.2-snapshot-11",
+    "@instructure/ui-dom-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-form-field": "10.4.2-snapshot-11",
+    "@instructure/ui-prop-types": "10.4.2-snapshot-11",
+    "@instructure/ui-react-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-testable": "10.4.2-snapshot-11",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.4.2-snapshot-9",
-    "@instructure/ui-color-utils": "10.4.2-snapshot-9",
-    "@instructure/ui-test-locator": "10.4.2-snapshot-9",
-    "@instructure/ui-test-utils": "10.4.2-snapshot-9",
-    "@instructure/ui-themes": "10.4.2-snapshot-9"
+    "@instructure/ui-babel-preset": "10.4.2-snapshot-11",
+    "@instructure/ui-color-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-test-locator": "10.4.2-snapshot-11",
+    "@instructure/ui-test-utils": "10.4.2-snapshot-11",
+    "@instructure/ui-themes": "10.4.2-snapshot-11"
   },
   "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'
@@ -37,6 +38,11 @@ import {
 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 +54,7 @@ category: components
 ---
 **/
 @withDeterministicId()
+@withStyle(generateStyle, generateComponentTheme)
 @testable()
 class RadioInputGroup extends Component<
   RadioInputGroupProps,
@@ -90,6 +97,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,13 +158,22 @@ class RadioInputGroup extends Component<
   }
 
   render() {
-    const { variant, layout, description } = this.props
+    const { variant, layout, description, isRequired, styles } = this.props
+
+    const descriptionWithRequired = (
+      <React.Fragment>
+        {description}
+        {isRequired && (
+          <span css={this.invalid ? styles?.invalidAsterisk : {}}> *</span>
+        )}
+      </React.Fragment>
+    )
 
     return (
       <FormFieldGroup
         {...omitProps(this.props, RadioInputGroup.allowedProps)}
         {...pickProps(this.props, FormFieldGroup.allowedProps)}
-        description={description}
+        description={descriptionWithRequired}
         layout={
           layout === 'columns' && variant === 'toggle' ? 'stacked' : layout
         } // toggles already display in cols

package/src/RadioInputGroup/props.ts

@@ -28,10 +28,15 @@ 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'
 
@@ -72,7 +77,7 @@ 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[]
@@ -87,6 +92,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
@@ -94,6 +104,7 @@ type PropKeys = keyof RadioInputGroupOwnProps
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type RadioInputGroupProps = RadioInputGroupOwnProps &
+  WithStyleProps<RadioInputGroupTheme, RadioInputGroupStyle> &
   OtherHTMLAttributes<RadioInputGroupOwnProps> &
   WithDeterministicIdProps
 
@@ -101,6 +112,8 @@ type RadioInputGroupState = {
   value?: string | number
 }
 
+type RadioInputGroupStyle = ComponentStyle<'invalidAsterisk'>
+
 const propTypes: PropValidators<PropKeys> = {
   name: PropTypes.string.isRequired,
   description: PropTypes.node.isRequired,
@@ -115,7 +128,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 = [
@@ -133,5 +147,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,46 @@
+/*
+ * 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

package/src/RadioInputGroup/theme.ts

@@ -0,0 +1,45 @@
+/*
+ * 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 { Theme } from '@instructure/ui-themes'
+import { RadioInputGroupTheme } from '@instructure/shared-types'
+
+/**
+ * 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: Theme): RadioInputGroupTheme => {
+  const { colors } = theme
+
+  const componentVariables: RadioInputGroupTheme = {
+    invalidAsteriskColor: colors.primitives.red57
+  }
+
+  return {
+    ...componentVariables
+  }
+}
+
+export default generateComponentTheme