Grafana UI: Add invalid state to RadioButtonGroup (#68183)

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx

@@ -12,7 +12,7 @@ const meta: Meta = {
       page: mdx,
     },
     controls: {
-      exclude: ['className', 'options', 'value', 'onChange'],
+      exclude: ['className', 'options', 'value', 'onChange', 'onClick', 'id'],
     },
   },
   argTypes: {
@@ -52,6 +52,7 @@ export const RadioButtons: Story = (args) => {
           onChange={(v) => setSelected(v!)}
           size={args.size}
           fullWidth={args.fullWidth}
+          invalid={args.invalid}
         />
       </div>
       <div style={{ marginBottom: '32px' }}>
@@ -63,6 +64,7 @@ export const RadioButtons: Story = (args) => {
           value={selected}
           onChange={(v) => setSelected(v!)}
           size={args.size}
+          invalid={args.invalid}
         />
       </div>
       <div style={{ marginBottom: '32px' }}>
@@ -72,6 +74,7 @@ export const RadioButtons: Story = (args) => {
           value={selected}
           onChange={(v) => setSelected(v!)}
           size={args.size}
+          invalid={args.invalid}
         />
       </div>
     </div>
@@ -82,6 +85,7 @@ RadioButtons.args = {
   disabledOptions: '',
   size: 'md',
   fullWidth: true,
+  invalid: false,
 };
 
 export default meta;

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx

@@ -21,6 +21,7 @@ export interface RadioButtonGroupProps<T> {
   fullWidth?: boolean;
   className?: string;
   autoFocus?: boolean;
+  invalid?: boolean;
 }
 
 export function RadioButtonGroup<T>({
@@ -35,6 +36,7 @@ export function RadioButtonGroup<T>({
   className,
   fullWidth = false,
   autoFocus = false,
+  invalid = false,
 }: RadioButtonGroupProps<T>) {
   const handleOnChange = useCallback(
     (option: SelectableValue) => {
@@ -69,7 +71,7 @@ export function RadioButtonGroup<T>({
   }, [autoFocus]);
 
   return (
-    <div className={cx(styles.radioGroup, fullWidth && styles.fullWidth, className)}>
+    <div className={cx(styles.radioGroup, fullWidth && styles.fullWidth, invalid && styles.invalid, className)}>
       {options.map((opt, i) => {
         const isItemDisabled = disabledOptions && opt.value && disabledOptions.includes(opt.value);
         const icon = opt.icon ? toIconName(opt.icon) : undefined;
@@ -122,5 +124,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       height: ${theme.spacing(2)};
       margin-right: ${theme.spacing(1)};
     `,
+    invalid: css({
+      border: `1px solid ${theme.colors.error.border}`,
+    }),
   };
 };