add fieldset to custom components

kubeflow · Oct 7, 2024 · 39b2ee6 · 39b2ee6
1 parent b94d40e
commit 39b2ee6
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 14 deletions.
diff --git a/...rontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx b/...rontend/src/app/pages/modelRegistry/screens/RegisterModel/PrefilledModelRegistryField.tsx
@@ -6,8 +6,15 @@ type PrefilledModelRegistryFieldProps = {
 };
 
 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">
+    <div className="form-fieldset-wrapper">
+      <TextInput isDisabled isRequired type="text" id="mr-name" name="mr-name" value={mrName} />
+      <fieldset aria-hidden="true" className="form-fieldset">
+        <legend className="form-fieldset-legend">
+          <span>Model Registry</span>
+        </legend>
+      </fieldset>
+    </div>
   </FormGroup>
 );
 

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
@@ -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/...ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx b/...ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisteredModelSelector.tsx
@@ -1,5 +1,5 @@
 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';
 
@@ -34,14 +34,23 @@ 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">
+        <div className="form-fieldset-wrapper">
+          <TextInput
+            isDisabled
+            isRequired
+            type="text"
+            id="model-name"
+            name="registered-model-prefilled"
+            value={options.find(({ value }) => value === registeredModelId)?.content}
+          />
+          <fieldset aria-hidden="true" className="form-fieldset">
+            <legend className="form-fieldset-legend">
+              <span>Model Name</span>
+            </legend>
+          </fieldset>
+        </div>
+      </FormGroup>
     );
   }
 

diff --git a/...tend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx b/...tend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationCommonFormSections.tsx
@@ -296,7 +296,7 @@ const RegistrationCommonFormSections: React.FC<RegistrationCommonFormSectionsPro
                 </fieldset>
               </div>
             </FormGroup>
-            <FormHelperText>
+            <FormHelperText className="path-helper-text">
               <HelperText>
                 <HelperTextItem>
                   Enter a path to a model or folder. This path cannot point to a root folder.

diff --git a/clients/ui/frontend/src/style/MUI-theme.scss b/clients/ui/frontend/src/style/MUI-theme.scss
@@ -146,7 +146,7 @@
   color: var(--mui-palette-text-disabled);
 }
 
-.pf-v6-c-form__helper-text {
+.pf-v6-c-form__helper-text.path-helper-text {
   margin-inline-start: var(--pf-t--global--spacer--lg);
 }