feat(Feedback): Update structure and styles for v6

patternfly · Apr 19, 2024 · 89c3544 · 89c3544
1 parent a1940c4
commit 89c3544
Show file tree

Hide file tree

Showing 3 changed files with 394 additions and 268 deletions.
diff --git a/packages/module/src/Feedback/Feedback.scss b/packages/module/src/Feedback/Feedback.scss
@@ -1,62 +1,63 @@
 .chr-c-feedback-modal {
-  margin: 0;
-  padding: 0;
+  --pf-v6-c-modal-box__close--sibling--MarginRight: 0;
 
-  .pf-c-content {
-    margin-bottom: var(--pf-t--global--spacer--md);
+  .pf-v6-c-modal-box__close {
+    z-index: inherit;
   }
+}
 
-  .pf-c-modal-box__body {
-    padding: 0;
-    margin: 0;
-  }
-  .pf-c-modal-box > .pf-c-button + *{
-    margin-right: 0;
-  }
-  & .pf-c-modal-box__body {
-    &:last-child {
-      padding-bottom: 0;
-    }
-  }
+.chr-c-feedback-description {
+  margin-inline-end: 0 !important;
 }
 
-.chr-c-feedback-cards {
-  margin: var(--pf-t--global--spacer--sm);
+.chr-c-feedback-content {
+  padding: var(--pf-t--global--spacer--xl);
+  gap: var(--pf-t--global--spacer--md);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
-.chr-c-feedback-card-title {
-  color: var(--pf-t--global--text--color--link--default);
+.chr-c-feedback-heading {
+  padding: 0 37px var(--pf-t--global--spacer--sm) 0;
 }
 
-.chr-c-feedback {
-  width: 100%;
+.chr-c-feedback-content-main {
+  max-height: 450px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  align-self: stretch;
 }
 
-.chr-c-feedback-content {
+.chr-c-feedback-cards {
+  gap: var(--pf-t--global--spacer--md);
   display: flex;
   flex-direction: column;
-  padding-right: var(--pf-t--global--spacer--lg);
-  padding-top: var(--pf-t--global--spacer--lg);
-  margin: var(--pf-t--global--spacer--md);
-}
+  align-items: flex-start;
+  padding: inherit;
 
-.chr-c-feedback-button {
-  margin: var(--pf-t--global--spacer--sm);
-  text-align: left;
-  position: absolute;
-  bottom: var(--pf-t--global--spacer--md);
-}
+  .pf-v6-c-card {
+    width: 100%;
 
-.chr-c-feedback-footer-button {
-  margin: var(--pf-t--global--spacer--md);
+    .pf-v6-c-card__title-text {
+      color: var(--pf-t--global--text--color--regular);
+    }
+  }
 }
 
-.chr-c-feedback-buttons {
-  margin: var(--pf-t--global--spacer--sm);
-  position: absolute;
-  bottom: var(--pf-t--global--spacer--md);
+.chr-c-feedback-footer {
+  display: flex;
+  align-self: stretch;
+  flex-wrap: wrap;
+  padding: 0 0 var(--pf-t--global--spacer--sm) 0;
+  margin-top: auto;
+  box-shadow: none;
+  column-gap: var(--pf-t--global--spacer--xl);
+
+  .pf-v6-c-action-list__group {
+    flex-wrap: wrap;
+  }
 }
 
 .chr-c-feedback-success-content {
@@ -80,3 +81,13 @@
 .chr-c-feedback-text-area {
   resize: none;
 }
+
+@media (max-width: 480px) {
+  .chr-c-feedback-content-main {
+    max-height: var(--pf-v6-c-panel__main--MaxHeight);
+  }
+
+  .chr-c-feedback-image {
+    display: none;
+  }
+}
diff --git a/packages/module/src/Feedback/FeedbackForm.tsx b/packages/module/src/Feedback/FeedbackForm.tsx
@@ -1,5 +1,8 @@
 import React, { ReactNode, useState } from 'react';
 import {
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
   Alert,
   Button,
   Checkbox,
@@ -43,7 +46,7 @@ export const FeedbackForm = ({
   feedbackType,
   checkboxDescription,
   textAreaHidden = false,
-  submitTitle,
+  submitTitle
 }: FeedbackFormProps) => {
   const intl = React.useContext(LocaleContext);
   const [currentEmail, setCurrentEmail] = useState(email ? email : '');
@@ -60,38 +63,36 @@ export const FeedbackForm = ({
     }
   }
 
-
-  const validateEmail = (email: string) => email
+  const validateEmail = (email: string) =>
+    email
       .toLowerCase()
       .match(
         /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
       );
 
   const isSubmitButtonDisabled = () => {
     if (feedbackType !== '[Research Opportunities]') {
-      if(textAreaValue.length > 1 && checked &&  validateEmail(currentEmail)) {
+      if (textAreaValue.length > 1 && checked && validateEmail(currentEmail)) {
         return false;
-      } else if(textAreaValue.length > 1 && !checked){
+      } else if (textAreaValue.length > 1 && !checked) {
         return false;
       }
-      return true
-     }
-     else {
+      return true;
+    } else {
       if (checked && validateEmail(currentEmail)) {
         return false;
-      }
-      else {
+      } else {
         return true;
       }
-     }
-  }
+    }
+  };
   return (
     <div className="chr-c-feedback-content">
-      <TextContent>
+      <TextContent className="chr-c-feedback-heading">
         <Text component={TextVariants.h1}>{modalTitle}</Text>
         {modalDescription}
       </TextContent>
-      <Form>
+      <Form className="chr-c-feedback-content-main">
         {textAreaHidden ? (
           ''
         ) : (
@@ -118,37 +119,69 @@ export const FeedbackForm = ({
       {checked ? (
         <>
           <div className="pf-u-font-family-heading-sans-serif chr-c-feedback-email">{intl.email}</div>
-          <TextInput value={currentEmail} onChange={(_event, value) => setCurrentEmail(value)}
+          <TextInput
+            value={currentEmail}
+            onChange={(_event, value) => setCurrentEmail(value)}
             validated={emailValid}
-            onBlur={()=>!validateEmail(currentEmail) ? setEmailValid(ValidatedOptions.error) : setEmailValid(ValidatedOptions.default)}
+            onBlur={() =>
+              !validateEmail(currentEmail)
+                ? setEmailValid(ValidatedOptions.error)
+                : setEmailValid(ValidatedOptions.default)
+            }
             id="textInput-basic-2"
             type="email"
             aria-label="Error state username example"
           />
-          {emailValid === ValidatedOptions.error ? <Alert variant="danger" isInline isPlain title="Email address is invalid." /> : <></>}
+          {emailValid === ValidatedOptions.error ? (
+            <Alert variant="danger" isInline isPlain title="Email address is invalid." />
+          ) : (
+            <></>
+          )}
         </>
       ) : (
         ''
       )}
-      <div className="chr-c-feedback-buttons">
-        <Button
-          ouiaId="submit-feedback"
-          className="chr-c-feedback-footer-button"
-          key="confirm"
-          variant="primary"
-          // eslint-disable-next-line no-nested-ternary
-          isDisabled={isSubmitButtonDisabled()}
-          onClick={handleModalSubmission}
-        >
-          {submitTitle}
-        </Button>
-        <Button ouiaId="back-feedback" className="chr-c-feedback-footer-button" key="back" variant="secondary" onClick={onClickBack}>
-          {intl.back}
-        </Button>
-        <Button ouiaId="cancel-feedback" className="chr-c-feedback-footer-button" key="cancel" variant="link" onClick={onCloseModal}>
-          {intl.cancel}
-        </Button>
-      </div>
+      <ActionList className="chr-c-feedback-footer">
+        <ActionListGroup>
+          <ActionListItem>
+            <Button
+              ouiaId="submit-feedback"
+              className="chr-c-feedback-footer-button"
+              key="confirm"
+              variant="primary"
+              // eslint-disable-next-line no-nested-ternary
+              isDisabled={isSubmitButtonDisabled()}
+              onClick={handleModalSubmission}
+            >
+              {submitTitle}
+            </Button>
+          </ActionListItem>
+          <ActionListItem>
+            <Button
+              ouiaId="back-feedback"
+              className="chr-c-feedback-footer-button"
+              key="back"
+              variant="secondary"
+              onClick={onClickBack}
+            >
+              {intl.back}
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
+        <ActionListGroup>
+          <ActionListItem>
+            <Button
+              ouiaId="cancel-feedback"
+              className="chr-c-feedback-footer-button"
+              key="cancel"
+              variant="link"
+              onClick={onCloseModal}
+            >
+              {intl.cancel}
+            </Button>
+          </ActionListItem>
+        </ActionListGroup>
+      </ActionList>
     </div>
   );
 };