Switch: Remove "transparent" prop (#83705)

* Switch: Remove transparent prop

* Cleanup

* Remove redundant prop

packages/grafana-ui/src/components/Switch/Switch.story.tsx

@@ -19,7 +19,6 @@ const meta: Meta<typeof Switch> = {
   args: {
     disabled: false,
     value: false,
-    transparent: false,
     invalid: false,
   },
 };
@@ -29,13 +28,13 @@ export const Controlled: StoryFn<typeof Switch> = (args) => {
     <div>
       <div style={{ marginBottom: '32px' }}>
         <Field label="Normal switch" description="For horizontal forms" invalid={args.invalid}>
-          <Switch value={args.value} disabled={args.disabled} transparent={args.transparent} />
+          <Switch value={args.value} disabled={args.disabled} />
         </Field>
       </div>
       <div style={{ marginBottom: '32px' }}>
         <InlineFieldRow>
           <InlineField label="My switch" invalid={args.invalid}>
-            <InlineSwitch value={args.value} disabled={args.disabled} transparent={args.transparent} />
+            <InlineSwitch value={args.value} disabled={args.disabled} />
           </InlineField>
         </InlineFieldRow>
       </div>
@@ -47,7 +46,6 @@ export const Controlled: StoryFn<typeof Switch> = (args) => {
             showLabel={true}
             value={args.value}
             disabled={args.disabled}
-            transparent={args.transparent}
             invalid={args.invalid}
           />
         </span>
@@ -62,15 +60,7 @@ export const Uncontrolled: StoryFn<typeof Switch> = (args) => {
     (e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),
     [setChecked]
   );
-  return (
-    <Switch
-      value={checked}
-      disabled={args.disabled}
-      transparent={args.transparent}
-      onChange={onChange}
-      invalid={args.invalid}
-    />
-  );
+  return <Switch value={checked} disabled={args.disabled} onChange={onChange} invalid={args.invalid} />;
 };
 
 export default meta;

packages/grafana-ui/src/components/Switch/Switch.tsx

@@ -9,8 +9,6 @@ import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
 
 export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'value'> {
   value?: boolean;
-  /** Make inline switch's background and border transparent */
-  transparent?: boolean;
   /** Show an invalid state around the input */
   invalid?: boolean;
 }
@@ -46,7 +44,10 @@ export const Switch = React.forwardRef<HTMLInputElement, Props>(
 Switch.displayName = 'Switch';
 
 export interface InlineSwitchProps extends Props {
+  /** Label to show next to the switch */
   showLabel?: boolean;
+  /** Make inline switch's background and border transparent */
+  transparent?: boolean;
 }
 
 export const InlineSwitch = React.forwardRef<HTMLInputElement, InlineSwitchProps>(

public/app/features/admin/AdminFeatureTogglesTable.tsx

@@ -133,7 +133,6 @@ export function AdminFeatureTogglesTable({ featureToggles, allowEditing, onUpdat
               value={row.original.enabled}
               disabled={row.original.readOnly}
               onChange={(e) => handleToggleChange(row.original, e.currentTarget.checked)}
-              transparent={row.original.readOnly}
             />
           </div>
         );