Update implementation approach

Author: david0xd

ui/components/app/snaps/snap-ui-checkbox/snap-ui-checkbox.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
+import classnames from 'classnames';
 import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 import {
   BorderColor,
@@ -51,7 +52,9 @@ export const SnapUICheckbox: FunctionComponent<SnapUICheckboxProps> = ({
 
   return (
     <Box
-      className="snap-ui-renderer__checkbox"
+      className={classnames('snap-ui-renderer__checkbox', {
+        'snap-ui-renderer__field': label !== undefined,
+      })}
       display={Display.Flex}
       flexDirection={FlexDirection.Column}
     >

ui/components/app/snaps/snap-ui-dropdown/snap-ui-dropdown.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
+import classnames from 'classnames';
 import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 import {
   Display,
@@ -46,7 +47,9 @@ export const SnapUIDropdown: FunctionComponent<SnapUIDropdownProps> = ({
 
   return (
     <Box
-      className="snap-ui-renderer__dropdown"
+      className={classnames('snap-ui-renderer__dropdown', {
+        'snap-ui-renderer__field': label !== undefined,
+      })}
       display={Display.Flex}
       flexDirection={FlexDirection.Column}
     >

ui/components/app/snaps/snap-ui-file-input/snap-ui-file-input.tsx

@@ -146,7 +146,13 @@ export const SnapUIFileInput: FunctionComponent<SnapUIFileInputProps> = ({
 
   if (compact) {
     return (
-      <Box className="snap-ui-renderer__file-input">
+      <Box
+        className={classnames('snap-ui-renderer__file-input', {
+          'snap-ui-renderer__field': label !== undefined,
+        })}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+      >
         {header}
         <ButtonIcon
           type="button"
@@ -168,7 +174,13 @@ export const SnapUIFileInput: FunctionComponent<SnapUIFileInputProps> = ({
   }
 
   return (
-    <Box className="snap-ui-renderer__file-input">
+    <Box
+      className={classnames('snap-ui-renderer__file-input', {
+        'snap-ui-renderer__field': label !== undefined,
+      })}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
+    >
       {header}
       <Box
         className="snap-ui-renderer__file-input__drop-zone"

ui/components/app/snaps/snap-ui-input/snap-ui-input.tsx

@@ -5,17 +5,19 @@ import React, {
   useRef,
   useState,
 } from 'react';
+import classnames from 'classnames';
 import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 import { FormTextField, FormTextFieldProps } from '../../../component-library';
 
 export type SnapUIInputProps = {
   name: string;
   form?: string;
+  label?: string | React.ReactNode;
 };
 
 export const SnapUIInput: FunctionComponent<
   SnapUIInputProps & FormTextFieldProps<'div'>
-> = ({ name, form, ...props }) => {
+> = ({ name, form, label, ...props }) => {
   const { handleInputChange, getValue, focusedInput, setCurrentFocusedInput } =
     useSnapInterfaceContext();
 
@@ -54,10 +56,13 @@ export const SnapUIInput: FunctionComponent<
       ref={inputRef}
       onFocus={handleFocus}
       onBlur={handleBlur}
-      className="snap-ui-renderer__input"
+      className={classnames('snap-ui-renderer__input', {
+        'snap-ui-renderer__field': label !== undefined,
+      })}
       id={name}
       value={value}
       onChange={handleChange}
+      {...(label ? { label } : {})}
       {...props}
     />
   );

ui/components/app/snaps/snap-ui-radio-group/snap-ui-radio-group.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent, useEffect, useState } from 'react';
+import classnames from 'classnames';
 import { useSnapInterfaceContext } from '../../../../contexts/snaps';
 import {
   AlignItems,
@@ -75,7 +76,9 @@ export const SnapUIRadioGroup: FunctionComponent<SnapUIRadioGroupProps> = ({
 
   return (
     <Box
-      className="snap-ui-renderer__radio"
+      className={classnames('snap-ui-renderer__radio', {
+        'snap-ui-renderer__field': label !== undefined,
+      })}
       display={Display.Flex}
       flexDirection={FlexDirection.Column}
     >

ui/components/app/snaps/snap-ui-renderer/index.scss

@@ -87,7 +87,7 @@
 
   &__form {
     .snap-ui-renderer__panel {
-      .mm-box--display-flex.mm-box--flex-direction-column {
+      .snap-ui-renderer__field {
         flex: 1 1 50%; // Ensure that adjacent form elements take up to 50% width
       }
     }

ui/components/app/snaps/snap-ui-selector/snap-ui-selector.tsx

@@ -3,6 +3,7 @@ import React, {
   useEffect,
   MouseEvent as ReactMouseEvent,
 } from 'react';
+import classnames from 'classnames';
 import {
   Box,
   ButtonBase,
@@ -128,7 +129,13 @@ export const SnapUISelector: React.FunctionComponent<SnapUISelectorProps> = ({
 
   return (
     <>
-      <Box display={Display.Flex} flexDirection={FlexDirection.Column}>
+      <Box
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+        className={classnames({
+          'snap-ui-renderer__field': label !== undefined,
+        })}
+      >
         {label && <Label htmlFor={name}>{label}</Label>}
         <ButtonBase
           className="snap-ui-renderer__selector"