Merge pull request #620 from openSUSE/remove-popup-height-prop

[web] Drop heigh prop from Popup component
openSUSE · Jun 14, 2023 · 2a3e498 · 2a3e498
2 parents 1973428 + 265cdb2
commit 2a3e498
Show file tree

Hide file tree

Showing 13 changed files with 21 additions and 18 deletions.
diff --git a/web/package/cockpit-agama.changes b/web/package/cockpit-agama.changes
@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Tue Jun 13 15:40:01 UTC 2023 - David Diaz <dgonzalez@suse.com>
+
+- UI: stop using fixed sizes for modal dialogs
+  (gh#openSUSE/agama#620) .
+
 -------------------------------------------------------------------
 Tue Jun 13 06:59:12 UTC 2023 - David Diaz <dgonzalez@suse.com>
 

diff --git a/web/src/assets/styles/utilities.scss b/web/src/assets/styles/utilities.scss
@@ -136,9 +136,13 @@
   --stack-gutter: 0;
 }
 
-.tallest {
+.large {
   /** block-size fallbacks **/
   height: 95dvh;
+  width: 95dvw;
+  max-width: calc(var(--ui-max-inline-size) + var(--spacer-large));
   /** END block-size fallbacks **/
   block-size: 95dvh;
+  inline-size: 95dvw;
+  max-inline-size: calc(var(--ui-max-inline-size) + var(--spacer-large))
 }
diff --git a/web/src/components/core/FileViewer.jsx b/web/src/components/core/FileViewer.jsx
@@ -59,8 +59,7 @@ export default function FileViewer({ file, title, onCloseCallback }) {
     <Popup
       isOpen={isOpen}
       title={title || file}
-      variant="large"
-      className="tallest"
+      className="large"
     >
       {state === "loading" && <Loading text="Reading file..." />}
       {(content === null || error) &&

diff --git a/web/src/components/core/Popup.jsx b/web/src/components/core/Popup.jsx
@@ -189,7 +189,6 @@ const AncillaryAction = ({ children, ...props }) => (
  * @param {boolean} [props.isOpen=false] - whether the popup is displayed or not
  * @param {boolean} [props.showClose=false] - whether the popup should include a "X" action for closing it
  * @param {string} [props.variant="small"] - the popup size, based on Pf4/Modal `variant` prop
- * @param {string} [props.height="auto"] - the popup height, "auto", "medium", "large"
  * @param {React.ReactNode} props.children - the popup content and actions
  * @param {object} [pf4ModalProps] - PF4/Modal props, See {@link https://www.patternfly.org/v4/components/modal#props}
  *
@@ -198,13 +197,10 @@ const Popup = ({
   isOpen = false,
   showClose = false,
   variant = "small",
-  height = "auto",
   children,
-  className,
   ...pf4ModalProps
 }) => {
   const [actions, content] = partition(React.Children.toArray(children), child => child.type === Actions);
-  const classesNames = [className, `${height}-modal-popup`].filter(c => c !== "").join(" ");
 
   useLayoutEffect(() => {
     /**
@@ -241,7 +237,6 @@ const Popup = ({
       showClose={showClose}
       variant={variant}
       actions={actions}
-      className={classesNames}
     >
       { content }
     </Modal>

diff --git a/web/src/components/core/Terminal.jsx b/web/src/components/core/Terminal.jsx
@@ -37,8 +37,7 @@ export default function Terminal({ onCloseCallback }) {
   return (
     <Popup
       isOpen={isOpen}
-      variant="large"
-      className="tallest"
+      className="large"
       aria-label="terminal popup"
     >
 

diff --git a/web/src/components/network/IpSettingsForm.jsx b/web/src/components/network/IpSettingsForm.jsx
@@ -123,7 +123,7 @@ export default function IpSettingsForm({ connection, onClose }) {
   };
 
   return (
-    <Popup isOpen height="medium" title={`Edit "${connection.name}" connection`}>
+    <Popup isOpen title={`Edit "${connection.name}" connection`}>
       <Form id="edit-connection" onSubmit={onSubmit}>
         <FormGroup fieldId="method" label="Mode" isRequired>
           <FormSelect

diff --git a/web/src/components/network/WifiSelector.jsx b/web/src/components/network/WifiSelector.jsx
@@ -130,7 +130,7 @@ function WifiSelector({ isOpen = false, onClose }) {
   });
 
   return (
-    <Popup isOpen={isOpen} height="large" title="Connect to a Wi-Fi network">
+    <Popup isOpen={isOpen} title="Connect to a Wi-Fi network">
       <WifiNetworksList
         networks={networksFromValues(networks)}
         hiddenNetwork={baseHiddenNetwork}

diff --git a/web/src/components/storage/ProposalVolumes.jsx b/web/src/components/storage/ProposalVolumes.jsx
@@ -250,7 +250,7 @@ const VolumeRow = ({ columns, volume, isLoading, onEdit, onDelete }) => {
         </Td>
       </Tr>
 
-      <Popup title="Edit file system" height="medium" isOpen={isFormOpen}>
+      <Popup title="Edit file system" isOpen={isFormOpen}>
         <VolumeForm
           id="editVolumeForm"
           volume={volume}

diff --git a/web/src/components/storage/iscsi/DiscoverForm.jsx b/web/src/components/storage/iscsi/DiscoverForm.jsx
@@ -86,7 +86,7 @@ export default function DiscoverForm({ onSubmit: onSubmitProp, onCancel }) {
   const isDisabled = isLoading || !isValidForm();
 
   return (
-    <Popup isOpen height="medium" title="Discover iSCSI Targets">
+    <Popup isOpen title="Discover iSCSI Targets">
       <Form id={id} onSubmit={onSubmit}>
         { isFailed &&
           <Alert variant="warning" isInline title="Something went wrong">

diff --git a/web/src/components/storage/iscsi/EditNodeForm.jsx b/web/src/components/storage/iscsi/EditNodeForm.jsx
@@ -44,7 +44,7 @@ export default function EditNodeForm({ node, onSubmit: onSubmitProp, onCancel })
   const id = "iscsiEditNode";
 
   return (
-    <Popup isOpen height="medium" title={`Edit ${node.target}`}>
+    <Popup isOpen title={`Edit ${node.target}`}>
       <Form id={id} onSubmit={onSubmit}>
         <FormGroup fieldId="startup" label="Startup">
           <FormSelect

diff --git a/web/src/components/storage/iscsi/InitiatorForm.jsx b/web/src/components/storage/iscsi/InitiatorForm.jsx
@@ -38,7 +38,7 @@ export default function InitiatorForm({ initiator, onSubmit: onSubmitProp, onCan
   const isDisabled = data.name === "";
 
   return (
-    <Popup isOpen height="medium" title="Edit iSCSI Initiator">
+    <Popup isOpen title="Edit iSCSI Initiator">
       <Form id={id} onSubmit={onSubmit}>
         <FormGroup fieldId="initiatorName" label="Name" isRequired>
           <TextInput

diff --git a/web/src/components/storage/iscsi/LoginForm.jsx b/web/src/components/storage/iscsi/LoginForm.jsx
@@ -63,7 +63,7 @@ export default function LoginForm({ node, onSubmit: onSubmitProp, onCancel }) {
   const isDisabled = isLoading || !isValidAuth;
 
   return (
-    <Popup isOpen height="medium" title={`Login ${node.target}`}>
+    <Popup isOpen title={`Login ${node.target}`}>
       <Form id={id} onSubmit={onSubmit}>
         { isFailed &&
           <Alert variant="warning" isInline title="Something went wrong">

diff --git a/web/src/components/users/FirstUser.jsx b/web/src/components/users/FirstUser.jsx
@@ -186,7 +186,7 @@ export default function FirstUser() {
       { isUserDefined ? <UserData user={user} actions={actions} /> : <UserNotDefined actionCb={openForm} /> }
       { /* TODO: Extract this form to a component, if possible */ }
       { isFormOpen &&
-        <Popup isOpen height="medium" title={isEditing ? "Edit user account" : "Create user account"}>
+        <Popup isOpen title={isEditing ? "Edit user account" : "Create user account"}>
           <Form id="createUser" onSubmit={(e) => accept("createUser", e)}>
             { showErrors() &&
               <Alert variant="warning" isInline title="Something went wrong">