From e5c80523141622cad74cf7e08179bc2500f86034 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Wed, 2 Oct 2024 11:10:54 -0400
Subject: [PATCH] Apply MUI theming to Register Model form

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

fix tests

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

add fieldset to custom components

fix spacing issue with helper text

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

remove comment

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

fixes for text area

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

format

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

add model description fix

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

create reusable fieldset component
---
 .../screens/RegisterModel/FormFieldset.tsx    |  21 ++
 .../PrefilledModelRegistryField.tsx           |  10 +-
 .../screens/RegisterModel/RegisterModel.tsx   |  60 +++-
 .../screens/RegisterModel/RegisterVersion.tsx |   1 -
 .../RegisterModel/RegisteredModelSelector.tsx |  26 +-
 .../RegistrationCommonFormSections.tsx        | 251 ++++++++------
 .../RegisteredModelListView.tsx               |   2 +-
 clients/ui/frontend/src/style/MUI-theme.scss  | 322 +++++++++++++++---
 8 files changed, 518 insertions(+), 175 deletions(-)
 create mode 100644 clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/FormFieldset.tsx

diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/FormFieldset.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/FormFieldset.tsx
new file mode 100644
index 000000000..01b6fe979
--- /dev/null
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/FormFieldset.tsx
@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+
+interface FormFieldsetProps {
+  component: ReactNode;
+  field: string;
+}
+
+const FormFieldset: React.FC<FormFieldsetProps> = ({ component, field }) => {
+  return (
+    <div className="form-fieldset-wrapper">
+      {component}
+      <fieldset aria-hidden="true" className="form-fieldset">
+        <legend className="form-fieldset-legend">
+          <span>{field}</span>
+        </legend>
+      </fieldset>
+    </div>
+  );
+};
+
+export default FormFieldset;
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
index 980da8d37..fef2b8313 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
@@ -1,13 +1,19 @@
 import React from 'react';
 import { FormGroup, TextInput } from '@patternfly/react-core';
+import FormFieldset from "./FormFieldset";
 
 type PrefilledModelRegistryFieldProps = {
   mrName?: string;
 };
 
 const PrefilledModelRegistryField: React.FC<PrefilledModelRegistryFieldProps> = ({ mrName }) => (
-  <FormGroup label="Model registry" isRequired fieldId="mr-name">
-    <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
+  <FormGroup className="form-group-disabled" label="Model registry" isRequired fieldId="mr-name">
+    <FormFieldset
+      component={
+        <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
+      }
+      field="Model Registry"
+    />
   </FormGroup>
 );
 
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
index c6cffb9de..8641834d5 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterModel.tsx
@@ -21,8 +21,8 @@ import { useRegisterModelData, RegistrationCommonFormData } from './useRegisterM
 import { isRegisterModelSubmitDisabled, registerModel } from './utils';
 import { useRegistrationCommonState } from './useRegistrationCommonState';
 import RegistrationCommonFormSections from './RegistrationCommonFormSections';
-import PrefilledModelRegistryField from './PrefilledModelRegistryField';
 import RegistrationFormFooter from './RegistrationFormFooter';
+import FormFieldset from './FormFieldset';
 
 const RegisterModel: React.FC = () => {
   const { modelRegistry: mrName } = useParams();
@@ -42,6 +42,31 @@ const RegisterModel: React.FC = () => {
     });
   const onCancel = () => navigate(modelRegistryUrl(mrName));
 
+  const modelRegistryInput = (
+    <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
+  );
+
+  const modelNameInput = (
+    <TextInput
+      isRequired
+      type="text"
+      id="model-name"
+      name="model-name"
+      value={modelName}
+      onChange={(_e, value) => setData('modelName', value)}
+    />
+  );
+
+  const modelDescriptionInput = (
+    <TextArea
+      type="text"
+      id="model-description"
+      name="model-description"
+      value={modelDescription}
+      onChange={(_e, value) => setData('modelDescription', value)}
+    />
+  );
+
   return (
     <ApplicationsPage
       title="Register model"
@@ -61,7 +86,14 @@ const RegisterModel: React.FC = () => {
         <Form isWidthLimited>
           <Stack hasGutter>
             <StackItem className={spacing.mbLg}>
-              <PrefilledModelRegistryField mrName={mrName} />
+              <FormGroup
+                className="form-group-disabled"
+                label="Model registry"
+                isRequired
+                fieldId="mr-name"
+              >
+                <FormFieldset component={modelRegistryInput} field="Model Registry" />
+              </FormGroup>
             </StackItem>
             <StackItem>
               <FormSection
@@ -69,23 +101,15 @@ const RegisterModel: React.FC = () => {
                 description="Provide general details that apply to all versions of this model."
               >
                 <FormGroup label="Model name" isRequired fieldId="model-name">
-                  <TextInput
-                    isRequired
-                    type="text"
-                    id="model-name"
-                    name="model-name"
-                    value={modelName}
-                    onChange={(_e, value) => setData('modelName', value)}
-                  />
+                <FormFieldset component={modelNameInput} field="Model Name" />
                 </FormGroup>
-                <FormGroup label="Model description" fieldId="model-description">
-                  <TextArea
-                    type="text"
-                    id="model-description"
-                    name="model-description"
-                    value={modelDescription}
-                    onChange={(_e, value) => setData('modelDescription', value)}
-                  />
+                <FormGroup
+                  className="model-description"
+                  label="Model description"
+                  fieldId="model-description"
+                >
+                                  <FormFieldset component={modelDescriptionInput} field="Model Description" />
+
                 </FormGroup>
               </FormSection>
               <RegistrationCommonFormSections
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx
index 75447e8eb..2b73b2747 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterVersion.tsx
@@ -101,7 +101,6 @@ const RegisterVersion: React.FC = () => {
             <StackItem className={spacing.mbLg}>
               <FormGroup
                 id="registered-model-container"
-                label="Model name"
                 isRequired
                 fieldId="model-name"
                 labelHelp={
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
index 0c450b4d8..d153ea216 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { TextInput } from '@patternfly/react-core';
+import { FormGroup, TextInput } from '@patternfly/react-core';
 import { TypeaheadSelect, TypeaheadSelectOption } from '@patternfly/react-templates';
 import { RegisteredModel } from '~/app/types';
+import FormFieldset from './FormFieldset';
 
 type RegisteredModelSelectorProps = {
   registeredModels: RegisteredModel[];
@@ -34,14 +35,21 @@ const RegisteredModelSelector: React.FC<RegisteredModelSelectorProps> = ({
         See related PatternFly issue https://github.com/patternfly/patternfly-react/issues/10842
     */
     return (
-      <TextInput
-        isDisabled
-        isRequired
-        type="text"
-        id="model-name"
-        name="registered-model-prefilled"
-        value={options.find(({ value }) => value === registeredModelId)?.content}
-      />
+      <FormGroup label="Model name" className="form-group-disabled" isRequired fieldId="model-name">
+        <FormFieldset
+          component={
+            <TextInput
+              isDisabled
+              isRequired
+              type="text"
+              id="model-name"
+              name="registered-model-prefilled"
+              value={options.find(({ value }) => value === registeredModelId)?.content}
+            />
+          }
+          field="Model Name"
+        />
+      </FormGroup>
     );
   }
 
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
index 10f069c87..818044dd8 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
@@ -6,11 +6,11 @@ import {
   Radio,
   Split,
   SplitItem,
-  InputGroupText,
-  InputGroupItem,
   HelperText,
   HelperTextItem,
   FormHelperText,
+  TextInputGroup,
+  TextInputGroupMain,
 } from '@patternfly/react-core';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { UpdateObjectAtPropAndValue } from '~/types';
@@ -19,6 +19,7 @@ import { UpdateObjectAtPropAndValue } from '~/types';
 import FormSection from '~/app/components/pf-overrides/FormSection';
 import { ModelVersion } from '~/app/types';
 import { ModelLocationType, RegistrationCommonFormData } from './useRegisterModelData';
+import FormFieldset from './FormFieldset';
 // import { ConnectionModal } from './ConnectionModal';
 
 type RegistrationCommonFormSectionsProps = {
@@ -61,6 +62,105 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
     modelLocationURI,
   } = formData;
 
+  const versionNameInput = (
+    <TextInput
+      isRequired
+      type="text"
+      id="version-name"
+      name="version-name"
+      value={versionName}
+      onChange={(_e, value) => setData('versionName', value)}
+    />
+  );
+
+  const versionDescriptionInput = (
+    <TextArea
+      type="text"
+      id="version-description"
+      name="version-description"
+      value={versionDescription}
+      onChange={(_e, value) => setData('versionDescription', value)}
+    />
+  );
+
+  const sourceModelFormatInput = (
+    <TextInput
+      type="text"
+      placeholder="Example, tensorflow"
+      id="source-model-format"
+      name="source-model-format"
+      value={sourceModelFormat}
+      onChange={(_e, value) => setData('sourceModelFormat', value)}
+    />
+  );
+
+  const sourceModelFormatVersionInput = (
+    <TextInput
+      type="text"
+      placeholder="Example, 1"
+      id="source-model-format-version"
+      name="source-model-format-version"
+      value={sourceModelFormatVersion}
+      onChange={(_e, value) => setData('sourceModelFormatVersion', value)}
+    />
+  );
+
+  const endpointInput = (
+    <TextInput
+      isRequired
+      type="text"
+      id="location-endpoint"
+      name="location-endpoint"
+      value={modelLocationEndpoint}
+      onChange={(_e, value) => setData('modelLocationEndpoint', value)}
+    />
+  );
+
+  const bucketInput = (
+    <TextInput
+      isRequired
+      type="text"
+      id="location-bucket"
+      name="location-bucket"
+      value={modelLocationBucket}
+      onChange={(_e, value) => setData('modelLocationBucket', value)}
+    />
+  );
+
+  const regionInput = (
+    <TextInput
+      type="text"
+      id="location-region"
+      name="location-region"
+      value={modelLocationRegion}
+      onChange={(_e, value) => setData('modelLocationRegion', value)}
+    />
+  );
+
+  const pathInput = (
+    <TextInputGroup>
+      <TextInputGroupMain
+        icon="/"
+        type="text"
+        id="location-path"
+        name="location-path"
+        value={modelLocationPath}
+        onChange={(_e, value) => setData('modelLocationPath', value)}
+      />
+    </TextInputGroup>
+  );
+
+  const uriInput = (
+    <TextInput
+      isRequired
+      type="text"
+      id="location-uri"
+      name="location-uri"
+      value={modelLocationURI}
+      onChange={(_e, value) => setData('modelLocationURI', value)}
+    />
+  );
+
   return (
     <>
       <FormSection
@@ -72,54 +172,34 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
         }
       >
         <FormGroup label="Version name" isRequired fieldId="version-name">
-          <TextInput
-            isRequired
-            type="text"
-            id="version-name"
-            name="version-name"
-            value={versionName}
-            onChange={(_e, value) => setData('versionName', value)}
-          />
-          {latestVersion && (
-            <FormHelperText>
-              <HelperText>
-                <HelperTextItem>Current version is {latestVersion.name}</HelperTextItem>
-              </HelperText>
-            </FormHelperText>
-          )}
+          <FormFieldset component={versionNameInput} field="Version Name" />
         </FormGroup>
-        <FormGroup label="Version description" fieldId="version-description">
-          <TextArea
-            type="text"
-            id="version-description"
-            name="version-description"
-            value={versionDescription}
-            onChange={(_e, value) => setData('versionDescription', value)}
-          />
+        {latestVersion && (
+          <FormHelperText>
+            <HelperText>
+              <HelperTextItem>Current version is {latestVersion.name}</HelperTextItem>
+            </HelperText>
+          </FormHelperText>
+        )}
+        <FormGroup
+          className="version-description"
+          label="Version description"
+          fieldId="version-description"
+        >
+          <FormFieldset component={versionDescriptionInput} field="Version Description" />
         </FormGroup>
         <FormGroup label="Source model format" fieldId="source-model-format">
-          <TextInput
-            type="text"
-            placeholder="Example, tensorflow"
-            id="source-model-format"
-            name="source-model-format"
-            value={sourceModelFormat}
-            onChange={(_e, value) => setData('sourceModelFormat', value)}
-          />
+          <FormFieldset component={sourceModelFormatInput} field="Source Model Format" />
         </FormGroup>
         <FormGroup label="Source model format version" fieldId="source-model-format-version">
-          <TextInput
-            type="text"
-            placeholder="Example, 1"
-            id="source-model-format-version"
-            name="source-model-format-version"
-            value={sourceModelFormatVersion}
-            onChange={(_e, value) => setData('sourceModelFormatVersion', value)}
+          <FormFieldset
+            component={sourceModelFormatVersionInput}
+            field="Source Model Format Version"
           />
         </FormGroup>
       </FormSection>
       <FormSection
-        title="Model location"
+        field="Model location"
         description="Specify the model location by providing either the object storage details or the URI."
       >
         <Split>
@@ -156,83 +236,46 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
               isRequired
               fieldId="location-endpoint"
             >
-              <TextInput
-                isRequired
-                type="text"
-                id="location-endpoint"
-                name="location-endpoint"
-                value={modelLocationEndpoint}
-                onChange={(_e, value) => setData('modelLocationEndpoint', value)}
-              />
+              <FormFieldset component={endpointInput} field="Endpoint" />
             </FormGroup>
             <FormGroup className={spacing.mlLg} label="Bucket" isRequired fieldId="location-bucket">
-              <TextInput
-                isRequired
-                type="text"
-                id="location-bucket"
-                name="location-bucket"
-                value={modelLocationBucket}
-                onChange={(_e, value) => setData('modelLocationBucket', value)}
-              />
+              <FormFieldset component={bucketInput} field="Bucket" />
             </FormGroup>
             <FormGroup className={spacing.mlLg} label="Region" fieldId="location-region">
-              <TextInput
-                type="text"
-                id="location-region"
-                name="location-region"
-                value={modelLocationRegion}
-                onChange={(_e, value) => setData('modelLocationRegion', value)}
-              />
+              <FormFieldset component={regionInput} field="Region" />
             </FormGroup>
             <FormGroup className={spacing.mlLg} label="Path" isRequired fieldId="location-path">
-              <Split hasGutter>
-                <SplitItem>
-                  <InputGroupText isPlain>/</InputGroupText>
-                </SplitItem>
-                <SplitItem isFilled>
-                  <InputGroupItem>
-                    <TextInput
-                      isRequired
-                      type="text"
-                      id="location-path"
-                      name="location-path"
-                      value={modelLocationPath}
-                      onChange={(_e, value) => setData('modelLocationPath', value)}
-                    />
-                  </InputGroupItem>
-                </SplitItem>
-              </Split>
+              <FormFieldset component={pathInput} field="Path" />
+            </FormGroup>
+            <FormHelperText className="path-helper-text">
               <HelperText>
                 <HelperTextItem>
                   Enter a path to a model or folder. This path cannot point to a root folder.
                 </HelperTextItem>
               </HelperText>
+            </FormHelperText>
+          </>
+        )}
+        <Split>
+          <SplitItem isFilled>
+            <Radio
+              isChecked={modelLocationType === ModelLocationType.URI}
+              name="location-type-uri"
+              onChange={() => {
+                setData('modelLocationType', ModelLocationType.URI);
+              }}
+              label="URI"
+              id="location-type-uri"
+            />
+          </SplitItem>
+        </Split>
+        {modelLocationType === ModelLocationType.URI && (
+          <>
+            <FormGroup className={spacing.mlLg} label="URI" isRequired fieldId="location-uri">
+              <FormFieldset component={uriInput} field="URI" />
             </FormGroup>
           </>
         )}
-        <Radio
-          isChecked={modelLocationType === ModelLocationType.URI}
-          name="location-type-uri"
-          onChange={() => {
-            setData('modelLocationType', ModelLocationType.URI);
-          }}
-          label="URI"
-          id="location-type-uri"
-          body={
-            modelLocationType === ModelLocationType.URI && (
-              <FormGroup label="URI" isRequired fieldId="location-uri">
-                <TextInput
-                  isRequired
-                  type="text"
-                  id="location-uri"
-                  name="location-uri"
-                  value={modelLocationURI}
-                  onChange={(_e, value) => setData('modelLocationURI', value)}
-                />
-              </FormGroup>
-            )
-          }
-        />
       </FormSection>
       {/* <ConnectionModal
         isOpen={isAutofillModalOpen}
diff --git a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
index ff2017141..d7b4ccb37 100644
--- a/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
+++ b/clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisteredModels/RegisteredModelListView.tsx
@@ -90,7 +90,7 @@ const RegisteredModelListView: React.FC<RegisteredModelListViewProps> = ({
         />
       </ToolbarFilter>
       <ToolbarItem variant="label-group">
-        <div className="form-fieldset-wrapper">
+        <div className="toolbar-fieldset-wrapper">
           <TextInput
             value={search}
             type="text"
diff --git a/clients/ui/frontend/src/style/MUI-theme.scss b/clients/ui/frontend/src/style/MUI-theme.scss
index c8bf4269a..87d46c495 100644
--- a/clients/ui/frontend/src/style/MUI-theme.scss
+++ b/clients/ui/frontend/src/style/MUI-theme.scss
@@ -1,5 +1,4 @@
 :root {
-
   // Alert
   --mui-alert--BoxShadow: none;
   --mui-alert-warning-text: #663c00;
@@ -46,6 +45,14 @@
   --mui-menu-toggle--PaddingInlineStart: 10px;
   --mui-menu-toggle--PaddingInlineEnd: 10px;
 
+  // Radio
+  --mui-radio--margin: 10px 0;
+  --mui-radio-PaddingLeft: 30px;
+  --mui-radio__label--Width: 20px;
+  --mui-radio__label--Height: 20px;
+  --mui-radio__input--Width: 10px;
+  --mui-radio__input--Height: 10px;
+
   // Table
   --mui-table__button--BackgroundColor: none;
   --mui-table__button--hover--BackgroundColor: none;
@@ -78,15 +85,12 @@
   --mui-tabs__item--m-current__link--after--BorderWidth: 2px;
   --mui-tabs__link--FontSize: 0.875rem;
 
-
   --mui-text-transform: uppercase;
 
-
   --mui-spacing-4px: calc(0.5 * var(--mui-spacing));
-  --mui-spacing-8px: calc(0.5 * var(--mui-spacing));
+  --mui-spacing-8px: var(--mui-spacing);
   --mui-spacing-16px: calc(2 * var(--mui-spacing));
 
-
   --pf-t--global--border--width--box--status--default: 1px;
   --pf-t--global--border--radius--pill: var(--mui-shape-borderRadius);
   --pf-t--global--border--radius--medium: var(--mui-shape-borderRadius);
@@ -98,11 +102,12 @@
   --pf-t--global--font--family--100: Roboto, Helvetica, Arial, sans-serif;
   --pf-t--global--font--family--200: Roboto, Helvetica, Arial, sans-serif;
   --pf-t--global--font--family--300: Roboto, Courier, monospace;
-
 }
 
 .pf-v6-c-alert {
-  --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--status--warning--default);
+  --pf-v6-c-alert--m-warning__title--Color: var(
+    --pf-t--global--text--color--status--warning--default
+  );
   --pf-v6-c-alert__icon--MarginInlineEnd: var(--mui-alert__icon--MarginInlineEnd);
   --pf-v6-c-alert__title--FontWeight: var(--mui-alert-warning-font-weight);
   --pf-v6-c-alert__icon--MarginBlockStart: var(--mui-alert__icon--MarginBlockStart);
@@ -137,18 +142,168 @@
   position: relative;
 }
 
- .form-fieldset-wrapper {
+.pf-v6-c-form__group.model-description .pf-v6-c-form__group-label,
+.pf-v6-c-form__group.version-description .pf-v6-c-form__group-label {
+  padding-top: 10px;
+}
+
+.pf-v6-c-form__group.form-group-disabled .pf-v6-c-form__label {
+  color: var(--mui-palette-text-disabled);
+}
+
+.pf-v6-c-form__helper-text.path-helper-text {
+  margin-inline-start: var(--pf-t--global--spacer--lg);
+}
+
+.pf-v6-c-form__section-title {
+  margin: 0px 0px 0.35em;
+}
+
+.pf-v6-c-form__label {
+  position: absolute;
+  top: 35%;
+  left: 12px;
+  font-size: 14px;
+  color: var(--mui-palette-grey-600);
+  pointer-events: none;
+  transition: all 0.2s ease;
+  transform-origin: left center;
+  transform: translateY(-50%) scale(0.75);
+  background-color: var(--mui-palette-common-white);
+  padding: 0 4px;
+  z-index: 1;
+  --pf-v6-c-form__label-required--Color: currentColor;
+}
+
+.pf-v6-c-form-control input::placeholder {
+  color: var(--mui-palette-grey-600);
+}
+
+.pf-v6-c-form-control.pf-m-disabled {
+  background-color: var(--mui-palette-common-white);
+  --pf-v6-c-form-control--m-disabled--Color: var(--mui-palette-text-disabled);
+}
+
+.pf-v6-c-form-control.pf-m-resize-both {
+  // Resize is disabled in MUI.
+  resize: none;
+  padding-top: var(--mui-spacing-16px);
+  padding-bottom: var(--mui-spacing-16px);
+}
+
+.pf-v6-c-form-control > :is(input, select, textarea) {
+  padding-block-start: 0px; 
+  padding-block-end: 0px;
+}
+
+.pf-v6-c-form__section {
+  gap: 0px;
+}
+
+.toolbar-fieldset-wrapper .pf-v6-c-form-control input {
+  padding: 8px 14px;
+}
+
+.pf-v6-c-form-control input {
+  padding: 16.5px 14px;
+}
+
+.pf-v6-c-text-input-group__text-input {
+  padding: 16.5px 14px;
+  padding-left: 32px;
+}
+
+.pf-v6-c-text-input-group::before {
+  border: none;
+}
+
+.pf-v6-c-text-input-group__icon {
+  color: rgba(0, 0, 0, 0.38);
+  margin-right: var(--mui-spacing-4px);
+}
+
+.pf-v6-c-form__group-control textarea {
+  position: relative;
+  box-sizing: border-box;
+}
+
+.pf-v6-c-form-control > :is(input, select, textarea):focus {
+  --pf-v6-c-form-control--OutlineOffset: none;
+  outline: none;
+}
+
+.pf-v6-c-text-input-group__text-input:focus {
+  --pf-v6-c-form-control--OutlineOffset: none;
+  outline: none;
+}
+
+.form-fieldset-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.pf-v6-c-form__group .form-fieldset-legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0;
+  height: 11px;
+  font-size: 0.75em;
+  visibility: hidden;
+  max-width: 0.01px;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.form-fieldset-wrapper:hover .form-fieldset {
+  border-color: black;
+}
+
+.form-fieldset-wrapper:hover span.pf-v6-c-form-control.pf-m-disabled ~ .form-fieldset {
+  border-color: rgba(0, 0, 0, 0.23);
+}
+
+.form-fieldset-wrapper:focus-within .form-fieldset {
+  border-color: var(--mui-palette-primary-main);
+  border-width: 2px;
+  padding: 7px 7px;
+}
+
+.form-fieldset-legend {
+  float: unset;
+  width: auto;
+  overflow: hidden;
+  display: block;
+  padding: 0 5px 0 5px;
+  font-size: 0.75em;
+  max-width: 0.01px;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.form-fieldset-wrapper:focus-within {
+  color: var(--mui-palette-primary-main);
+}
+
+.form-fieldset-wrapper,
+.toolbar-fieldset-wrapper {
   position: relative;
   width: 100%;
 }
 
- .form-fieldset-wrapper:focus-within .form-fieldset {
+.form-fieldset-wrapper .form-fieldset:hover {
+  border-color: var(--mui-palette-common-black);
+}
+
+.toolbar-fieldset-wrapper:focus-within .form-fieldset {
   border-color: var(--mui-palette-primary-main);
   border-width: 2px;
-  padding: 7px 7px
+  padding: 7px 7px;
 }
 
- .form-fieldset {
+.toolbar-fieldset-wrapper .form-fieldset,
+.form-fieldset {
   text-align: left;
   position: absolute;
   bottom: 0;
@@ -164,39 +319,51 @@
   overflow: hidden;
   min-width: 0%;
   border-color: rgba(0, 0, 0, 0.23);
-  border-radius: 4px;
+  border-radius: var(--mui-shape-borderRadius);
 }
 
- .form-fieldset-legend {
+.toolbar-fieldset-wrapper .form-fieldset-legend {
   float: unset;
   width: auto;
   overflow: hidden;
   display: block;
   padding: 0 5px 0 5px;
-  // height: 11px;
   font-size: 0.75em;
-  // visibility: hidden;
   max-width: 0.01px;
   white-space: nowrap;
   max-width: 100%;
 }
 
-.form-fieldset-wrapper:focus-within  {
+.toolbar-fieldset-wrapper:focus-within {
   color: var(--mui-palette-primary-main);
 }
 
-.pf-v6-c-form-control>:is(input,select,textarea):focus {
-  --pf-v6-c-form-control--OutlineOffset: none;
-  outline: none;
+.toolbar-fieldset-wrapper:focus-within .form-fieldset-legend {
+  color: var(--mui-palette-primary-main);
 }
 
- .form-fieldset-wrapper .pf-v6-c-form-control {
+.toolbar-fieldset-wrapper .pf-v6-c-form-control,
+.form-fieldset-wrapper .pf-v6-c-form-control {
   &::before,
   &::after {
     content: revert;
   }
 }
 
+.pf-v6-c-form__group .pf-v6-c-form-control:focus-within + .pf-v6-c-form__label,
+.pf-v6-c-form__group .pf-v6-c-form-control:not(:placeholder-shown) + .pf-v6-c-form__label {
+  color: var(--mui-palette-primary-main);
+}
+
+.pf-v6-c-form__group:focus-within .pf-v6-c-form-control {
+  --pf-v6-c-form-control--after--BorderWidth: 2px;
+  --pf-v6-c-form-control--after--BorderColor: var(--mui-palette-primary-main);
+}
+
+.pf-v6-c-form__group:focus-within .pf-v6-c-form__label {
+  /* Change color of the label when the input is focused */
+  color: var(--mui-palette-primary-main);
+}
 
 .pf-v6-c-menu {
   --pf-v6-c-menu--BoxShadow: var(--mui-shadows-8);
@@ -215,7 +382,9 @@
 .pf-v6-c-menu-toggle {
   --pf-v6-c-menu-toggle__toggle-icon--MinHeight: var(--mui-menu-toggle__toggle-icon--MinHeight);
   --pf-v6-c-menu-toggle__controls--MinWidth: var(--mui-menu-toggle__controls--MinWidth);
-  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--mui-menu-toggle--expanded--BackgroundColor);
+  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(
+    --mui-menu-toggle--expanded--BackgroundColor
+  );
   --pf-v6-c-menu-toggle--expanded--BorderColor: var(--mui-menu-toggle--expanded--BorderColor);
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--mui-menu-toggle--PaddingInlineStart);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--mui-menu-toggle--PaddingInlineEnd);
@@ -223,9 +392,15 @@
   --pf-v6-c-menu-toggle--expanded--Color: var(--mui-palette-common-black);
   --pf-v6-c-menu-toggle--hover--BorderColor: var(--mui-menu-toggle--hover--BorderColor);
   --pf-v6-c-menu-toggle--BorderColor: var(--mui-menu-toggle--BorderColor);
-  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--mui-palette-primary-dark);
+  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(
+    --pf-t--global--background--color--action--plain--hover
+  );
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(
+    --pf-t--global--color--brand--default
+  );
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(
+    --mui-palette-primary-dark
+  );
 
   text-transform: var(--mui-text-transform);
   font-weight: var(--mui-button-font-weight);
@@ -247,8 +422,11 @@
   --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
 }
 
-.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button .pf-v6-c-menu-toggle__button[aria-expanded="true"] {
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--mui-palette-primary-dark);
+.pf-v6-c-menu-toggle.pf-m-primary.pf-m-split-button
+  .pf-v6-c-menu-toggle__button[aria-expanded='true'] {
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(
+    --mui-palette-primary-dark
+  );
 }
 
 .pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__toggle-icon) {
@@ -280,7 +458,64 @@
 
 .pf-v6-c-menu-toggle__icon {
   display: block;
-  padding-right: var(--mui-spacing-4px);
+}
+
+.pf-v6-radio {
+  --pf-v6-c-radio--AccentColor: var(--mui-palette-primary-main);
+}
+
+.pf-v6-c-radio {
+  display: flex;
+  align-items: center;
+  margin: var(--mui-radio--margin);
+}
+
+.pf-v6-c-radio__input {
+  display: none;
+  /* Hide default radio button */
+}
+
+.pf-v6-c-radio__label {
+  --pf-v6-c-radio__label--FontSize: 16px;
+  padding-left: var(--mui-radio-PaddingLeft);
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Custom radio circle */
+.pf-v6-c-radio__label::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--mui-radio__label--Width);
+  height: var(--mui-radio__label--Height);
+  border: 2px solid var(--mui-palette-primary-main);
+  border-radius: 50%;
+  background: var(--mui-palette-common-white);
+}
+
+/* When radio is checked */
+.pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::before {
+  background: var(--mui-palette-common-white);
+  border-color: var(--mui-palette-primary-main);
+}
+
+/* Inner dot for checked state */
+.pf-v6-c-radio__input:checked + .pf-v6-c-radio__label::after {
+  content: '';
+  position: absolute;
+  left: 5px;
+  /* Center the dot */
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--mui-radio__input--Width);
+  /* Size of inner dot */
+  height: var(--mui-radio__input--Height);
+  border-radius: 50%;
+  background: var(--mui-palette-primary-main);
 }
 
 .pf-v6-c-table {
@@ -299,11 +534,15 @@
   --pf-v6-c-table--cell--PaddingInlineEnd: var(--mui-table--cell--PaddingInlineEnd);
   --pf-v6-c-table--cell--PaddingBlockStart: var(--mui-table--cell--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--mui-table--cell--PaddingBlockEnd);
-  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--mui-table--cell--first-last-child--PaddingInline);
+  --pf-v6-c-table--cell--first-last-child--PaddingInline: var(
+    --mui-table--cell--first-last-child--PaddingInline
+  );
   --pf-v6-c-table__thead--cell--FontWeight: var(--mui-button-font-weight);
   --pf-v6-c-table__thead--cell--FontSize: var(--mui-table__thead--cell--FontSize);
   --pf-v6-c-table__tr--BorderBlockEndColor: var(--mui-palette-grey-300);
-  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--mui-table__sort-indicator--MarginInlineStart);
+  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(
+    --mui-table__sort-indicator--MarginInlineStart
+  );
 
   letter-spacing: 0.01071em;
 }
@@ -315,7 +554,9 @@
 .pf-v6-c-table__sort-indicator {
   font-size: 18px;
   opacity: 0;
-  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition:
+    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   transform-origin: center center;
   align-self: start;
 }
@@ -338,12 +579,12 @@
   opacity: 0.6;
 }
 
-.pf-v6-c-table__sort[aria-sort="ascending"] .pf-v6-c-table__sort-indicator {
+.pf-v6-c-table__sort[aria-sort='ascending'] .pf-v6-c-table__sort-indicator {
   transform: rotate(180deg);
   align-self: end;
 }
 
-.pf-v6-c-table__sort[aria-sort="descending"] .pf-v6-c-table__sort-indicator {
+.pf-v6-c-table__sort[aria-sort='descending'] .pf-v6-c-table__sort-indicator {
   align-self: start;
 }
 
@@ -365,7 +606,9 @@
   --pf-v6-c-tabs__link--PaddingInlineStart: var(--mui-tabs__link--PaddingInlineStart);
   --pf-v6-c-tabs__link--PaddingInlineEnd: var(--mui-tabs__link--PaddingInlineEnd);
   --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--brand--default);
-  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--mui-tabs__item--m-current__link--after--BorderWidth);
+  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(
+    --mui-tabs__item--m-current__link--after--BorderWidth
+  );
   --pf-v6-c-tabs__link--FontSize: 0.875rem;
 }
 
@@ -392,17 +635,16 @@
 }
 
 .pf-v6-c-label__text {
-  padding-right: var(--mui-spacing-8px);
-  padding-left: var(--mui-spacing-8px);
+  padding-right: var(--mui-spacing-4px);
+  padding-left: var(--mui-spacing-4px);
   color: var(--pf-t--global--text--color--inverse);
 }
 
-.pf-v6-c-label-group.pf-m-category
- {
+.pf-v6-c-label-group.pf-m-category {
   --pf-v6-c-label-group--m-category--BorderWidth: 0px;
   --pf-v6-c-label-group--m-category--BorderRadius: var(--mui-shape-borderRadius);
   box-shadow: var(--mui-shadows-1);
- }
+}
 
 .pf-v6-c-label.pf-m-outline {
   --pf-v6-c-label--BorderColor: none;
@@ -437,5 +679,5 @@
 }
 
 .pf-v6-c-pagination__page-menu::before {
-  content: "Rows per page:";
-}
\ No newline at end of file
+  content: 'Rows per page:';
+}