Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 23 commits into from
Sep 17, 2024
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
41b1a3d
upcoming: [DI-20709] - CSS updates for widget level filters
venkat199501 Sep 9, 2024
1deb9ee
Merge branch 'develop' of https://github.com/linode/manager into feat…
venkat199501 Sep 9, 2024
d4b2528
upcoming: [DI-20709] - ES lint fixes
venkat199501 Sep 9, 2024
b0abd06
upcoming: [DI-20709] - Added comments
venkat199501 Sep 9, 2024
e0e7f16
upcoming: [DI-20709] - Added changeset
venkat199501 Sep 9, 2024
cb8dc53
upcoming: [DI-20709] - Color updates for zoomer component with use th…
venkat199501 Sep 9, 2024
0764a82
upcoming: [DI-20585] - CSS changes
venkat199501 Sep 10, 2024
00d005d
upcoming: [DI-20585] - Removed unused values and imports
venkat199501 Sep 10, 2024
4611a69
upcoming: [DI-20585] - Removed unused values and imports
venkat199501 Sep 10, 2024
68a4610
upcoming: [DI-20585] - Use common utils
venkat199501 Sep 10, 2024
f00d7a7
upcoming: [DI-20585] - Comment updates
venkat199501 Sep 10, 2024
add192c
upcoming: [DI-20585] - Remove any
venkat199501 Sep 10, 2024
17d8454
upcoming: [DI-20585] - Removing height and adjusting width. Removed d…
venkat199501 Sep 11, 2024
8cedef8
upcoming: [DI-20585] - Removed placeholder on selection and UT updates
venkat199501 Sep 11, 2024
f25ec83
upcoming: [DI-20585] - UT updates
venkat199501 Sep 11, 2024
c9bc84f
upcoming: [DI-20585] - Using form control for width of filters
venkat199501 Sep 12, 2024
2a20ac8
upcoming: [DI-20585] - Alignment fix
venkat199501 Sep 12, 2024
d038ea3
upcoming: [DI-20585] - PR comments
venkat199501 Sep 13, 2024
b3e5bc3
upcoming: [DI-20585] - PR comments
venkat199501 Sep 13, 2024
c319787
Merge branch 'develop' of https://github.com/linode/manager into feat…
venkat199501 Sep 14, 2024
2b44bbf
upcoming: [DI-20585] - Updated code syntax for handling small size sc…
venkat199501 Sep 15, 2024
eb7fe32
upcoming: [DI-20585] - CamelCase for properties
venkat199501 Sep 15, 2024
2383332
upcoming: [DI-20585] - Style to sx
venkat199501 Sep 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/manager/.changeset/pr-10903-upcoming-features-1725857694589.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@linode/manager": Upcoming Features
---

Update CSS for widget level filters and widget heading title for ACLP ([#10903](https://github.com/linode/manager/pull/10903))
4 changes: 4 additions & 0 deletions packages/manager/src/features/CloudPulse/Utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,7 @@ export const TIME_GRANULARITY = 'timeGranularity';
export const RELATIVE_TIME_DURATION = 'relative_time_duration';

export const RESOURCE_ID = 'resource_id';

export const WIDGET_FILTERS_COMMON_HEIGHT = '22px'; // for all the widget level filters, the height is 22px.

export const WIDGET_FILTERS_COMMON_FONT_SIZE = '12px';
6 changes: 1 addition & 5 deletions packages/manager/src/features/CloudPulse/Widget/CloudPulseWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,11 +298,7 @@ export const CloudPulseWidget = (props: CloudPulseWidgetProperties) => {
justifyContent={{ sm: 'space-between' }}
padding={1}
>
<Typography
fontSize={{ sm: '1.5rem', xs: '2rem' }}
marginLeft={1}
variant="h1"
>
<Typography marginLeft={1} variant="h2">
{convertStringToCamelCasesWithSpaces(widget.label)}{' '}
{!isLoading &&
`(${currentUnit}${unit.endsWith('ps') ? '/s' : ''})`}
Expand Down
20 changes: 20 additions & 0 deletions packages/manager/src/features/CloudPulse/Widget/components/CloudPulseAggregateFunction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import { useTheme } from '@mui/material';
import React from 'react';

import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';

import {
WIDGET_FILTERS_COMMON_FONT_SIZE,
WIDGET_FILTERS_COMMON_HEIGHT,
} from '../../Utils/constants';

export interface AggregateFunctionProperties {
/**
* List of aggregate functions available to display
Expand Down Expand Up @@ -36,6 +42,8 @@ export const CloudPulseAggregateFunction = React.memo(
(obj) => obj.label === props.defaultAggregateFunction
) || props.availableAggregateFunctions[0];

const theme = useTheme();

return (
<Autocomplete
isOptionEqualToValue={(option, value) => {
Expand All @@ -45,6 +53,18 @@ export const CloudPulseAggregateFunction = React.memo(
props.onAggregateFuncChange(selectedAggregateFunc.label);
}}
textFieldProps={{
InputProps: {
sx: {
height: WIDGET_FILTERS_COMMON_HEIGHT,
input: {
fontSize: WIDGET_FILTERS_COMMON_FONT_SIZE,
},
minHeight: WIDGET_FILTERS_COMMON_HEIGHT,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

svg: {
color: theme.color.grey3,
},
},
},
hideLabel: true,
}}
defaultValue={defaultAggregateFunc}
Expand Down
20 changes: 20 additions & 0 deletions packages/manager/src/features/CloudPulse/Widget/components/CloudPulseIntervalSelect.tsx
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Screenshot 2024-09-12 at 1 35 44 PM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import { useTheme } from '@mui/material';
import React from 'react';

import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';

import {
WIDGET_FILTERS_COMMON_FONT_SIZE,
WIDGET_FILTERS_COMMON_HEIGHT,
} from '../../Utils/constants';

import type { TimeGranularity } from '@linode/api-v4';

export interface IntervalSelectProperties {
Expand Down Expand Up @@ -108,6 +114,8 @@ export const CloudPulseIntervalSelect = React.memo(
});
}

const theme = useTheme();

return (
<Autocomplete
isOptionEqualToValue={(option, value) => {
Expand All @@ -120,6 +128,18 @@ export const CloudPulseIntervalSelect = React.memo(
});
}}
textFieldProps={{
InputProps: {
sx: {
height: WIDGET_FILTERS_COMMON_HEIGHT,
input: {
fontSize: WIDGET_FILTERS_COMMON_FONT_SIZE,
},
minHeight: WIDGET_FILTERS_COMMON_HEIGHT,
svg: {
color: theme.color.grey3,
},
},
},
hideLabel: true,
}}
defaultValue={{ ...default_interval }}
Expand Down
17 changes: 15 additions & 2 deletions packages/manager/src/features/CloudPulse/Widget/components/Zoomer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
import ZoomInMap from '@mui/icons-material/ZoomInMap';
import ZoomOutMap from '@mui/icons-material/ZoomOutMap';
import { useTheme } from '@mui/material/styles';
import * as React from 'react';

import { WIDGET_FILTERS_COMMON_HEIGHT } from '../../Utils/constants';

export interface ZoomIconProperties {
className?: string;
handleZoomToggle: (zoomIn: boolean) => void;
zoomIn: boolean;
}

export const ZoomIcon = React.memo((props: ZoomIconProperties) => {
const theme = useTheme();

const handleClick = (needZoomIn: boolean) => {
props.handleZoomToggle(needZoomIn);
};
Expand All @@ -17,18 +22,26 @@ export const ZoomIcon = React.memo((props: ZoomIconProperties) => {
if (props.zoomIn) {
return (
<ZoomInMap
style={{
color: theme.color.grey1,
fontSize: 'x-large',
height: WIDGET_FILTERS_COMMON_HEIGHT,
}}
data-testid="zoom-in"
onClick={() => handleClick(false)}
style={{ color: 'grey', fontSize: 'x-large' }}
/>
);
}

return (
<ZoomOutMap
style={{
color: theme.color.grey1,
fontSize: 'x-large',
height: WIDGET_FILTERS_COMMON_HEIGHT,
}}
data-testid="zoom-out"
onClick={() => handleClick(true)}
style={{ color: 'grey', fontSize: 'x-large' }}
/>
);
};
Expand Down