upcoming: [DI-23773] - Added the tooltip icon for Add buttons in disabled state

packages/manager/.changeset/pr-11825-upcoming-features-1741714373810.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Removed `sxEndIcon` prop from Add Metric, Dimension Filter and Notification Channel buttons. ([#11825](https://github.com/linode/manager/pull/11825))

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/DimensionFilter.tsx

@@ -33,7 +33,6 @@ export const DimensionFilters = (props: DimensionFilterProps) => {
   });
 
   const dimensionFilterWatcher = useWatch({ control, name });
-
   return (
     <Box display="flex" flexDirection="column" gap={1}>
       <Typography variant="h3">
@@ -61,13 +60,11 @@ export const DimensionFilters = (props: DimensionFilterProps) => {
             value: null,
           })
         }
-        buttonType="secondary"
         compactX
         data-qa-buttons="true"
         disabled={dimensionFilterWatcher && dimensionFilterWatcher.length === 5}
         size="small"
-        sx={{ justifyContent: 'start', width: '150px' }}
-        sxEndIcon={{ display: 'none' }}
+        sx={{ justifyContent: 'start', width: '160px' }}
         tooltipText="You can add up to 5 dimension filters."
       >
         Add dimension filter

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/Criteria/MetricCriteria.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Stack, Typography } from '@linode/ui';
+import { Button, Stack, Typography } from '@linode/ui';
 import * as React from 'react';
 import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 
@@ -66,16 +66,9 @@ export const MetricCriteriaField = (props: MetricCriteriaProps) => {
   });
 
   return (
-    <Box sx={(theme) => ({ marginTop: theme.spacing(3) })}>
-      <Box
-        alignItems="center"
-        display="flex"
-        justifyContent="space-between"
-        sx={{ marginBottom: 1 }}
-      >
-        <Typography variant="h2">3. Criteria</Typography>
-      </Box>
-      <Stack spacing={2} sx={(theme) => ({ marginTop: theme.spacing(3) })}>
+    <Stack mt={3} spacing={2}>
+      <Typography variant="h2">3. Criteria</Typography>
+      <Stack spacing={2}>
         {fields !== null &&
           fields.length !== 0 &&
           fields.map((field, index) => {
@@ -102,15 +95,16 @@ export const MetricCriteriaField = (props: MetricCriteriaProps) => {
             threshold: 0,
           })
         }
+        sx={{
+          width: '130px', // added a nice width for the button
+        }}
         buttonType="outlined"
         disabled={metricCriteriaWatcher.length === 5}
         size="medium"
-        sx={(theme) => ({ marginTop: theme.spacing(2) })}
-        sxEndIcon={{ display: 'none' }}
         tooltipText="You can add up to 5 metrics."
       >
         Add metric
       </Button>
-    </Box>
+    </Stack>
   );
 };

packages/manager/src/features/CloudPulse/Alerts/CreateAlert/NotificationChannels/AddChannelListing.tsx

@@ -166,9 +166,7 @@ export const AddChannelListing = (props: AddChannelListingProps) => {
             onClick={handleOpenDrawer}
             size="medium"
             sx={(theme) => ({ marginTop: theme.spacing(2) })}
-            sxEndIcon={{ display: 'none' }}
             tooltipText="You can add up to 5 notification channels."
-            type="button"
           >
             Add notification channel
           </Button>