Align modals - always show close button

.changeset/tall-trainers-approve.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Modals in the Dashboard have been aligned, so that all contains close button

src/apps/components/AppDialog/AppDialog.tsx

@@ -12,15 +12,9 @@ export const AppDialog: React.FC<AppDialogProps> = ({ children, title, onClose,
   return (
     <DashboardModal aria-labelledby="extension app dialog" {...props} onChange={onClose}>
       <DashboardModal.Content size="lg">
-        <DashboardModal.Title
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          as="h2"
-        >
+        <DashboardModal.Header onClose={onClose} as="h2">
           {title}
-          <DashboardModal.Close onClose={onClose}></DashboardModal.Close>
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <Box width="100%" __height={600}>
           {children}
         </Box>

src/apps/components/AppPermissionsDialog/AppPermissionsDialog.tsx

@@ -111,7 +111,9 @@ export const AppPermissionsDialog = ({
   return (
     <DashboardModal open={true} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title>{formatMessage(messages.heading)}</DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
+          {formatMessage(messages.heading)}
+        </DashboardModal.Header>
         <Box display={"grid"} gridAutoFlow={"row"}>
           <Text as={"p"}>{formatMessage(messages.info)}</Text>
           <Box

src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx

@@ -52,7 +52,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
         <Form initial={initialForm} onSubmit={onSubmit}>
           {({ errors, set, change, clearErrors, setError, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 {attributeValue === null ? (
                   <FormattedMessage
                     id="PqMbma"
@@ -66,7 +66,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
                     description="edit attribute value"
                   />
                 )}
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 data-test-id="value-name"

src/components/ActionDialog/ActionDialog.tsx

@@ -39,7 +39,7 @@ const ActionDialog = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size={size}>
-        <DashboardModal.Title>{title}</DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>{title}</DashboardModal.Header>
         <Box fontSize={3}>{children}</Box>
         <DashboardModal.Actions>
           <BackButton onClick={onClose}>{backButtonText}</BackButton>

src/components/AssignAttributeDialog/AssignAttributeDialog.tsx

@@ -82,9 +82,9 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
   return (
     <DashboardModal onChange={onClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto auto">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...messages.title} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           data-test-id="attribute-search-input"

src/components/AssignContainerDialog/AssignContainerDialog.tsx

@@ -75,7 +75,7 @@ const AssignContainerDialog: React.FC<AssignContainerDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Title>{labels.title}</DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>{labels.title}</DashboardModal.Header>
 
         <TextField
           name="query"

src/components/AssignProductDialog/AssignProductDialog.tsx

@@ -107,9 +107,9 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...messages.assignVariantDialogHeader} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           name="query"

src/components/AssignVariantDialog/AssignVariantDialog.tsx

@@ -84,9 +84,9 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
   return (
     <DashboardModal onChange={handleClose} open={open}>
       <DashboardModal.Content size="sm" __gridTemplateRows="auto auto 1fr auto">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...messages.assignVariantDialogHeader} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <TextField
           name="query"

src/components/DevModePanel/DevModePanel.tsx

@@ -36,10 +36,9 @@ export const DevModePanel: React.FC = () => {
     <DashboardModal open={isDevModeVisible} onChange={() => setDevModeVisibility(false)}>
       <DashboardModal.Content size="xl" __gridTemplateRows="auto 1fr" height="100%">
         <style dangerouslySetInnerHTML={overwriteCodeMirrorCSSVariables}></style>
-        <DashboardModal.Title display="flex" justifyContent="space-between">
+        <DashboardModal.Header onClose={() => setDevModeVisibility(false)}>
           {intl.formatMessage(messages.title)}
-          <DashboardModal.Close onClose={() => setDevModeVisibility(false)} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <PlainGraphiQL query={devModeContent} variables={variables} fetcher={fetcher} />
       </DashboardModal.Content>

src/components/DryRun/DryRun.tsx

@@ -69,10 +69,9 @@ const DryRun: React.FC<DryRunProps> = ({
     return (
       <DashboardModal onChange={closeDialog} open={showDialog}>
         <DashboardModal.Content size="lg" data-test-id="dry-run">
-          <DashboardModal.Title display="flex" justifyContent="space-between">
+          <DashboardModal.Header onClose={closeDialog}>
             {intl.formatMessage(messages.header)}
-            <DashboardModal.Close onClose={closeDialog} />
-          </DashboardModal.Title>
+          </DashboardModal.Header>
 
           <Alert variant="error" close={false}>
             <Text>{intl.formatMessage(messages.unavailableSyncEvents)}</Text>
@@ -85,10 +84,9 @@ const DryRun: React.FC<DryRunProps> = ({
   return (
     <DashboardModal onChange={closeDialog} open={showDialog}>
       <DashboardModal.Content size="lg" data-test-id="dry-run">
-        <DashboardModal.Title display="flex" justifyContent="space-between">
+        <DashboardModal.Header onClose={closeDialog}>
           {intl.formatMessage(messages.header)}
-          <DashboardModal.Close onClose={closeDialog} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>{intl.formatMessage(messages.selectObject)}</Text>
 

src/components/Form/ExitFormDialog.tsx

@@ -18,10 +18,9 @@ const ExitFormDialog: React.FC<ExitFormDialogProps> = ({ onLeave, onClose, isOpe
   return (
     <DashboardModal open={isOpen} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title display="flex" justifyContent="space-between">
+        <DashboardModal.Header onClose={onClose}>
           {intl.formatMessage(messages.unableToSaveTitle)}
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <DashboardModal.Actions>
           <BackButton onClick={onClose}>{intl.formatMessage(messages.keepEditing)}</BackButton>

src/components/Modal/Header.tsx

@@ -0,0 +1,19 @@
+import { Box } from "@saleor/macaw-ui-next";
+import React, { ReactNode } from "react";
+
+import { Close } from "./Close";
+import { Title, TitleProps } from "./Title";
+
+interface HeaderProps extends TitleProps {
+  children: ReactNode;
+  onClose: () => void;
+}
+
+export const Header = ({ children, onClose, ...rest }: HeaderProps) => {
+  return (
+    <Box display="flex" justifyContent="space-between">
+      <Title {...rest}>{children}</Title>
+      <Close onClose={onClose} />
+    </Box>
+  );
+};

src/components/Modal/Title.tsx

@@ -1,7 +1,7 @@
 import { Text, TextProps } from "@saleor/macaw-ui-next";
 import React, { ReactNode } from "react";
 
-interface TitleProps extends TextProps {
+export interface TitleProps extends TextProps {
   children: ReactNode;
 }
 

src/components/Modal/index.ts

@@ -2,6 +2,7 @@ import { Actions } from "./Actions";
 import { Close } from "./Close";
 import { Content, ContentSize } from "./Content";
 import { Grid } from "./Grid";
+import { Header } from "./Header";
 import { Root } from "./Root";
 import { Title } from "./Title";
 
@@ -13,4 +14,5 @@ export const DashboardModal = Object.assign(Root, {
   Actions,
   Close,
   Grid,
+  Header,
 });

src/components/SaveFilterTabDialog/SaveFilterTabDialog.tsx

@@ -47,13 +47,13 @@ const SaveFilterTabDialog: React.FC<SaveFilterTabDialogProps> = ({
         <Form initial={initialForm} onSubmit={handleErrors}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <FormattedMessage
                   id="P9YktI"
                   defaultMessage="Save view preset"
                   description="save preset, header"
                 />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               <TextField
                 autoFocus

src/components/TypeDeleteWarningDialog/TypeDeleteWarningDialog.tsx

@@ -86,13 +86,11 @@ function TypeDeleteWarningDialog<T extends TypeBaseData>({
   return (
     <DashboardModal open={isOpen} onChange={onClose}>
       <DashboardModal.Content size="sm">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header onClose={onClose}>
           {intl.formatMessage(baseMessages.title, {
             selectedTypesCount: typesToDelete.length,
           })}
-
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         {isLoading ? (
           <Box display="flex" width="100%" justifyContent="center" paddingY={10}>

src/custom-apps/components/TokenCreateDialog/TokenCreateDialog.tsx

@@ -61,9 +61,9 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
         <Form initial={{ name: "" }} onSubmit={data => onCreate(data.name)}>
           {({ change, data, submit }) => (
             <DashboardModal.Grid>
-              <DashboardModal.Title>
+              <DashboardModal.Header onClose={onClose}>
                 <FormattedMessage id="T5nU7u" defaultMessage="Create Token" description="header" />
-              </DashboardModal.Title>
+              </DashboardModal.Header>
 
               {step === "form" ? (
                 <>

src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx

@@ -82,7 +82,7 @@ const CustomerAddressDialog: React.FC<CustomerAddressDialogProps> = ({
 
             return (
               <DashboardModal.Grid>
-                <DashboardModal.Title>
+                <DashboardModal.Header onClose={onClose}>
                   {variant === "create" ? (
                     <FormattedMessage
                       id="W0kQd+"
@@ -96,7 +96,7 @@ const CustomerAddressDialog: React.FC<CustomerAddressDialogProps> = ({
                       description="dialog title"
                     />
                   )}
-                </DashboardModal.Title>
+                </DashboardModal.Header>
 
                 <AddressEdit
                   countries={countryChoices}

src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx

@@ -62,13 +62,13 @@ const DiscountCountrySelectDialog: React.FC<DiscountCountrySelectDialogProps> =
                 __gridTemplateRows="auto auto auto auto auto 1fr auto"
                 height="100%"
               >
-                <DashboardModal.Title>
+                <DashboardModal.Header onClose={onClose}>
                   <FormattedMessage
                     id="cvVIV/"
                     defaultMessage="Assign Countries"
                     description="dialog header"
                   />
-                </DashboardModal.Title>
+                </DashboardModal.Header>
 
                 <Text>
                   <FormattedMessage

src/discounts/components/DiscountDeleteModal/DiscountDeleteModal.tsx

@@ -21,9 +21,9 @@ export const DiscountDeleteModal = ({
   return (
     <DashboardModal open={open} onChange={onChange}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onChange}>
           <FormattedMessage defaultMessage="Delete discount" id="ZrIt1W" />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage

src/discounts/components/DiscountRules/componenets/RuleDeleteModal/RuleDeleteModal.tsx

@@ -25,10 +25,9 @@ export const RuleDeleteModal = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs" data-test-id="delete-rule-dialog">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header onClose={onClose}>
           {intl.formatMessage(messages.deleteRule)}
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text>
           <FormattedMessage {...messages.deleteRuleDescription} />

src/discounts/components/DiscountRules/componenets/RuleFormModal/RuleFormModal.tsx

@@ -39,10 +39,9 @@ export const RuleFormModal = ({
   return (
     <DashboardModal open={true} onChange={onClose}>
       <DashboardModal.Content size="sm" data-test-id="add-rule-dialog">
-        <DashboardModal.Title display="flex" justifyContent="space-between" alignItems="center">
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage {...(initialFormValues ? messages.editRule : messages.addRule)} />
-          <DashboardModal.Close onClose={onClose} />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <FormProvider {...methods}>
           <form onSubmit={methods.handleSubmit(onSubmit)}>{children}</form>
         </FormProvider>

src/discounts/components/VoucherCodesDeleteDialog/VoucherCodesDeleteDialog.tsx

@@ -24,9 +24,9 @@ export const VoucherCodesDeleteDialog = ({
   return (
     <DashboardModal open={open} onChange={onClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage id="WMN0q+" defaultMessage="Delete voucher codes" />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
 
         <Text as="p">
           <FormattedMessage

src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx

@@ -57,7 +57,9 @@ export const VoucherCodesGenerateDialog = ({
   return (
     <DashboardModal open={open} onChange={handleModalClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
+          {intl.formatMessage(messages.title)}
+        </DashboardModal.Header>
         <Box display="grid" gap={3} __width={390}>
           <Input
             name="quantity"

src/discounts/components/VoucherCodesManualDialog/VoucherCodesManualDialog.tsx

@@ -45,9 +45,9 @@ export const VoucherCodesManualDialog = ({
   return (
     <DashboardModal open={open} onChange={handleModalClose}>
       <DashboardModal.Content size="xs">
-        <DashboardModal.Title>
+        <DashboardModal.Header onClose={onClose}>
           <FormattedMessage defaultMessage="Enter Voucher Code" id="giVGCH" />
-        </DashboardModal.Title>
+        </DashboardModal.Header>
         <Box display="grid" gap={3} __width={390}>
           <Input
             data-test-id="enter-code-input"

src/giftCards/GiftCardBulkCreateDialog/GiftCardBulkCreateDialog.tsx

@@ -109,7 +109,9 @@ const GiftCardBulkCreateDialog: React.FC<DialogProps> = ({ onClose, open }) => {
     <>
       <DashboardModal open={open} onChange={onClose}>
         <DashboardModal.Content size="sm">
-          <DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
+          <DashboardModal.Header onClose={onClose}>
+            {intl.formatMessage(messages.title)}
+          </DashboardModal.Header>
           <ContentWithProgress>
             {!loadingChannelCurrencies && (
               <GiftCardBulkCreateDialogForm

src/giftCards/GiftCardCreateDialog/GiftCardBulkCreateSuccessDialog.tsx

@@ -27,9 +27,9 @@ const GiftCardBulkCreateSuccessDialog: React.FC<GiftCardBulkCreateSuccessDialogP
     <>
       <DashboardModal open={open} onChange={onClose}>
         <DashboardModal.Content size="sm">
-          <DashboardModal.Title>
+          <DashboardModal.Header onClose={onClose}>
             {intl.formatMessage(messages.bulkCreateIssuedTitle)}
-          </DashboardModal.Title>
+          </DashboardModal.Header>
 
           <Text>{intl.formatMessage(messages.bulkCreateIssuedExplanation)}</Text>
 

src/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent.tsx

@@ -78,7 +78,9 @@ const GiftCardCreateDialogContent: React.FC<GiftCardCreateDialogContentProps> =
 
   return (
     <DashboardModal.Content size="sm" data-test-id="gift-card-dialog">
-      <DashboardModal.Title>{intl.formatMessage(messages.title)}</DashboardModal.Title>
+      <DashboardModal.Header onClose={onClose}>
+        {intl.formatMessage(messages.title)}
+      </DashboardModal.Header>
       {cardCode ? (
         <GiftCardCreateDialogCodeContent cardCode={cardCode} onClose={handleClose} />
       ) : (

src/giftCards/GiftCardExportDialogContent/GiftCardExportDialogContent.tsx

@@ -97,9 +97,9 @@ const GiftCardExportDialog: React.FC<
 
   return (
     <DashboardModal.Content size="sm">
-      <DashboardModal.Title>
+      <DashboardModal.Header onClose={onClose}>
         <FormattedMessage {...messages.title} />
-      </DashboardModal.Title>
+      </DashboardModal.Header>
 
       <ContentWithProgress>
         {!loading && (