fix(settings): avoid cropped tooltip on small devices

I changed the settings disposition to make tooltip positioning easier.
Jest complains about ref passed but everything seems to work as
expected so I'm not sure it is relevant. Maybe a bug with cloneElement.

11 files changed, 69 insertions, 15 deletions

diff --git a/src/components/molecules/forms/ackee-toggle.stories.tsx b/src/components/molecules/forms/ackee-toggle.stories.tsx
index bbc6fb4..3f3f11e 100644
--- a/src/components/molecules/forms/ackee-toggle.stories.tsx
+++ b/src/components/molecules/forms/ackee-toggle.stories.tsx
@@ -22,6 +22,19 @@ export default {
         required: false,
       },
     },
+    buttonClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the help button.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/ackee-toggle.tsx b/src/components/molecules/forms/ackee-toggle.tsx
index a666731..67a3644 100644
--- a/src/components/molecules/forms/ackee-toggle.tsx
+++ b/src/components/molecules/forms/ackee-toggle.tsx
@@ -14,7 +14,11 @@ import Tooltip, { type TooltipProps } from '../modals/tooltip';
 
 export type AckeeToggleProps = Pick<
   RadioGroupProps,
-  'bodyClassName' | 'groupClassName' | 'legendClassName'
+  | 'bodyClassName'
+  | 'buttonClassName'
+  | 'groupClassName'
+  | 'legendClassName'
+  | 'legendPosition'
 > & {
   /**
    * Set additional classnames to the toggle wrapper.
diff --git a/src/components/molecules/forms/fieldset.module.scss b/src/components/molecules/forms/fieldset.module.scss
index 3102bf7..38327b4 100644
--- a/src/components/molecules/forms/fieldset.module.scss
+++ b/src/components/molecules/forms/fieldset.module.scss
@@ -5,12 +5,12 @@
   font-weight: 600;
 
   &#{&}--has-tooltip {
-    padding: 0 var(--spacing-xs) 0 0;
+    margin: 0 var(--spacing-2xs) 0 0;
   }
 }
 
 .btn {
-  margin: 0 var(--spacing-2xs) var(--spacing-2xs) 0;
+  margin: 0 var(--spacing-xs) var(--spacing-2xs) 0;
 
   &--activated {
     background: var(--color-primary);
diff --git a/src/components/molecules/forms/fieldset.stories.tsx b/src/components/molecules/forms/fieldset.stories.tsx
index 0778094..85aeb7f 100644
--- a/src/components/molecules/forms/fieldset.stories.tsx
+++ b/src/components/molecules/forms/fieldset.stories.tsx
@@ -1,6 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { TooltipProps } from '../modals/tooltip';
-import { Help } from '../modals/tooltip.stories';
 import FieldsetComponent from './fieldset';
 import { body, legend, Tooltip } from './fieldset.fixture';
 
@@ -8,7 +6,7 @@ import { body, legend, Tooltip } from './fieldset.fixture';
  * Fieldset - Storybook Meta
  */
 export default {
-  title: 'Atoms/Forms/Fieldset',
+  title: 'Molecules/Forms/Fieldset',
   component: FieldsetComponent,
   args: {
     legendPosition: 'stacked',
@@ -28,6 +26,19 @@ export default {
         required: false,
       },
     },
+    buttonClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the help button.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     children: {
       control: {
         type: null,
diff --git a/src/components/molecules/forms/fieldset.tsx b/src/components/molecules/forms/fieldset.tsx
index dae3ead..961ec6d 100644
--- a/src/components/molecules/forms/fieldset.tsx
+++ b/src/components/molecules/forms/fieldset.tsx
@@ -17,6 +17,10 @@ export type FieldsetProps = {
    */
   bodyClassName?: string;
   /**
+   * Set additional classnames to the help button.
+   */
+  buttonClassName?: string;
+  /**
    * The fieldset body.
    */
   children: ReactNode | ReactNode[];
@@ -57,6 +61,7 @@ export type FieldsetProps = {
  */
 const Fieldset: FC<FieldsetProps> = ({
   bodyClassName = '',
+  buttonClassName = '',
   children,
   className = '',
   legend,
@@ -102,7 +107,7 @@ const Fieldset: FC<FieldsetProps> = ({
         <>
           <HelpButton
             aria-pressed={isTooltipOpened}
-            className={`${styles.btn} ${buttonModifier}`}
+            className={`${styles.btn} ${buttonModifier} ${buttonClassName}`}
             onClick={() => setIsTooltipOpened(!isTooltipOpened)}
             ref={buttonRef}
           />
diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
index ec2d950..ad47b33 100644
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -13,7 +13,7 @@ export type MotionToggleValue = 'on' | 'off';
 
 export type MotionToggleProps = Pick<
   RadioGroupProps,
-  'bodyClassName' | 'groupClassName' | 'legendClassName'
+  'bodyClassName' | 'groupClassName' | 'legendClassName' | 'legendPosition'
 > & {
   /**
    * True if motion should be reduced by default.
@@ -41,7 +41,8 @@ const MotionToggle: FC<MotionToggleProps> = ({
     defaultValue === 'on' ? false : true
   );
   useAttributes({
-    element: document.documentElement || undefined,
+    element:
+      typeof window !== 'undefined' ? document.documentElement : undefined,
     attribute: 'reduced-motion',
     value: `${isReduced}`,
   });
diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
index 0fd9f54..5a4d8a9 100644
--- a/src/components/molecules/forms/prism-theme-toggle.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.tsx
@@ -12,7 +12,7 @@ import RadioGroup, {
 
 export type PrismThemeToggleProps = Pick<
   RadioGroupProps,
-  'bodyClassName' | 'groupClassName' | 'legendClassName'
+  'bodyClassName' | 'groupClassName' | 'legendClassName' | 'legendPosition'
 >;
 
 /**
diff --git a/src/components/molecules/forms/radio-group.module.scss b/src/components/molecules/forms/radio-group.module.scss
index 0bd34b9..f363d1b 100644
--- a/src/components/molecules/forms/radio-group.module.scss
+++ b/src/components/molecules/forms/radio-group.module.scss
@@ -2,9 +2,9 @@
 @use "@styles/abstracts/mixins" as mix;
 
 .wrapper {
-  &--inline#{&}--regular {
-    .option:first-of-type {
-      margin-left: var(--spacing-2xs);
+  &--inline {
+    .legend {
+      margin-right: var(--spacing-2xs);
     }
   }
 
diff --git a/src/components/molecules/forms/radio-group.stories.tsx b/src/components/molecules/forms/radio-group.stories.tsx
index ad1bd6d..de5da7c 100644
--- a/src/components/molecules/forms/radio-group.stories.tsx
+++ b/src/components/molecules/forms/radio-group.stories.tsx
@@ -26,6 +26,19 @@ export default {
         required: false,
       },
     },
+    buttonClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the help button.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
diff --git a/src/components/molecules/forms/radio-group.tsx b/src/components/molecules/forms/radio-group.tsx
index 134829f..3930908 100644
--- a/src/components/molecules/forms/radio-group.tsx
+++ b/src/components/molecules/forms/radio-group.tsx
@@ -25,7 +25,12 @@ export type RadioGroupOption = Pick<
 
 export type RadioGroupProps = Pick<
   FieldsetProps,
-  'bodyClassName' | 'className' | 'legend' | 'legendClassName' | 'Tooltip'
+  | 'bodyClassName'
+  | 'buttonClassName'
+  | 'className'
+  | 'legend'
+  | 'legendClassName'
+  | 'Tooltip'
 > &
   Pick<LabelledBooleanFieldProps, 'labelPosition' | 'labelSize'> & {
     /**
@@ -78,6 +83,7 @@ const RadioGroup: FC<RadioGroupProps> = ({
   kind = 'regular',
   labelPosition,
   labelSize,
+  legendClassName,
   legendPosition = 'inline',
   onChange,
   optionClassName = '',
@@ -134,6 +140,7 @@ const RadioGroup: FC<RadioGroupProps> = ({
   return (
     <Fieldset
       className={`${styles.wrapper} ${styles[alignmentModifier]} ${styles[toggleModifier]} ${className}`}
+      legendClassName={`${styles.legend} ${legendClassName}`}
       legendPosition={legendPosition}
       role="radiogroup"
       {...props}
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index 1c6481a..6a676a9 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -12,7 +12,7 @@ import RadioGroup, {
 
 export type ThemeToggleProps = Pick<
   RadioGroupProps,
-  'bodyClassName' | 'groupClassName' | 'legendClassName'
+  'bodyClassName' | 'groupClassName' | 'legendClassName' | 'legendPosition'
 >;
 
 /**