fix: infra monitor screen ui regressions

changelog/7719-fix-style-regression.yaml

@@ -0,0 +1,4 @@
+type: Fixed # One of: Added, Changed, Developer Experience, Deprecated, Docs, Fixed, Removed, Security
+description: Styles on infra and datastore monitor screens
+pr: 7719 # PR number
+labels: [] # Optional: ["high-risk", "db-migration"]

clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/MonitorFieldListItem.tsx

@@ -52,7 +52,7 @@ export const tagRender: TagRender = (props) => {
       onClose={onClose}
       /** Style required because of tailwind limitations and our ui package presets */
       style={{
-        marginInlineEnd: "calc((var(--ant-padding-xs) * 0.5))",
+        marginInlineEnd: 4,
       }}
       icon={isFromClassifier && <SparkleIcon />}
     >

clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx

@@ -263,12 +263,11 @@ const ActionCenterFields = ({
 
   return (
     <>
-      <Splitter className="h-[calc(100%-48px)] overflow-hidden">
-        <Splitter.Panel
-          defaultSize={250}
-          /** Note: style attr used here due to specificity of ant css. */
-          style={{ paddingRight: "var(--ant-padding-md)" }}
-        >
+      <Splitter
+        className="h-[calc(100%-48px)] overflow-hidden"
+        classNames={{ root: "gap-6" }}
+      >
+        <Splitter.Panel defaultSize={250}>
           <MonitorTree
             showIgnored={showIgnored}
             showApproved={showApproved}
@@ -311,11 +310,8 @@ const ActionCenterFields = ({
             )}
           />
         </Splitter.Panel>
-        {/** Note: style attr used here due to specificity of ant css. */}
-        <Splitter.Panel
-          style={{ paddingLeft: "var(--ant-padding-md)", overflow: "hidden" }}
-        >
-          <Flex vertical gap="medium" className="h-full">
+        <Splitter.Panel style={{ overflow: "hidden" }}>
+          <Flex vertical gap="middle" className="h-full">
             <Flex justify="space-between">
               <Title level={2} ellipsis>
                 Monitor results

clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredInfrastructureSystemsTable.tsx

@@ -146,7 +146,7 @@ export const DiscoveredInfrastructureSystemsTable = ({
   );
 
   return (
-    <Flex vertical gap="medium" className="h-full overflow-hidden">
+    <Flex vertical gap="middle" className="h-full overflow-hidden">
       <Alert
         showIcon
         message="Fides detected the following systems"

clients/fidesui/src/components/data-display/Tag.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Tag } from "../../index";
+import { TITLE_LOREM } from "../../stories/utils/content";
+
+const meta = {
+  title: "Data Display/Tag",
+  component: Tag,
+  args: {
+    children: TITLE_LOREM,
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

clients/fidesui/src/components/data-entry/SelectInline.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
+import { Tag } from "../../index";
+import { OPTION_NAMES } from "../../stories/utils/content";
 import { SelectInline } from "./SelectInline";
 
 const meta = {
@@ -16,3 +18,21 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {},
 };
+
+export const Selected: Story = {
+  args: {
+    options: OPTION_NAMES.map((value) => ({ label: value, value })),
+    value: OPTION_NAMES,
+  },
+  parameters: { controls: { includes: [] } },
+};
+
+export const CustomTags: Story = {
+  args: {
+    options: OPTION_NAMES.map((value) => ({ label: value, value })),
+    value: OPTION_NAMES,
+    mode: "tags",
+    tagRender: (props) => <Tag closable>{props.value}</Tag>,
+  },
+  parameters: { controls: { includes: [] } },
+};

clients/fidesui/src/hoc/CustomSelect.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
-import { Icons } from "../index";
+import { Icons, Tag } from "../index";
+import { OPTION_NAMES } from "../stories/utils/content";
 import type { CustomSelectProps } from "./CustomSelect";
 import { CustomSelect } from "./CustomSelect";
 
@@ -16,7 +17,7 @@ const SELECT_VARIANT: Record<
 
 type SelectSize = NonNullable<CustomSelectProps<unknown>["size"]>;
 
-const SELECT_SIZE: SelectSize[] = ["small", "medium", "large"];
+const SELECT_SIZE: SelectSize[] = ["small", "middle", "large"];
 
 const SELECT_MODE: Record<
   NonNullable<CustomSelectProps<unknown>["mode"]>,
@@ -98,3 +99,22 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {};
+
+export const SelectedMultiple: Story = {
+  args: {
+    options: OPTION_NAMES.map((value) => ({ label: value, value })),
+    value: OPTION_NAMES,
+    mode: "multiple",
+  },
+  parameters: { controls: { includes: [] } },
+};
+
+export const CustomTags: Story = {
+  args: {
+    options: OPTION_NAMES.map((value) => ({ label: value, value })),
+    value: OPTION_NAMES,
+    mode: "tags",
+    tagRender: (props) => <Tag closable>{props.value}</Tag>,
+  },
+  parameters: { controls: { includes: [] } },
+};

clients/fidesui/src/stories/utils/content.ts

@@ -10,4 +10,6 @@ export const PARAGRAPH_LOREM =
 
 export const MENU_NAMES = ["About", "Info", "Contact", "Settings"];
 
+export const OPTION_NAMES = ["Fides", "Helios", "Janus", "Lethe", "Astralis"];
+
 export const DAYJS_LOREM = dayjs().date(18).month(8).year(2018);