Radio group error

change/@ni-nimble-components-e5bfd621-8ece-4d9c-a6ea-eb128a70e8ac.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Implement error states on nimble-radio-group",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/radio-group/index.ts

@@ -1,10 +1,12 @@
 import {
     RadioGroup as FoundationRadioGroup,
-    radioGroupTemplate as template,
     DesignSystem
 } from '@microsoft/fast-foundation';
 import { Orientation } from '@microsoft/fast-web-utilities';
+import { attr } from '@microsoft/fast-element';
 import { styles } from './styles';
+import { template } from './template';
+import type { ErrorPattern } from '../patterns/error/types';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -17,7 +19,13 @@ export { Orientation };
 /**
  * A nimble-styled grouping element for radio buttons
  */
-export class RadioGroup extends FoundationRadioGroup {}
+export class RadioGroup extends FoundationRadioGroup implements ErrorPattern {
+    @attr({ attribute: 'error-text' })
+    public errorText?: string;
+
+    @attr({ attribute: 'error-visible', mode: 'boolean' })
+    public errorVisible = false;
+}
 
 const nimbleRadioGroup = RadioGroup.compose({
     baseName: 'radio-group',

packages/nimble-components/src/radio-group/styles.ts

@@ -4,15 +4,19 @@ import {
     controlLabelDisabledFontColor,
     controlLabelFont,
     controlLabelFontColor,
+    smallPadding,
     standardPadding
 } from '../theme-provider/design-tokens';
+import { styles as errorStyles } from '../patterns/error/styles';
 
 export const styles = css`
     ${display('inline-block')}
+    ${errorStyles}
 
     .positioning-region {
         display: flex;
         gap: ${standardPadding};
+        position: relative;
     }
 
     :host([orientation='vertical']) .positioning-region {
@@ -23,6 +27,12 @@ export const styles = css`
         flex-direction: row;
     }
 
+    .label-container {
+        display: flex;
+        gap: ${smallPadding};
+        margin-bottom: ${smallPadding};
+    }
+
     slot[name='label'] {
         font: ${controlLabelFont};
         color: ${controlLabelFontColor};
@@ -31,4 +41,9 @@ export const styles = css`
     :host([disabled]) slot[name='label'] {
         color: ${controlLabelDisabledFontColor};
     }
+
+    .error-icon {
+        margin-left: auto;
+        margin-right: ${smallPadding};
+    }
 `;

packages/nimble-components/src/radio-group/template.ts

@@ -0,0 +1,37 @@
+import { elements, html, slotted } from '@microsoft/fast-element';
+import { Orientation } from '@microsoft/fast-web-utilities';
+import type { RadioGroup } from '.';
+import { errorTextTemplate } from '../patterns/error/template';
+import { iconExclamationMarkTag } from '../icons/exclamation-mark';
+
+/* eslint-disable @typescript-eslint/indent */
+export const template = html<RadioGroup>`
+    <template
+        role="radiogroup"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
+        @focusout="${(x, c) => x.focusOutHandler(c.event as FocusEvent)}"
+    >
+        <div class="label-container">
+            <slot name="label"></slot>            
+            <${iconExclamationMarkTag}
+                severity="error"
+                class="error-icon"
+            ></${iconExclamationMarkTag}>
+        </div>
+        <div
+            class="positioning-region ${x => (x.orientation === Orientation.horizontal ? 'horizontal' : 'vertical')}"
+            part="positioning-region"
+        >
+            <slot
+                ${slotted({
+                    property: 'slottedRadioButtons',
+                    filter: elements('[role=radio]')
+                })}
+            ></slot>
+            ${errorTextTemplate}
+        </div>
+    </template>
+`;