NCL-7659 Set the width of ContentBox responsively

project-ncl · Jul 18, 2023 · 098cbe4 · 098cbe4
1 parent 5097ed5
commit 098cbe4
Show file tree

Hide file tree

Showing 11 changed files with 5,746 additions and 5,541 deletions.
diff --git a/src/components/ArtifactsPage/__tests__/__snapshots__/ArtifactsPage.test.tsx.snap b/src/components/ArtifactsPage/__tests__/__snapshots__/ArtifactsPage.test.tsx.snap
diff --git a/src/components/Attributes/AttributesItem.tsx b/src/components/Attributes/AttributesItem.tsx
@@ -13,13 +13,13 @@ interface IAttributesItemProps {
 
 export const AttributesItem = ({ children, title, tooltip }: PropsWithChildren<IAttributesItemProps>) => (
   <>
-    <GridItem xl={3} lg={4} md={6} sm={12} className={styles['name']}>
+    <GridItem xl={3} lg={4} md={4} sm={12} className={styles['name']}>
       <>
         {title}
         {tooltip && <TooltipWrapper tooltip={tooltip} />}
       </>
     </GridItem>
-    <GridItem xl={9} lg={8} md={6} sm={12}>
+    <GridItem xl={9} lg={8} md={8} sm={12}>
       {/* zero is falsy */}
       {children || children === 0 ? children : <EmptyStateSymbol variant="text" />}
     </GridItem>

diff --git a/src/components/BuildsPage/__tests__/__snapshots__/BuildsPage.test.tsx.snap b/src/components/BuildsPage/__tests__/__snapshots__/BuildsPage.test.tsx.snap
diff --git a/src/components/ContentBox/ContentBox.tsx b/src/components/ContentBox/ContentBox.tsx
@@ -1,3 +1,4 @@
+import { Grid, GridItem } from '@patternfly/react-core';
 import { PropsWithChildren } from 'react';
 
 import { BoxDescription, IDescription } from 'components/BoxDescription/BoxDescription';
@@ -18,6 +19,7 @@ interface IContentBoxProps {
   title?: string;
   contentHeight?: string;
   description?: IDescription;
+  responsiveWidth?: boolean;
 }
 
 export const ContentBox = ({
@@ -35,6 +37,7 @@ export const ContentBox = ({
   title,
   contentHeight,
   description,
+  responsiveWidth = false,
 }: PropsWithChildren<IContentBoxProps>) => {
   const classList = [];
 
@@ -86,7 +89,13 @@ export const ContentBox = ({
         </div>
       )}
       {description && <BoxDescription description={description} />}
-      <div style={contentHeight ? { height: contentHeight } : undefined}>{children}</div>
+      <div style={contentHeight ? { height: contentHeight } : undefined}>
+        <Grid>
+          <GridItem span={12} xl2={responsiveWidth ? 10 : 12}>
+            {children}
+          </GridItem>
+        </Grid>
+      </div>
     </div>
   );
 };
diff --git a/src/components/DemoPage/DemoPage.tsx b/src/components/DemoPage/DemoPage.tsx
@@ -244,96 +244,94 @@ export const DemoPage = () => {
   };
 
   const formComponent = (
-    <ContentBox padding>
-      <div className="w-70">
-        <Form
-          onSubmit={(e) => {
-            e.preventDefault();
-          }}
+    <ContentBox padding responsiveWidth>
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <FormGroup
+          isRequired
+          label="Input Field"
+          fieldId="inputFieldA"
+          helperText={
+            <FormHelperText isHidden={fields.inputFieldA.state !== 'error'} isError>
+              {fields.inputFieldA.errorMessages?.join(' ')}
+            </FormHelperText>
+          }
         >
-          <FormGroup
+          <TextInput
             isRequired
-            label="Input Field"
-            fieldId="inputFieldA"
-            helperText={
-              <FormHelperText isHidden={fields.inputFieldA.state !== 'error'} isError>
-                {fields.inputFieldA.errorMessages?.join(' ')}
-              </FormHelperText>
-            }
+            validated={fields.inputFieldA.state}
+            type="text"
+            id="inputFieldA"
+            name="inputFieldA"
+            value={fields.inputFieldA.value as string}
+            autoComplete="off"
+            onChange={(text) => {
+              onChange('inputFieldA', text);
+            }}
+          />
+        </FormGroup>
+        <FormGroup label="Text Area" fieldId="textAreaA">
+          <TextArea
+            id="textAreaA"
+            name="textAreaA"
+            value={fields.textAreaA.value as string}
+            onChange={(text) => {
+              onChange('textAreaA', text);
+            }}
+            autoResize
+          />
+        </FormGroup>
+        <FormGroup
+          isRequired
+          label="Filtered Select"
+          fieldId="selectA"
+          helperText={
+            <FormHelperText isHidden={fields.selectA.state !== 'error'} isError>
+              {fields.selectA.errorMessages?.join(' ')}
+            </FormHelperText>
+          }
+        >
+          <Select
+            validated={fields.selectA.state}
+            id="selectA"
+            variant={SelectVariant.typeahead}
+            typeAheadAriaLabel="Select an option"
+            onToggle={(isOpen) => {
+              setIsSelectOpen(isOpen);
+            }}
+            onSelect={(event, selection, isPlaceholder) => {
+              if (isPlaceholder) clearSelection();
+              else {
+                onChange('selectA', selection);
+                setIsSelectOpen(false);
+              }
+            }}
+            onClear={clearSelection}
+            selections={fields.selectA.value}
+            isOpen={isSelectOpen}
+            aria-labelledby={'selectA'}
+            placeholderText="Select an option"
           >
-            <TextInput
-              isRequired
-              validated={fields.inputFieldA.state}
-              type="text"
-              id="inputFieldA"
-              name="inputFieldA"
-              value={fields.inputFieldA.value as string}
-              autoComplete="off"
-              onChange={(text) => {
-                onChange('inputFieldA', text);
-              }}
-            />
-          </FormGroup>
-          <FormGroup label="Text Area" fieldId="textAreaA">
-            <TextArea
-              id="textAreaA"
-              name="textAreaA"
-              value={fields.textAreaA.value as string}
-              onChange={(text) => {
-                onChange('textAreaA', text);
-              }}
-              autoResize
-            />
-          </FormGroup>
-          <FormGroup
-            isRequired
-            label="Filtered Select"
-            fieldId="selectA"
-            helperText={
-              <FormHelperText isHidden={fields.selectA.state !== 'error'} isError>
-                {fields.selectA.errorMessages?.join(' ')}
-              </FormHelperText>
-            }
+            {selectOptions.map((option: any, index: any) => (
+              <SelectOption key={index} value={option.value} />
+            ))}
+          </Select>
+        </FormGroup>
+        <ActionGroup>
+          <Button
+            variant="primary"
+            isDisabled={isSubmitDisabled}
+            onClick={() => {
+              onSubmit();
+            }}
           >
-            <Select
-              validated={fields.selectA.state}
-              id="selectA"
-              variant={SelectVariant.typeahead}
-              typeAheadAriaLabel="Select an option"
-              onToggle={(isOpen) => {
-                setIsSelectOpen(isOpen);
-              }}
-              onSelect={(event, selection, isPlaceholder) => {
-                if (isPlaceholder) clearSelection();
-                else {
-                  onChange('selectA', selection);
-                  setIsSelectOpen(false);
-                }
-              }}
-              onClear={clearSelection}
-              selections={fields.selectA.value}
-              isOpen={isSelectOpen}
-              aria-labelledby={'selectA'}
-              placeholderText="Select an option"
-            >
-              {selectOptions.map((option: any, index: any) => (
-                <SelectOption key={index} value={option.value} />
-              ))}
-            </Select>
-          </FormGroup>
-          <ActionGroup>
-            <Button
-              variant="primary"
-              isDisabled={isSubmitDisabled}
-              onClick={() => {
-                onSubmit();
-              }}
-            >
-              Submit
-            </Button>
-          </ActionGroup>
-        </Form>
-      </div>
+            Submit
+          </Button>
+        </ActionGroup>
+      </Form>
     </ContentBox>
   );