formActionsContainer instead of HStack

NDLANO · Nov 8, 2024 · 38d9ebb · 38d9ebb
1 parent 8e77217
commit 38d9ebb
Show file tree

Hide file tree

Showing 20 changed files with 74 additions and 89 deletions.
diff --git a/src/components/AlertDialog/AlertDialog.tsx b/src/components/AlertDialog/AlertDialog.tsx
@@ -6,13 +6,12 @@
  *
  */
 
-import { MouseEvent, ReactElement, ReactNode, useCallback, useRef } from "react";
+import { ReactNode, useCallback, useRef } from "react";
 import { Warning } from "@ndla/icons/editor";
 import {
   DialogRoot,
   DialogContent,
   DialogTitle,
-  Button,
   Text,
   MessageBox,
   DialogBody,
@@ -92,6 +91,7 @@ export const AlertDialog = ({ children, text, onCancel, title, show, label, seve
       open={!!show}
       onOpenChange={(details) => onOpenChange(details.open)}
       aria-label={label}
+      context="alert"
       onExitComplete={() => {
         focusedElementBeforeModalRef.current?.focus();
         focusedElementBeforeModalRef.current = null;

diff --git a/src/components/HeaderWithLanguage/DeleteLanguageVersion.tsx b/src/components/HeaderWithLanguage/DeleteLanguageVersion.tsx
@@ -11,7 +11,6 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { DeleteBinLine } from "@ndla/icons/action";
 import { Button } from "@ndla/primitives";
-import { HStack } from "@ndla/styled-system/jsx";
 import { useMessages } from "../../containers/Messages/MessagesProvider";
 import { deleteLanguageVersionAudio, deleteLanguageVersionSeries } from "../../modules/audio/audioApi";
 import { deleteLanguageVersionConcept } from "../../modules/concept/conceptApi";
@@ -36,6 +35,7 @@ import {
   toEditTopicArticle,
 } from "../../util/routeHelpers";
 import { AlertDialog } from "../AlertDialog/AlertDialog";
+import { FormActionsContainer } from "../FormikForm";
 
 const nonDeletableTypes = ["standard", "topic-article", "concept"];
 
@@ -131,12 +131,12 @@ const DeleteLanguageVersion = ({ id, language, supportedLanguages, type, disable
         onCancel={toggleShowDeleteWarning}
         text={t("form.workflow.deleteLanguageVersion.modal")}
       >
-        <HStack justify="flex-end" gap="xsmall">
+        <FormActionsContainer>
           <Button onClick={toggleShowDeleteWarning} variant="danger">
             {t("form.abort")}
           </Button>
           <Button onClick={deleteLanguageVersion}>{t("form.workflow.deleteLanguageVersion.button")}</Button>
-        </HStack>
+        </FormActionsContainer>
       </AlertDialog>
     </>
   );

diff --git a/src/components/SlateEditor/plugins/codeBlock/CodeBlock.tsx b/src/components/SlateEditor/plugins/codeBlock/CodeBlock.tsx
@@ -59,6 +59,7 @@ import CodeBlockEditor from "./CodeBlockEditor";
 import { CodeBlockType } from "../../../../interfaces";
 import { AlertDialog } from "../../../AlertDialog/AlertDialog";
 import { DialogCloseButton } from "../../../DialogCloseButton";
+import { FormActionsContainer } from "../../../FormikForm";
 
 interface Props extends RenderElementProps {
   element: CodeblockElement;
@@ -209,7 +210,7 @@ const CodeBlock = ({ attributes, editor, element, children }: Props) => {
         text={t("code.continue")}
         onCancel={() => setShowWarning(false)}
       >
-        <HStack justify="flex-end" gap="xsmall">
+        <FormActionsContainer>
           <Button variant="secondary" onClick={() => setShowWarning(false)}>
             {t("form.abort")}
           </Button>
@@ -222,7 +223,7 @@ const CodeBlock = ({ attributes, editor, element, children }: Props) => {
           >
             {t("alertModal.continue")}
           </Button>
-        </HStack>
+        </FormActionsContainer>
       </AlertDialog>
     </DialogRoot>
   );

diff --git a/src/components/SlateEditor/plugins/mathml/MathEditor.tsx b/src/components/SlateEditor/plugins/mathml/MathEditor.tsx
@@ -16,11 +16,11 @@ import { Content, Root, Trigger } from "@radix-ui/react-popover";
 import { colors, spacing, stackOrder } from "@ndla/core";
 import { Modal, ModalContent, ModalTrigger } from "@ndla/modal";
 import { Button } from "@ndla/primitives";
-import { HStack } from "@ndla/styled-system/jsx";
 import { MathmlElement } from ".";
 import EditMath, { MathMLType, emptyMathTag } from "./EditMath";
 import MathML from "./MathML";
 import { AlertDialog } from "../../../AlertDialog/AlertDialog";
+import { FormActionsContainer } from "../../../FormikForm";
 import mergeLastUndos from "../../utils/mergeLastUndos";
 
 const getInfoFromNode = (node: MathmlElement) => {
@@ -213,14 +213,14 @@ const MathEditor = ({ element, children, attributes, editor }: Props & RenderEle
           text={t("mathEditor.continue")}
           onCancel={() => setOpenDiscardModal(false)}
         >
-          <HStack justify="flex-end" gap="xsmall">
+          <FormActionsContainer>
             <Button variant="secondary" onClick={() => setOpenDiscardModal(false)}>
               {t("form.abort")}
             </Button>
             <Button variant="danger" onClick={onExit}>
               {t("alertModal.continue")}
             </Button>
-          </HStack>
+          </FormActionsContainer>
         </AlertDialog>
       </ModalContent>
     </Modal>

diff --git a/src/containers/ArticlePage/FrontpageArticlePage/components/FrontpageArticleFormContent.tsx b/src/containers/ArticlePage/FrontpageArticlePage/components/FrontpageArticleFormContent.tsx
@@ -23,6 +23,7 @@ import { EditMarkupLink } from "../../../../components/EditMarkupLink";
 import FieldHeader from "../../../../components/Field/FieldHeader";
 import { FormField } from "../../../../components/FormField";
 import FormikField from "../../../../components/FormikField";
+import { FormActionsContainer } from "../../../../components/FormikForm";
 import LastUpdatedLine from "../../../../components/LastUpdatedLine/LastUpdatedLine";
 import { TYPE_AUDIO } from "../../../../components/SlateEditor/plugins/audio/types";
 import { frontpageActions } from "../../../../components/SlateEditor/plugins/blockPicker/actions";
@@ -164,11 +165,11 @@ const FrontpageArticleFormContent = ({ articleLanguage }: Props) => {
         onCancel={() => setIsNormalizedOnLoad(false)}
         severity="warning"
       >
-        <HStack justify="flex-end">
+        <FormActionsContainer>
           <Button variant="secondary" onClick={() => setIsNormalizedOnLoad(false)}>
             {t("alertModal.continue")}
           </Button>
-        </HStack>
+        </FormActionsContainer>
       </AlertDialog>
       <StyledContentDiv name="content" label={t("form.content.label")} noBorder>
         {({ field: { value, name, onChange }, form: { isSubmitting } }) => (

diff --git a/src/containers/ArticlePage/LearningResourcePage/components/LearningResourceContent.tsx b/src/containers/ArticlePage/LearningResourcePage/components/LearningResourceContent.tsx
@@ -12,7 +12,6 @@ import { useTranslation } from "react-i18next";
 import { Descendant } from "slate";
 import styled from "@emotion/styled";
 import { Button } from "@ndla/primitives";
-import { HStack } from "@ndla/styled-system/jsx";
 import { IAuthor } from "@ndla/types-backend/draft-api";
 import LearningResourceFootnotes, { FootnoteType } from "./LearningResourceFootnotes";
 import { learningResourcePlugins } from "./learningResourcePlugins";
@@ -22,6 +21,7 @@ import { EditMarkupLink } from "../../../../components/EditMarkupLink";
 import FieldHeader from "../../../../components/Field/FieldHeader";
 import { FormField } from "../../../../components/FormField";
 import FormikField from "../../../../components/FormikField";
+import { FormActionsContainer } from "../../../../components/FormikForm";
 import LastUpdatedLine from "../../../../components/LastUpdatedLine/LastUpdatedLine";
 import { TYPE_AUDIO } from "../../../../components/SlateEditor/plugins/audio/types";
 import { learningResourceActions } from "../../../../components/SlateEditor/plugins/blockPicker/actions";
@@ -135,11 +135,11 @@ const LearningResourceContent = ({ articleLanguage, articleId, handleSubmit: _ha
         onCancel={() => setIsNormalizedOnLoad(false)}
         severity="warning"
       >
-        <HStack justify="flex-end">
+        <FormActionsContainer>
           <Button variant="danger" onClick={() => setIsNormalizedOnLoad(false)}>
             {t("alertModal.continue")}
           </Button>
-        </HStack>
+        </FormActionsContainer>
       </AlertDialog>
       <StyledContentDiv name="content" label={t("form.content.label")} noBorder key={values.revision}>
         {(fieldProps) => <ContentField articleLanguage={articleLanguage} articleId={articleId} {...fieldProps} />}

diff --git a/src/containers/ArticlePage/LearningResourcePage/components/LearningResourceForm.tsx b/src/containers/ArticlePage/LearningResourcePage/components/LearningResourceForm.tsx
@@ -11,11 +11,11 @@ import { memo, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UseQueryResult } from "@tanstack/react-query";
 import { Button } from "@ndla/primitives";
-import { HStack } from "@ndla/styled-system/jsx";
 import { IArticle, IUpdatedArticle, IStatus } from "@ndla/types-backend/draft-api";
 import { Node } from "@ndla/types-taxonomy";
 import LearningResourcePanels from "./LearningResourcePanels";
 import { AlertDialog } from "../../../../components/AlertDialog/AlertDialog";
+import { FormActionsContainer } from "../../../../components/FormikForm";
 import validateFormik, { getWarnings } from "../../../../components/formikValidationSchema";
 import HeaderWithLanguage from "../../../../components/HeaderWithLanguage";
 import EditorFooter from "../../../../components/SlateEditor/EditorFooter";
@@ -163,11 +163,11 @@ const LearningResourceForm = ({
           onCancel={() => setShowTaxWarning(false)}
           severity={"danger"}
         >
-          <HStack justify="flex-end">
+          <FormActionsContainer>
             <Button variant="secondary" onClick={() => setShowTaxWarning(false)}>
               {t("alertModal.continue")}
             </Button>
-          </HStack>
+          </FormActionsContainer>
         </AlertDialog>
       </StyledForm>
     </Formik>

diff --git a/src/containers/ArticlePage/TopicArticlePage/components/TopicArticleForm.tsx b/src/containers/ArticlePage/TopicArticlePage/components/TopicArticleForm.tsx
@@ -11,11 +11,11 @@ import { memo, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UseQueryResult } from "@tanstack/react-query";
 import { Button } from "@ndla/primitives";
-import { HStack } from "@ndla/styled-system/jsx";
 import { IUpdatedArticle, IArticle, IStatus, ILicense } from "@ndla/types-backend/draft-api";
 import { Node } from "@ndla/types-taxonomy";
 import TopicArticleAccordionPanels from "./TopicArticleAccordionPanels";
 import { AlertDialog } from "../../../../components/AlertDialog/AlertDialog";
+import { FormActionsContainer } from "../../../../components/FormikForm";
 import validateFormik, { getWarnings } from "../../../../components/formikValidationSchema";
 import HeaderWithLanguage from "../../../../components/HeaderWithLanguage";
 import EditorFooter from "../../../../components/SlateEditor/EditorFooter";
@@ -156,11 +156,11 @@ const TopicArticleForm = ({
           severity={"danger"}
           text={t("errorMessage.missingTax")}
         >
-          <HStack justify="flex-end">
+          <FormActionsContainer>
             <Button onClick={() => setShowTaxWarning(false)} variant="secondary">
               {t("alertModal.continue")}
             </Button>
-          </HStack>
+          </FormActionsContainer>
         </AlertDialog>
       </StyledForm>
     </Formik>

diff --git a/src/containers/ArticlePage/components/Comment.tsx b/src/containers/ArticlePage/components/Comment.tsx
@@ -15,10 +15,10 @@ import { colors, spacing, fonts, misc } from "@ndla/core";
 import { DeleteBinLine, RightArrow, ExpandMore } from "@ndla/icons/action";
 import { Done } from "@ndla/icons/editor";
 import { Button, FieldLabel, FieldRoot, IconButton } from "@ndla/primitives";
-import { HStack } from "@ndla/styled-system/jsx";
 import { plugins, toolbarAreaFilters, toolbarOptions } from "./commentToolbarUtils";
 import { COMMENT_COLOR, formControlStyles } from "./styles";
 import { AlertDialog } from "../../../components/AlertDialog/AlertDialog";
+import { FormActionsContainer } from "../../../components/FormikForm";
 import RichTextEditor from "../../../components/SlateEditor/RichTextEditor";
 import { SlateCommentType } from "../../FormikForm/articleFormHooks";
 
@@ -148,14 +148,14 @@ const Comment = ({ id, index, isSubmitting, field, arrayHelpers }: Props) => {
         text={t("form.workflow.deleteComment.modal")}
         onCancel={() => setModalOpen(!modalOpen)}
       >
-        <HStack gap="xsmall" justify="flex-end">
+        <FormActionsContainer>
           <Button onClick={() => setModalOpen(false)} variant="secondary">
             {t("form.abort")}
           </Button>
           <Button onClick={handleDelete} variant="danger">
             {t("form.workflow.deleteComment.button")}
           </Button>
-        </HStack>
+        </FormActionsContainer>
       </AlertDialog>
     </CommentCard>
   );

diff --git a/src/containers/FormikForm/AlertDialogWrapper.tsx b/src/containers/FormikForm/AlertDialogWrapper.tsx
@@ -11,8 +11,8 @@ import { useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UNSAFE_NavigationContext, useNavigate, Location } from "react-router-dom";
 import { Button } from "@ndla/primitives";
-import { HStack } from "@ndla/styled-system/jsx";
 import { AlertDialog } from "../../components/AlertDialog/AlertDialog";
+import { FormActionsContainer } from "../../components/FormikForm";
 import { supportedLanguages } from "../../i18n2";
 import { MessageSeverity } from "../../interfaces";
 
@@ -94,14 +94,14 @@ export const AlertDialogWrapper = ({ text, severity, isSubmitting, formIsDirty,
       text={text}
       severity={severity}
     >
-      <HStack gap="xsmall" justify="flex-end">
+      <FormActionsContainer>
         <Button onClick={onCancel} variant="secondary">
           {t("form.abort")}
         </Button>
         <Button onClick={onWillContinue} variant="danger">
           {t("alertModal.continue")}
         </Button>
-      </HStack>
+      </FormActionsContainer>
     </AlertDialog>
   );
 };
diff --git a/src/containers/Messages/Messages.tsx b/src/containers/Messages/Messages.tsx
@@ -6,16 +6,15 @@
  *
  */
 
-import { MouseEvent } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { css, SerializedStyles } from "@emotion/react";
 import styled from "@emotion/styled";
 import { stackOrder } from "@ndla/core";
 import { Button } from "@ndla/primitives";
-import { HStack } from "@ndla/styled-system/jsx";
 import { useMessages } from "./MessagesProvider";
 import { AlertDialog } from "../../components/AlertDialog/AlertDialog";
+import { FormActionsContainer } from "../../components/FormikForm";
 
 const appearances: Record<string, SerializedStyles> = {
   hidden: css`
@@ -70,7 +69,7 @@ const Message = ({ message }: MessageProps) => {
       text={message.translationKey ? t(message.translationKey, message.translationObject) : message.message!}
     >
       {message.type === "auth0" ? (
-        <HStack justify="flex-end">
+        <FormActionsContainer>
           <Button variant="danger" onClick={() => clearMessage(message.id)}>
             {t("form.abort")}
           </Button>
@@ -86,7 +85,7 @@ const Message = ({ message }: MessageProps) => {
           >
             {t("alertModal.loginAgain")}
           </Button>
-        </HStack>
+        </FormActionsContainer>
       ) : null}
     </AlertDialog>
   );