upcoming: [DI-20709] - CSS updates for widget level filters for ACLP #10903

venkymano-akamai · 2024-09-09T04:43:45Z

Description 📝

Some simple CSS updates for reducing the height and font size of the widget level filter components.

Changes 🔄

Updated the CSS of input props of the autocomplete components in widget level filters
Updated the height of the zoom icon component
Update the variant of typography to h2 in widget heading title.
Updated the multiselect components to not show placeholder if a item is selected
Updated the widget component by removing the divider

Target release date 🗓️

16-09-2024

Preview 📷

Before	After

How to test 🧪

Login as mock user as some of endpoints are not production ready
Navigate to the monitor page
Select a linode dashboard and all required filters
You will be able to see the widgets with updated CSS.

As an Author I have considered 🤔

Check all that apply

…ure/css_fix

…em hook

venkymano-akamai · 2024-09-09T10:50:26Z

packages/manager/src/features/CloudPulse/Widget/components/CloudPulseAggregateFunction.tsx

+              input: {
+                fontSize: WIDGET_FILTERS_COMMON_FONT_SIZE,
+              },
+              minHeight: WIDGET_FILTERS_COMMON_HEIGHT,


FYI, Since the minHeight of textFieldInput is by default 34px and it is same everywhere in our application. We need to pass both min height and height for our use case

jaalah-akamai · 2024-09-09T14:21:10Z

A couple thoughts here, because I'm not convinced this is the right approach:

I'm not for defining global css styles in constant files. We're actually moving away from this in Q4 when we begin incorporating design tokens and removing hard-coded styles like this. Things like this should really come from the theme file. If there's an actual UX ask for a different size autocomplete then we need to find a more prop-driven way to handle that.
With that said, why do we want to reduce the height of the Autocomplete in this specific scenario? Is this a UX ask because it would differ from everywhere else we're using Autocompletes.
With these current changes, the alignment of the text within the Autocomplete is off
The typography title change to H2 is ok

venkymano-akamai · 2024-09-09T14:56:56Z

@jaalah-akamai , Yes this is an UX ask for reducing the height of the autocomplete, and as per latest mockups it should be of 22px.

Happy to discuss a more suitable approach to achieve this without affecting the styles.

venkymano-akamai · 2024-09-10T10:14:27Z

@jaalah-akamai , we have updated the implementation approach by, using styledautocomplete, that will set the minheight and padding for us, can you please look into this and let us know. If you have any new suggestions on the approach, please let us know

With these current changes, the alignment of the text within the Autocomplete is off - for this comment, i think there is not alignment impact since we are controlling the placement of text within autocomplete by padding. Adjusted the padding as well

github-actions · 2024-09-10T15:41:16Z

Coverage Report: ❌
Base Coverage: 86.64%
Current Coverage: 86.63%

gitkcosby · 2024-09-10T16:22:57Z

Just speaking from the UX side, the autocomplete input height should not be adjusted. The UX designers on this project can resolve any alignment questions. In the event a new size or style variation for a given component is needed, we can address that.

venkymano-akamai · 2024-09-11T04:42:09Z

Just speaking from the UX side, the autocomplete input height should not be adjusted. The UX designers on this project can resolve any alignment questions. In the event a new size or style variation for a given component is needed, we can address that.

@gitkcosby , we need to reduce the height of the Autocomplete to 22px, since the input's min height is 34px, we need to adjust the minHeight to achieve this, because, reducing the height of autocomplete to 22px, doesn't work here.

kmuddapo · 2024-09-11T10:29:13Z

Just speaking from the UX side, the autocomplete input height should not be adjusted. The UX designers on this project can resolve any alignment questions. In the event a new size or style variation for a given component is needed, we can address that.

@gitkcosby Is this applicable even for width? We shouldn't reduce it?

…ivider in widget

venkymano-akamai · 2024-09-11T13:07:13Z

@jaalah-akamai / @gitkcosby , we have reverted the height changes and kept the original, now only we have reduced the width, let us know if this is okay.

Also added couple of changes for removing placeholder if an element is selected in a multi select filter component

mjac0bs

Seeing a typecheck CI error in a test file for an unused import, which will need to be fixed: https://github.com/linode/manager/actions/runs/10830866544/job/30068135825?pr=10903

And some additional feedback just from viewing the latest UI, since I hadn't in a little while. Are there tickets to address the following in upcoming PRs?

DbaaS is not capitalized consistently in the dashboard dropdown, reading Dbaas.

There are white space and padding issues with the legends in the graphs.

To reiterate - we shouldn't address these in this PR, but we will want to fix them and just want to make sure they're accounted for.

mjac0bs · 2024-09-12T20:51:50Z

packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx

@@ -39,7 +45,7 @@ export const getInSeconds = (interval: string) => {
 };

 // Intervals must be in ascending order here
-export const all_interval_options = [
+export const all_interval_options: IntervalOptions[] = [


Suggested change

export const all_interval_options: IntervalOptions[] = [

export const allIntervalOptions: IntervalOptions[] = [

We use camel case for variable names throughout the codebase. Can we be consistent?

mjac0bs · 2024-09-12T20:53:20Z

packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx

Is there a reason why we're not placing the options side by side and stacking them instead? There's a lot of empty space, so it looks a bit odd.

They used to be longer, but with the changes this looks weird. You're correct, the grid will need to be adjusted now

@mjac0bs / @jaalah-akamai , for smaller screens we have made the autocomplete to occupy 100 percent width now, please check

Thanks @venkymano-akamai, this looks much better on small screens. I left one comment about how to write that styling rule better to rely on our theme.

venkymano-akamai · 2024-09-13T04:27:14Z

@mjac0bs / @jaalah-akamai ,

Have addressed the CI error.
Have made the drop down to occupy the entire width of row for easier selections.
Also addressed the camelCase issue
The legend rows will be updated in upcoming PR's, anyway we are moving to recharts as well.

Hope this is good now.

jdamore-linode · 2024-09-13T14:37:49Z

@venkymano-akamai any chance you can merge in the latest changes from develop? It contains a workaround for the API issue that's causing a lot of the test failures on this PR

mjac0bs

@venkymano-akamai Thanks for the reminder about Recharts.

My feedback about Dbaas not being capitalized consistently in the Select still stands, and we should be using DBaaS in copy consistently. Can you provide me with a ticket number where that fix will be made?

Left a couple of more review recommendations on my last pass, but approving pending those are addressed and tests pass.

mjac0bs · 2024-09-13T14:34:17Z

packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx

            firstIntervalIndex,
-            all_interval_options.length
+            allIntervalOptions.length
          );

    let default_interval =


Nit: default_interval existed before this PR, but same comment about preferring camel case over snake case to keep in mind when going forward.

mjac0bs · 2024-09-13T14:57:59Z

packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx

+          style={{
+            color: theme.color.grey1,
+            fontSize: 'x-large',
+            height: '34px',
+          }}
          data-testid="zoom-in"
          onClick={() => handleClick(false)}
-          style={{ color: 'grey', fontSize: 'x-large' }}
        />
      );
    }

    return (
      <ZoomOutMap
+        style={{
+          color: theme.color.grey1,
+          fontSize: 'x-large',
+          height: '34px',
+        }}


Can we use the sx prop here? (docs reference)

mjac0bs · 2024-09-13T15:01:49Z

packages/manager/src/features/CloudPulse/Utils/CloudPulseWidgetUtils.ts

+  label: 'StyledAutocomplete',
+})(() => ({
+  '&& .MuiFormControl-root': {
+    '@media (max-width: 600px)': {


Using our theme.breakpoint values is a better way to do this. For example:

export const StyledWidgetAutocomplete = styled(Autocomplete, { label: 'StyledAutocomplete', })(({ theme }) => ({ '&& .MuiFormControl-root': { minWidth: '90px', [theme.breakpoints.down('sm')]: { width: '100%', // 100% width for xs and small screens }, width: '90px', }, }));

mjac0bs · 2024-09-13T15:03:07Z

packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx

Thanks @venkymano-akamai, this looks much better on small screens. I left one comment about how to write that styling rule better to rely on our theme.

…ure/css_fix

…reens

venkymano-akamai · 2024-09-15T12:50:41Z

@mjac0bs , Thanks for the pass and addressed those pending comments as well.

@jaalah-akamai , Can we get a second pass?

venkymano-akamai · 2024-09-17T15:12:57Z

@jaalah-akamai , we have enough approvals, Can we merge it?

…inode#10903) * upcoming: [DI-20709] - CSS updates for widget level filters * upcoming: [DI-20709] - ES lint fixes * upcoming: [DI-20709] - Added comments * upcoming: [DI-20709] - Added changeset * upcoming: [DI-20709] - Color updates for zoomer component with use them hook * upcoming: [DI-20585] - CSS changes * upcoming: [DI-20585] - Removed unused values and imports * upcoming: [DI-20585] - Removed unused values and imports * upcoming: [DI-20585] - Use common utils * upcoming: [DI-20585] - Comment updates * upcoming: [DI-20585] - Remove any * upcoming: [DI-20585] - Removing height and adjusting width. Removed divider in widget * upcoming: [DI-20585] - Removed placeholder on selection and UT updates * upcoming: [DI-20585] - UT updates * upcoming: [DI-20585] - Using form control for width of filters * upcoming: [DI-20585] - Alignment fix * upcoming: [DI-20585] - PR comments * upcoming: [DI-20585] - PR comments * upcoming: [DI-20585] - Updated code syntax for handling small size screens * upcoming: [DI-20585] - CamelCase for properties * upcoming: [DI-20585] - Style to sx --------- Co-authored-by: vmangalr <vmangalr@akamai.com>

vmangalr added 3 commits September 9, 2024 09:57

upcoming: [DI-20709] - CSS updates for widget level filters

41b1a3d

Merge branch 'develop' of https://github.com/linode/manager into feat…

1deb9ee

…ure/css_fix

upcoming: [DI-20709] - ES lint fixes

d4b2528

venkymano-akamai requested a review from a team as a code owner September 9, 2024 04:43

venkymano-akamai requested review from mjac0bs and jaalah-akamai and removed request for a team September 9, 2024 04:43

vmangalr added 3 commits September 9, 2024 10:21

upcoming: [DI-20709] - Added comments

b0abd06

upcoming: [DI-20709] - Added changeset

e0e7f16

upcoming: [DI-20709] - Color updates for zoomer component with use th…

cb8dc53

…em hook

nikhagra-akamai approved these changes Sep 9, 2024

View reviewed changes

venkymano-akamai commented Sep 9, 2024

View reviewed changes

coliu-akamai assigned venkymano-akamai Sep 9, 2024

coliu-akamai added the CloudPulse label Sep 9, 2024

vmangalr added 4 commits September 10, 2024 13:31

upcoming: [DI-20585] - CSS changes

0764a82

upcoming: [DI-20585] - Removed unused values and imports

00d005d

upcoming: [DI-20585] - Removed unused values and imports

4611a69

upcoming: [DI-20585] - Use common utils

68a4610

vmangalr added 2 commits September 10, 2024 15:51

upcoming: [DI-20585] - Comment updates

f00d7a7

upcoming: [DI-20585] - Remove any

add192c

vmangalr added 3 commits September 11, 2024 16:22

upcoming: [DI-20585] - Removing height and adjusting width. Removed d…

17d8454

…ivider in widget

upcoming: [DI-20585] - Removed placeholder on selection and UT updates

8cedef8

upcoming: [DI-20585] - UT updates

f25ec83

vmangalr added 2 commits September 12, 2024 18:00

upcoming: [DI-20585] - Using form control for width of filters

c9bc84f

upcoming: [DI-20585] - Alignment fix

2a20ac8

mjac0bs reviewed Sep 12, 2024

View reviewed changes

upcoming: [DI-20585] - PR comments

d038ea3

venkymano-akamai requested a review from mjac0bs September 13, 2024 04:27

upcoming: [DI-20585] - PR comments

b3e5bc3

mjac0bs approved these changes Sep 13, 2024

View reviewed changes

vmangalr added 4 commits September 14, 2024 08:12

Merge branch 'develop' of https://github.com/linode/manager into feat…

c319787

…ure/css_fix

upcoming: [DI-20585] - Updated code syntax for handling small size sc…

2b44bbf

…reens

upcoming: [DI-20585] - CamelCase for properties

eb7fe32

upcoming: [DI-20585] - Style to sx

2383332

jaalah-akamai approved these changes Sep 17, 2024

View reviewed changes

coliu-akamai added the Approved Multiple approvals and ready to merge! label Sep 17, 2024

jaalah-akamai merged commit 44763ea into linode:develop Sep 17, 2024
19 of 20 checks passed

This was referenced Sep 25, 2024

Release v1.129.0 - release → staging #11006

Merged

Release v1.129.0 - staging → master #11013

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

upcoming: [DI-20709] - CSS updates for widget level filters for ACLP #10903

upcoming: [DI-20709] - CSS updates for widget level filters for ACLP #10903

venkymano-akamai commented Sep 9, 2024 •

edited

Loading

venkymano-akamai Sep 9, 2024

jaalah-akamai commented Sep 9, 2024

venkymano-akamai commented Sep 9, 2024

venkymano-akamai commented Sep 10, 2024 •

edited

Loading

github-actions bot commented Sep 10, 2024 •

edited

Loading

gitkcosby commented Sep 10, 2024

venkymano-akamai commented Sep 11, 2024

kmuddapo commented Sep 11, 2024

venkymano-akamai commented Sep 11, 2024 •

edited

Loading

mjac0bs left a comment

mjac0bs Sep 12, 2024

mjac0bs Sep 12, 2024

jaalah-akamai Sep 12, 2024

venkymano-akamai Sep 13, 2024

mjac0bs Sep 13, 2024

venkymano-akamai commented Sep 13, 2024 •

edited

Loading

jdamore-linode commented Sep 13, 2024 •

edited

Loading

mjac0bs left a comment

mjac0bs Sep 13, 2024

venkymano-akamai Sep 15, 2024

mjac0bs Sep 13, 2024 •

edited

Loading

venkymano-akamai Sep 15, 2024

mjac0bs Sep 13, 2024

venkymano-akamai Sep 15, 2024

mjac0bs Sep 13, 2024

venkymano-akamai commented Sep 15, 2024

venkymano-akamai commented Sep 17, 2024

	export const all_interval_options: IntervalOptions[] = [
	export const allIntervalOptions: IntervalOptions[] = [

upcoming: [DI-20709] - CSS updates for widget level filters for ACLP #10903

upcoming: [DI-20709] - CSS updates for widget level filters for ACLP #10903

Conversation

venkymano-akamai commented Sep 9, 2024 • edited Loading

Description 📝

Changes 🔄

Target release date 🗓️

Preview 📷

How to test 🧪

As an Author I have considered 🤔

Choose a reason for hiding this comment

jaalah-akamai commented Sep 9, 2024

venkymano-akamai commented Sep 9, 2024

venkymano-akamai commented Sep 10, 2024 • edited Loading

github-actions bot commented Sep 10, 2024 • edited Loading

gitkcosby commented Sep 10, 2024

venkymano-akamai commented Sep 11, 2024

kmuddapo commented Sep 11, 2024

venkymano-akamai commented Sep 11, 2024 • edited Loading

mjac0bs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

venkymano-akamai commented Sep 13, 2024 • edited Loading

jdamore-linode commented Sep 13, 2024 • edited Loading

mjac0bs left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mjac0bs Sep 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

venkymano-akamai commented Sep 15, 2024

venkymano-akamai commented Sep 17, 2024

venkymano-akamai commented Sep 9, 2024 •

edited

Loading

venkymano-akamai commented Sep 10, 2024 •

edited

Loading

github-actions bot commented Sep 10, 2024 •

edited

Loading

venkymano-akamai commented Sep 11, 2024 •

edited

Loading

venkymano-akamai commented Sep 13, 2024 •

edited

Loading

jdamore-linode commented Sep 13, 2024 •

edited

Loading

mjac0bs Sep 13, 2024 •

edited

Loading