feat(beta): Updated to the latest beta and merged updates from main. (#…

…74) * chore(pf-issue): Updated github actions to put issues in PatternFly Issues (#70) * feat(beta): Updated to the latest beta and added updates from main. * fix(beta): Removed cache file. * fix: Fixed padding issue and removed translate example. * fix: Added translation example back.
patternfly · Aug 7, 2024 · e67f87e · e67f87e
1 parent a3888d8
commit e67f87e
Show file tree

Hide file tree

Showing 13 changed files with 26,142 additions and 1,770 deletions.
diff --git a/.github/workflows/extensions.yml b/.github/workflows/extensions.yml
@@ -12,5 +12,5 @@ jobs:
  steps:
  - uses: actions/add-to-project@v0.3.0
  with:
- project-url: https://github.com/orgs/patternfly/projects/12
+ project-url: https://github.com/orgs/patternfly/projects/7
  github-token: ${{ secrets.GH_PROJECTS }}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -59,5 +59,6 @@
  "jest-canvas-mock": "^2.4.0",
  "serve": "^14.1.2",
  "rimraf": "^2.6.2"
- }
+ },
+ "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/packages/module/package.json b/packages/module/package.json
@@ -33,8 +33,8 @@
  },
  "homepage": "https://github.com/patternfly/react-user-feedback#readme",
  "dependencies": {
- "@patternfly/react-core": "6.0.0-alpha.61",
- "@patternfly/react-icons": "6.0.0-alpha.23"
+ "@patternfly/react-core": "6.0.0-alpha.94",
+ "@patternfly/react-icons": "6.0.0-alpha.34"
  },
  "peerDependencies": {
  "react": "^17 || ^18",
@@ -50,10 +50,10 @@
  "@types/react": "^18",
  "@types/react-dom": "^18",
  "@patternfly/patternfly-a11y": "^4.3.1",
- "@patternfly/documentation-framework": "6.0.0-alpha.41",
- "@patternfly/patternfly":"6.0.0-alpha.139",
- "@patternfly/react-table": "6.0.0-alpha.61",
- "@patternfly/react-code-editor": "6.0.0-alpha.61",
+ "@patternfly/documentation-framework": "6.0.0-alpha.69",
+ "@patternfly/patternfly":"6.0.0-alpha.205",
+ "@patternfly/react-table": "6.0.0-alpha.95",
+ "@patternfly/react-code-editor": "6.0.0-alpha.94",
  "node-sass-package-importer": "^5.3.2",
  "fs-extra": "^9.1.0",
  "glob": "^7.2.3",

diff --git a/packages/module/patternfly-docs/generated/extensions/user-feedback/design-guidelines.js b/packages/module/patternfly-docs/generated/extensions/user-feedback/design-guidelines.js
@@ -40,7 +40,7 @@ const Component = () => (
  </strong>
  {` is a modal component that products can use to collect asynchronous feedback from users.`}
  </p>
- <AutoLinkHeader {...{"id":"elements","size":"h2","className":"ws-title ws-h2"}}>
+ <AutoLinkHeader {...{"id":"elements","headingLevel":"h2","className":"ws-title ws-h2"}}>
  {`Elements`}
  </AutoLinkHeader>
  <p {...{"className":"pf-v6-c-content--p ws-p "}}>
@@ -76,7 +76,7 @@ const Component = () => (
  <p {...{"className":"pf-v6-c-content--p ws-p "}}>
  {`Each of these elements can be customized to fit a product's needs.`}
  </p>
- <AutoLinkHeader {...{"id":"behavior","size":"h2","className":"ws-title ws-h2"}}>
+ <AutoLinkHeader {...{"id":"behavior","headingLevel":"h2","className":"ws-title ws-h2"}}>
  {`Behavior`}
  </AutoLinkHeader>
  <p {...{"className":"pf-v6-c-content--p ws-p "}}>
@@ -89,10 +89,10 @@ const Component = () => (
  <img src={srcImport1} width={srcImport1.width} height={srcImport1.height} {...{"alt":"Image of expanded dropdown menu with link to sharing feedback","className":"ws-img "}}>
  </img>
  </p>
- <AutoLinkHeader {...{"id":"variations","size":"h2","className":"ws-title ws-h2"}}>
+ <AutoLinkHeader {...{"id":"variations","headingLevel":"h2","className":"ws-title ws-h2"}}>
  {`Variations`}
  </AutoLinkHeader>
- <AutoLinkHeader {...{"id":"modal-items-open-forms-within-the-modal","size":"h3","className":"ws-title ws-h3"}}>
+ <AutoLinkHeader {...{"id":"modal-items-open-forms-within-the-modal","headingLevel":"h3","className":"ws-title ws-h3"}}>
  {`Modal items open forms within the modal`}
  </AutoLinkHeader>
  <p {...{"className":"pf-v6-c-content--p ws-p "}}>
@@ -139,7 +139,7 @@ const Component = () => (
  </p>
  </li>
  </ul>
- <AutoLinkHeader {...{"id":"modal-items-link-to-external-urls","size":"h3","className":"ws-title ws-h3"}}>
+ <AutoLinkHeader {...{"id":"modal-items-link-to-external-urls","headingLevel":"h3","className":"ws-title ws-h3"}}>
  {`Modal items link to external URLs`}
  </AutoLinkHeader>
  <p {...{"className":"pf-v6-c-content--p ws-p "}}>

diff --git a/packages/module/patternfly-docs/generated/extensions/user-feedback/react.js b/packages/module/patternfly-docs/generated/extensions/user-feedback/react.js
@@ -76,8 +76,7 @@ const pageData = {
  "Basic modal",
  "Advanced modal",
  "Advanced that autofills an email address",
- "Modal with asynchronous call support",
- "Modal with internationalization support"
+ "Modal with asynchronous call support"
  ]
 };
 pageData.liveContext = {
@@ -140,42 +139,24 @@ pageData.examples = {
  </code>
  {` function to send data to a backend service.`}
  </p>
- </Example>,
- 'Modal with internationalization support': props => 
- <Example {...pageData} {...props} {...{"code":"const i18nExample = {\n getSupport: 'Lorem ipsum dolor sit amet support',\n back: 'Lorem ipsum dolor sit amet back',\n bugReported: 'Lorem ipsum dolor sit amet Bug Reported',\n cancel: 'Cancel',\n close: 'Close',\n describeBug: \n 'Lorem ipsum dolor sit amet Describe the bug you encountered. For urgent issues, open a support case instead.',\n describeBugUrgentCases: \n 'Lorem ipsum dolor sit amet Describe the bug you encountered. For urgent issues, open a support case instead.',\n describeReportBug: \n 'Lorem ipsum dolor sit amet Describe the bug you encountered. Include where it is located and what action caused it. If this issue is urgent or blocking your workflow,',\n directInfluence:\n 'Lorem ipsum dolor sit amet your feedback will directly influence the future of Red Hat’s products. Opt in below to hear about future research opportunities via email.',\n email: 'Lorem ipsum dolor sit amet Email',\n enterFeedback: 'Lorem ipsum dolor sit amet Enter your feedback',\n feedback: 'Lorem ipsum dolor sit amet Feedback',\n feedbackSent: 'Lorem ipsum dolor sit amet Feedback Sent',\n helpUsImproveHCC: 'Lorem ipsum dolor sit amet Help us improve the Red Hat OpenShift.',\n howIsConsoleExperience: 'Lorem ipsum dolor sit amet What has your experience been like so far?',\n joinMailingList: 'Lorem ipsum dolor sit ametJoin mailing list',\n informDirectionDescription: \n 'Lorem ipsum dolor sit ametBy participating in feedback sessions, usability tests, and interviews with our',\n informDirection: 'Lorem ipsum dolor sit ametInform the direction of Red Hat',\n learnAboutResearchOpportunities: 'Lorem ipsum dolor sit ametLearn about opportunities to share your feedback with our User Research Team.',\n openSupportCase: 'Lorem ipsum dolor sit amet Support Case',\n problemProcessingRequest: \n 'Lorem ipsum dolor sit ametThere was a problem processing the request. Try reloading the page. If the problem persists, contact',\n support: 'Lorem ipsum dolor sit ametRed Hat support',\n reportABug: 'Lorem ipsum dolor sit ametReport a bug',\n responseSent: 'Lorem ipsum dolor sit ametResponse sent',\n researchOpportunities: 'Lorem ipsum dolor sit ametYes, I would like to hear about research opportunities',\n shareFeedback: 'Lorem ipsum dolor sit ametShare feedback',\n shareYourFeedback: 'Lorem ipsum dolor sit ametShare your feedback with us!',\n somethingWentWrong: 'Lorem ipsum dolor sit ametSomething went wrong',\n submitFeedback: 'Submit feedback',\n teamWillReviewBug: 'Lorem ipsum dolor sit ametWe appreciate your feedback and our team will review your report shortly',\n tellAboutExperience: 'Lorem ipsum dolor sit ametTell us about your experience',\n thankYouForFeedback: 'Lorem ipsum dolor sit ametThank you, we appreciate your feedback.',\n thankYouForInterest: \n 'Lorem ipsum dolor sit ametThank you for your interest in user research. You have been added to our mailing list.',\n userResearchTeam: 'Lorem ipsum dolor sit ametUser Research Team',\n weNeverSharePersonalInformation: \n 'Lorem ipsum dolor sit ametWe never share your personal information, and you can opt out at any time.',\n };\n\n\n /* eslint-disable no-debugger */\nimport React from 'react';\nimport { FeedbackModal} from '@patternfly/react-user-feedback';\nimport { Button } from '@patternfly/react-core';\n\nexport const AdvancedExample: React.FunctionComponent = () => {\n const [isOpen, setIsOpen] = React.useState<boolean>(false);\n const handleButtonClicked = () => {setIsOpen(true)}; \n return <>\n <Button onClick={handleButtonClicked}>Show Modal</Button>\n <FeedbackModal \n feedbackLocale={i18nExample}\n email= \"test@redhat.com\" \n onShareFeedback={()=>\n // Example of a successful callback\n true\n }\n onJoinMailingList={()=>\n true\n }\n onOpenSupportCase='https://pf-user-feedback-extension-form-demos.surge.sh/requestSupport.html'\n onReportABug={()=>true}\n isOpen={isOpen}\n onClose={()=>setIsOpen(false)}/>\n </>\n}","title":"Modal with internationalization support","lang":"js","className":""}}>
-
- <p {...{"className":"pf-v6-c-content--p ws-p "}}>
- {`To customize the content displayed in the feedback modal, pass in a custom `}
-
- <code {...{"className":"ws-code "}}>
- {`i18n`}
- </code>
- {` object with values for each property of`}
-
- <code {...{"className":"ws-code "}}>
- {`<FeedbackModal>`}
- </code>
- {`. This allows you to prepare a modal for different languages and requirements.`}
- </p>
  </Example>
 };
 
 const Component = () => (
  <React.Fragment>
- <AutoLinkHeader {...{"id":"about","size":"h2","className":"ws-title ws-h2"}}>
+ <AutoLinkHeader {...{"id":"about","headingLevel":"h2","className":"ws-title ws-h2"}}>
  {`About`}
  </AutoLinkHeader>
  <p {...{"className":"pf-v6-c-content--p ws-p "}}>
  {`The user feedback extension is a PatternFly React based component used to collect user feedback. Examples of how to use this extension are documented below. This extensions allows users to submit feedback, report a bug, request support, as well as join a mailing list to stay updated on the latest news and research opportunities.`}
  </p>
- <AutoLinkHeader {...{"id":"examples","size":"h2","className":"ws-title ws-h2"}}>
+ <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
  {`Examples`}
  </AutoLinkHeader>
  {React.createElement(pageData.examples["Basic modal"])}
  {React.createElement(pageData.examples["Advanced modal"])}
  {React.createElement(pageData.examples["Advanced that autofills an email address"])}
  {React.createElement(pageData.examples["Modal with asynchronous call support"])}
- {React.createElement(pageData.examples["Modal with internationalization support"])}
  </React.Fragment>
 );
 Component.displayName = 'ExtensionsUserFeedbackReactDocs';

diff --git a/packages/module/patternfly-docs/generated/index.js b/packages/module/patternfly-docs/generated/index.js
@@ -2,8 +2,8 @@ module.exports = {
  '/extensions/user-feedback/react': {
  id: "User feedback",
  title: "User feedback",
- toc: [{"text":"About"},{"text":"Examples"},[{"text":"Basic modal"},{"text":"Advanced modal"},{"text":"Advanced that autofills an email address"},{"text":"Modal with asynchronous call support"},{"text":"Modal with internationalization support"}]],
- examples: ["Basic modal","Advanced modal","Advanced that autofills an email address","Modal with asynchronous call support","Modal with internationalization support"],
+ toc: [{"text":"About"},{"text":"Examples"},[{"text":"Basic modal"},{"text":"Advanced modal"},{"text":"Advanced that autofills an email address"},{"text":"Modal with asynchronous call support"}]],
+ examples: ["Basic modal","Advanced modal","Advanced that autofills an email address","Modal with asynchronous call support"],
  section: "extensions",
  subsection: "",
  source: "react",

diff --git a/packages/module/src/Feedback/Feedback.scss b/packages/module/src/Feedback/Feedback.scss
@@ -78,6 +78,9 @@
  background-color: var(--pf-t--global--background--color--secondary--default);
 }
 
+.chr-c-feedback-flex {
+ margin-right: 0px;
+}
 .chr-c-feedback-text-area {
  resize: none;
 }

diff --git a/packages/module/src/Feedback/FeedbackError.tsx b/packages/module/src/Feedback/FeedbackError.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Button, Content, ContentVariants } from '@patternfly/react-core';
 import ErrorIcon from '@patternfly/react-icons/dist/esm/icons/error-circle-o-icon';
 import { LocaleContext } from '../context/LocaleContext';
 
@@ -14,15 +14,15 @@ const FeedbackError = ({ onCloseModal }: FeedbackErrorProps) => {
  return (
  <div className="chr-c-feedback-success-content">
  <ErrorIcon color="var(--pf-global--danger-color--100)" className="pf-u-mx-auto" />
- <TextContent>
- <Text component={TextVariants.h1}>{intl.somethingWentWrong}</Text>
- <Text>
+ <>
+ <Content component={ContentVariants.h1}>{intl.somethingWentWrong}</Content>
+ <Content>
  {intl.problemProcessingRequest}{' '}
  <a target="_blank" href="https://access.redhat.com/support" rel="noreferrer">
  {intl.getSupport}
  </a>
- </Text>
- </TextContent>
+ </Content>
+ </>
  <Button variant="primary" onClick={onCloseModal}>
  {intl.close}
  </Button>

diff --git a/packages/module/src/Feedback/FeedbackForm.tsx b/packages/module/src/Feedback/FeedbackForm.tsx
@@ -8,11 +8,10 @@ import {
  Checkbox,
  Form,
  FormGroup,
- Text,
  TextArea,
- TextContent,
+ Content,
  TextInput,
- TextVariants,
+ ContentVariants,
  ValidatedOptions
 } from '@patternfly/react-core';
 import { LocaleContext } from '../context/LocaleContext';
@@ -88,10 +87,10 @@ export const FeedbackForm = ({
  };
  return (
  <div className="chr-c-feedback-content">
- <TextContent className="chr-c-feedback-heading">
- <Text component={TextVariants.h1}>{modalTitle}</Text>
+ <div className="chr-c-feedback-heading">
+ <Content component={ContentVariants.h1}>{modalTitle}</Content>
  {modalDescription}
- </TextContent>
+ </div>
  <Form className="chr-c-feedback-content-main">
  {textAreaHidden ? (
  ''

diff --git a/packages/module/src/Feedback/FeedbackModalInternal.tsx b/packages/module/src/Feedback/FeedbackModalInternal.tsx
@@ -1,23 +1,24 @@
 import React, { memo, useState, useRef } from 'react';
 import {
- Button,
- Card,
- CardBody,
- CardHeader,
- CardTitle,
- Flex,
- FlexItem,
- Modal,
- ModalVariant,
- Panel,
- PanelFooter,
- PanelHeader,
- PanelMain,
- PanelMainBody,
- Text,
- TextContent,
- TextVariants
+ Button,
+ Card,
+ CardBody,
+ CardHeader,
+ CardTitle,
+ Flex,
+ FlexItem,
+ Panel,
+ PanelFooter,
+ PanelHeader,
+ PanelMain,
+ PanelMainBody,
+ Content,
+ ContentVariants
 } from '@patternfly/react-core';
+import {
+ Modal,
+ ModalVariant
+} from '@patternfly/react-core/deprecated';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 
 import feedbackImage from '../images/pf_feedback.svg';
@@ -82,14 +83,13 @@ export const FeedbackModalInternal = memo(
  return (
  <Panel isScrollable className="chr-c-feedback-content">
  <PanelHeader className="chr-c-feedback-heading">
- <TextContent>
  <FlexItem>
- <Text component={TextVariants.h1}>{intl.tellAboutExperience}</Text>
+ <Content component={ContentVariants.h1}>{intl.tellAboutExperience}</Content>
  </FlexItem>
  <FlexItem>
- <Text>{intl.helpUsImproveHCC}</Text>
+ <Content component="p">{intl.helpUsImproveHCC}</Content>
  </FlexItem>
-  </TextContent>
+
  </PanelHeader>
  <PanelMain tabIndex={0} className='chr-c-feedback-content-main'>
  <PanelMainBody className="chr-c-feedback-cards">
@@ -160,9 +160,9 @@ export const FeedbackModalInternal = memo(
  }}
  ></CardHeader>
  <CardTitle>
- <Text>
+ <Content component="p">
  {intl.openSupportCase} <ExternalLinkAltIcon />
- </Text>
+ </Content>
  </CardTitle>
  <CardBody>{intl.getSupport}</CardBody>
  </Card>
@@ -187,10 +187,10 @@ export const FeedbackModalInternal = memo(
  }}
  ></CardHeader>
  <CardTitle>
- <Text>
+ <Content component="p">
  {intl.informDirection}{' '}
  {typeof onJoinMailingList === 'string' ? <ExternalLinkAltIcon /> : null}
- </Text>
+ </Content>
  </CardTitle>
  <CardBody>{intl.learnAboutResearchOpportunities}</CardBody>
  </Card>
@@ -248,16 +248,16 @@ export const FeedbackModalInternal = memo(
  handleFeedbackError={() => setModalPage('feedbackError')}
  modalTitle={intl.reportABug}
  modalDescription={
- <Text>
+ <Content component="p">
  {intl.describeReportBug}{' '}
- <Text
+ <Content
  component="a"
  href="https://access.redhat.com/support/cases/#/case/new/open-case?caseCreate=true"
  target="_blank"
  >
  {intl.openSupportCase} <ExternalLinkAltIcon />
- </Text>
- </Text>
+ </Content>
+ </Content>
  }
  feedbackType="Bug"
  checkboxDescription={`${intl.learnAboutResearchOpportunities} ${intl.weNeverSharePersonalInformation}`}
@@ -281,13 +281,13 @@ export const FeedbackModalInternal = memo(
  handleFeedbackError={() => setModalPage('feedbackError')}
  modalTitle={intl.informDirection}
  modalDescription={
- <Text>
+ <Content component="p">
  {intl.informDirectionDescription}
- <Text component="a" href="https://www.redhat.com/en/about/user-research" target="_blank">
+ <Content component="a" href="https://www.redhat.com/en/about/user-research" target="_blank">
  {intl.userResearchTeam}
- </Text>
+ </Content>
  {intl.directInfluence}
- </Text>
+ </Content>
  }
  feedbackType="[Research Opportunities]"
  textAreaHidden={true}

diff --git a/packages/module/src/Feedback/FeedbackSuccess.tsx b/packages/module/src/Feedback/FeedbackSuccess.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Button, Content, ContentVariants } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 
 import './Feedback.scss';
@@ -16,10 +16,8 @@ const FeedbackSuccess = ({ onCloseModal, successTitle, successDescription }: Fee
  return (
  <div className="chr-c-feedback-success-content">
  <CheckIcon color="var(--pf-global--success-color--100)" className="pf-u-mx-auto" />
- <TextContent>
- <Text component={TextVariants.h1}>{successTitle}</Text>
- <Text>{successDescription}</Text>
- </TextContent>
+ <Content component={ContentVariants.h1}>{successTitle}</Content>
+ <Content>{successDescription}</Content>
  <Button variant="primary" onClick={onCloseModal}>
  {intl.close}
  </Button>