normalise spacing for lists and help text across various modals (#25663)

For #24992 Normalises the padding around lists, list headers, and help text across various modals. **manage automation modal:** ![image](https://github.com/user-attachments/assets/bd5fa4cc-7ef0-4030-92fe-3d4914c2fa8c) **calander events modal:** ![image](https://github.com/user-attachments/assets/9f284a5a-ec8a-46fb-acf8-b205eb31fc60) **install software policy modal:** ![image](https://github.com/user-attachments/assets/eaf961a3-87c4-4e45-b3f8-5b2d64eb346d) **Run script policy modal** ![image](https://github.com/user-attachments/assets/6b2d75de-5a6c-4c0f-b82b-5f8006fc9ab0) - [x] Changes file added for user-visible changes in `changes/`, `orbit/changes/` or `ee/fleetd-chrome/changes`. - [x] Manual QA for all new/changed functionality
fleetdm · Jan 23, 2025 · a3b06fa · a3b06fa
1 parent b00da33
commit a3b06fa
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 83 deletions.
diff --git a/changes/issue-24992-padding-fixes-around-lists b/changes/issue-24992-padding-fixes-around-lists
@@ -0,0 +1 @@
+- normalise padding spacing for list headers, lists, and help text across various modals.
diff --git a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx
@@ -4,7 +4,6 @@ import { useQuery } from "react-query";
 import { InjectedRouter } from "react-router/lib/Router";
 import PATHS from "router/paths";
 import { isEqual } from "lodash";
-import { formatDistanceToNowStrict } from "date-fns";
 
 import { getNextLocationPath, wait } from "utilities/helpers";
 

diff --git a/frontend/pages/policies/ManagePoliciesPage/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/_styles.scss
@@ -235,6 +235,7 @@
     border: 1px solid $ui-fleet-black-10;
     // negate ul padding
     padding-left: 0;
+    margin: 0;
 
     .policy-row {
       display: flex;

diff --git a/.../pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx b/.../pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx
@@ -190,48 +190,50 @@ const CalendarEventsModal = ({
     return (
       <div className="form-field">
         <div className="form-field__label">Policies:</div>
-        <ul className="automated-policies-section">
-          {formData.policies.map((policy) => {
-            const { isChecked, name, id } = policy;
-            return (
-              <li className="policy-row" id={`policy-row--${id}`} key={id}>
-                <Checkbox
-                  value={isChecked}
-                  name={name}
-                  // can't use parseTarget as value needs to be set to !currentValue
-                  onChange={() => {
-                    onPolicyEnabledChange({ name, value: !isChecked });
-                  }}
-                  disabled={!formData.enabled}
-                >
-                  <TooltipTruncatedText value={name} />
-                </Checkbox>
-                <Button
-                  variant="text-icon"
-                  onClick={() => {
-                    setSelectedPolicyToPreview(
-                      policies.find((p) => p.id === id)
-                    );
-                    togglePreviewCalendarEvent();
-                  }}
-                  className="policy-row__preview-button"
-                >
-                  <Icon name="eye" /> Preview
-                </Button>
-              </li>
-            );
-          })}
-        </ul>
-        <span className="form-field__help-text">
-          A calendar event will be created for end users if one of their hosts
-          fail any of these policies.{" "}
-          <CustomLink
-            url="https://www.fleetdm.com/learn-more-about/calendar-events"
-            text="Learn more"
-            newTab
-            disableKeyboardNavigation={!formData.enabled}
-          />
-        </span>
+        <div>
+          <ul className="automated-policies-section">
+            {formData.policies.map((policy) => {
+              const { isChecked, name, id } = policy;
+              return (
+                <li className="policy-row" id={`policy-row--${id}`} key={id}>
+                  <Checkbox
+                    value={isChecked}
+                    name={name}
+                    // can't use parseTarget as value needs to be set to !currentValue
+                    onChange={() => {
+                      onPolicyEnabledChange({ name, value: !isChecked });
+                    }}
+                    disabled={!formData.enabled}
+                  >
+                    <TooltipTruncatedText value={name} />
+                  </Checkbox>
+                  <Button
+                    variant="text-icon"
+                    onClick={() => {
+                      setSelectedPolicyToPreview(
+                        policies.find((p) => p.id === id)
+                      );
+                      togglePreviewCalendarEvent();
+                    }}
+                    className="policy-row__preview-button"
+                  >
+                    <Icon name="eye" /> Preview
+                  </Button>
+                </li>
+              );
+            })}
+          </ul>
+          <p className="form-field__help-text">
+            A calendar event will be created for end users if one of their hosts
+            fail any of these policies.{" "}
+            <CustomLink
+              url="https://www.fleetdm.com/learn-more-about/calendar-events"
+              text="Learn more"
+              newTab
+              disableKeyboardNavigation={!formData.enabled}
+            />
+          </p>
+        </div>
       </div>
     );
   };
@@ -302,7 +304,6 @@ const CalendarEventsModal = ({
           onClick={() => {
             setShowExamplePayload(!showExamplePayload);
           }}
-          // disabled={!formData.enabled}
         />
         <Button
           type="button"

diff --git a/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/_styles.scss
@@ -32,6 +32,10 @@
     box-sizing: border-box;
     margin: 0;
   }
+
+  .form-field__help-text {
+    margin-top: $pad-large;
+  }
 }
 
 .calendar-event-preview {

diff --git a/...ages/policies/ManagePoliciesPage/components/InstallSoftwareModal/InstallSoftwareModal.tsx b/...ages/policies/ManagePoliciesPage/components/InstallSoftwareModal/InstallSoftwareModal.tsx
@@ -29,7 +29,6 @@ import {
   InstallableSoftwareSource,
   ISoftwareTitle,
 } from "interfaces/software";
-import TooltipWrapper from "components/TooltipWrapper";
 
 const SOFTWARE_TITLE_LIST_LENGTH = 1000;
 
@@ -308,21 +307,23 @@ const InstallSoftwareModal = ({
       <div className={`${baseClass} form`}>
         <div className="form-field">
           <div className="form-field__label">Policies:</div>
-          <ul className="automated-policies-section">
-            {formData.map((policyData) =>
-              renderPolicySwInstallOption(policyData)
-            )}
-          </ul>
-          <span className="form-field__help-text">
-            If compatible with the host, the selected software will be installed
-            when hosts fail the policy. Host counts will reset when new software
-            is selected.{" "}
-            <CustomLink
-              url="https://fleetdm.com/learn-more-about/policy-automation-install-software"
-              text="Learn more"
-              newTab
-            />
-          </span>
+          <div>
+            <ul className="automated-policies-section">
+              {formData.map((policyData) =>
+                renderPolicySwInstallOption(policyData)
+              )}
+            </ul>
+            <p className="form-field__help-text">
+              If compatible with the host, the selected software will be
+              installed when hosts fail the policy. Host counts will reset when
+              new software is selected.{" "}
+              <CustomLink
+                url="https://fleetdm.com/learn-more-about/policy-automation-install-software"
+                text="Learn more"
+                newTab
+              />
+            </p>
+          </div>
         </div>
         <div className="modal-cta-wrap">
           <Button

diff --git a/frontend/pages/policies/ManagePoliciesPage/components/InstallSoftwareModal/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/InstallSoftwareModal/_styles.scss
@@ -3,6 +3,7 @@
     .form-field__help-text {
       font-size: 14px;
       line-height: 21px;
+      margin-top: $pad-large;
     }
 
     .form-field--dropdown {
@@ -33,7 +34,7 @@
       gap: $pad-small;
       justify-content: center;
       font-size: $small;
-      
+
       div {
         color: $ui-fleet-black-75;
         font-size: $xx-small;

diff --git a/...ages/policies/ManagePoliciesPage/components/PolicyRunScriptModal/PolicyRunScriptModal.tsx b/...ages/policies/ManagePoliciesPage/components/PolicyRunScriptModal/PolicyRunScriptModal.tsx
@@ -204,26 +204,28 @@ const PolicyRunScriptModal = ({
       <div className={`${baseClass} form`}>
         <div className="form-field">
           <div className="form-field__label">Policies:</div>
-          <ul className="automated-policies-section">
-            {formData.map((policyData) =>
-              renderPolicyRunScriptOption(policyData)
-            )}
-          </ul>
-          <span className="form-field__help-text">
-            If{" "}
-            <TooltipWrapper tipContent={compatibleTipContent}>
-              compatible
-            </TooltipWrapper>{" "}
-            with the host, the selected script will run when hosts fail the
-            policy. The script will not run on hosts with scripts disabled, or
-            on hosts with too many pending scripts. Host counts will reset when
-            new scripts are selected.{" "}
-            <CustomLink
-              url="https://fleetdm.com/learn-more-about/policy-automation-run-script"
-              text="Learn more"
-              newTab
-            />
-          </span>
+          <div>
+            <ul className="automated-policies-section">
+              {formData.map((policyData) =>
+                renderPolicyRunScriptOption(policyData)
+              )}
+            </ul>
+            <p className="form-field__help-text">
+              If{" "}
+              <TooltipWrapper tipContent={compatibleTipContent}>
+                compatible
+              </TooltipWrapper>{" "}
+              with the host, the selected script will run when hosts fail the
+              policy. The script will not run on hosts with scripts disabled, or
+              on hosts with too many pending scripts. Host counts will reset
+              when new scripts are selected.{" "}
+              <CustomLink
+                url="https://fleetdm.com/learn-more-about/policy-automation-run-script"
+                text="Learn more"
+                newTab
+              />
+            </p>
+          </div>
         </div>
         <div className="modal-cta-wrap">
           <Button

diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PolicyRunScriptModal/_styles.scss b/frontend/pages/policies/ManagePoliciesPage/components/PolicyRunScriptModal/_styles.scss
@@ -3,6 +3,7 @@
     .form-field__help-text {
       font-size: 14px;
       line-height: 21px;
+      margin-top: $pad-large;
     }
 
     .form-field--dropdown {
@@ -33,7 +34,7 @@
       gap: $pad-small;
       justify-content: center;
       font-size: $small;
-      
+
       div  {
         color: $ui-fleet-black-75;
         font-size: $xx-small;
@@ -47,4 +48,3 @@
     }
   }
 }
-
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- normalise padding spacing for list headers, lists, and help text across various modals.