update radio styling to put error icon in label

ni · Sep 27, 2024 · 38b175a · 38b175a
1 parent 163e59f
commit 38b175a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 40 deletions.
diff --git a/packages/nimble-components/src/radio-group/index.ts b/packages/nimble-components/src/radio-group/index.ts
@@ -21,12 +21,6 @@ export { Orientation };
  * A nimble-styled grouping element for radio buttons
  */
 export class RadioGroup extends FoundationRadioGroup implements ErrorPattern {
-    /**
-     * @internal
-     */
-    @observable
-    public nimbleSlottedRadioButtons: HTMLElement[] = [];
-
     /**
      * A message explaining why the value is invalid.
      *
@@ -39,23 +33,6 @@ export class RadioGroup extends FoundationRadioGroup implements ErrorPattern {
 
     @attr({ attribute: 'error-visible', mode: 'boolean' })
     public errorVisible = false;
-
-    private nimbleSlottedRadioButtonsChanged(_oldValue: unknown, newValue: HTMLElement[]): void {
-        this.slottedRadioButtons = newValue;
-        this.updateErrorVisibleOnRadioButtons();
-    }
-
-    private errorVisibleChanged(): void {
-        this.updateErrorVisibleOnRadioButtons();
-    }
-
-    private updateErrorVisibleOnRadioButtons(): void {
-        this.nimbleSlottedRadioButtons.forEach(radio => {
-            if (radio instanceof Radio) {
-                radio.errorVisible = this.errorVisible;
-            }
-        });
-    }
 }
 
 const nimbleRadioGroup = RadioGroup.compose({

diff --git a/packages/nimble-components/src/radio-group/styles.ts b/packages/nimble-components/src/radio-group/styles.ts
@@ -4,6 +4,7 @@ import {
     controlLabelDisabledFontColor,
     controlLabelFont,
     controlLabelFontColor,
+    smallPadding,
     standardPadding
 } from '../theme-provider/design-tokens';
 import { styles as errorStyles } from '../patterns/error/styles';
@@ -30,12 +31,22 @@ export const styles = css`
         flex-direction: row;
     }
 
+    .label-container {
+        display: flex;
+        gap: ${smallPadding};
+    }
+
     slot[name='label'] {
         font: ${controlLabelFont};
         color: ${controlLabelFontColor};
+        display: inline-flex;
     }
 
     :host([disabled]) slot[name='label'] {
         color: ${controlLabelDisabledFontColor};
     }
+
+    .error-icon {
+        margin-left: auto;
+    }
 `;
diff --git a/packages/nimble-components/src/radio-group/template.ts b/packages/nimble-components/src/radio-group/template.ts
@@ -4,6 +4,7 @@ import { Orientation } from '@microsoft/fast-web-utilities';
 import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
 import type { RadioGroup } from '.';
 import { errorTextTemplate } from '../patterns/error/template';
+import { iconExclamationMarkTag } from '../icons/exclamation-mark';
 
 export const template: FoundationElementTemplate<ViewTemplate<RadioGroup>> = (
     _context,
@@ -17,14 +18,20 @@ export const template: FoundationElementTemplate<ViewTemplate<RadioGroup>> = (
         @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
         @focusout="${(x, c) => x.focusOutHandler(c.event as FocusEvent)}"
     >
-        <slot name="label"></slot>
+        <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: 'nimbleSlottedRadioButtons',
+        property: 'slottedRadioButtons',
         filter: elements('[role=radio]'),
     })}
             ></slot>

diff --git a/packages/nimble-components/src/radio/index.ts b/packages/nimble-components/src/radio/index.ts
@@ -4,7 +4,6 @@ import {
     RadioOptions
 } from '@microsoft/fast-foundation';
 import { circleFilled16X16 } from '@ni/nimble-tokens/dist/icons/js';
-import { attr } from '@microsoft/fast-element';
 import { styles } from './styles';
 import { template } from './template';
 
@@ -17,10 +16,7 @@ declare global {
 /**
  * A nimble-styled radio button
  */
-export class Radio extends FoundationRadio {
-    @attr({ attribute: 'error-visible', mode: 'boolean' })
-    public errorVisible = false;
-}
+export class Radio extends FoundationRadio { }
 
 const nimbleRadio = Radio.compose<RadioOptions>({
     baseName: 'radio',

diff --git a/packages/nimble-components/src/radio/styles.ts b/packages/nimble-components/src/radio/styles.ts
@@ -1,20 +1,11 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utilities/style/display';
 import {
-    bodyDisabledFontColor,
-    bodyFont,
-    bodyFontColor,
     borderColor,
     borderHoverColor,
     borderRgbPartialColor,
-    borderWidth,
-    controlHeight,
-    iconSize,
-    smallDelay
+    controlHeight
 } from '../theme-provider/design-tokens';
 import { focusVisible } from '../utilities/style/focus';
-import { styles as errorStyles } from '../patterns/error/styles';
-import { userSelectNone } from '../utilities/style/user-select';
 import { commonStyles } from '../checkbox/styles';
 
 export const styles = css`