upcoming: [DI-20800] - CSS for widget size control and feedbacks

venkymano-akamai commented 1 month ago

Description 📝

CSS updates according to UX feedback for widgets and main bar

Changes 🔄

Fixed widget paper wrapper height
Fixed legend table height and overflow on scroll
Removed divider between filters and graph inside widget
Main Bar consistency according to UX margin (24px), divider color update
Placeholder update according to suggestion

Target release date 🗓️

01-10-2024

Preview 📷

Before	After

How to test 🧪

As some of endpoints are not available enable mock service
Go to monitors tab
Select dashboard and filters, you will be able to see widgets and CSS fixes

As an Author I have considered 🤔

Check all that apply

[x] 👀 Doing a self review
[x] ❔ Our contribution guidelines
[x] 🤏 Splitting feature into small PRs
[x] ➕ Adding a changeset
[ ] 🧪 Providing/Improving test coverage
[x] 🔐 Removing all sensitive information from the code and PR description
[x] 🚩 Using a feature flag to protect the release
[ ] 👣 Providing comprehensive reproduction steps
[ ] 📑 Providing or updating our documentation
[ ] 🕛 Scheduling a pair reviewing session
[x] 📱 Providing mobile support
[ ] ♿ Providing accessibility support

venkymano-akamai commented 1 month ago

@jaalah , as discussed the icon names are updated

jaalah-akamai commented 1 month ago

I'm not sure if this is a bug or not, but with the new overflow/scrolling, can we keep the mobile layout the same as desktop? I actually think it looks better and it would enable us to remove a lot of breakpoint specific styles.

Before	After

venkymano-akamai commented 1 month ago

I'm not sure if this is a bug or not, but with the new overflow/scrolling, can we keep the mobile layout the same as desktop? I actually think it looks better and it would enable us to remove a lot of breakpoint specific styles.

Before After

@jaalah-akamai , if it is regarding the styles of legend rows it is actual behaviour of linegraph, this involves changes in actual line graph component i think, anyway as we are migrating to recharts, we don't want to touch the actual line graph component. Let me know your thoughts on this

Also to achieve this we need to the changes in LineGraph.styles.ts and remove all styles involving theme.breakpoints.down('md'). We hope this might have already handled if we go for recharts, so we don't need now

Also , if this is mandatory and no one is using linegraph, we can remove those styles and commit it, please confirm

venkymano-akamai commented 1 month ago

@jaalah-akamai , I addressed most of comments and replied my thoughts on some of the comments, can you please check once?

kmuddapo commented 1 month ago

I'm not sure if this is a bug or not, but with the new overflow/scrolling, can we keep the mobile layout the same as desktop? I actually think it looks better and it would enable us to remove a lot of breakpoint specific styles. Before After

@jaalah-akamai , if it is regarding the styles of legend rows it is actual behaviour of linegraph, this involves changes in actual line graph component i think, anyway as we are migrating to recharts, we don't want to touch the actual line graph component. Let me know your thoughts on this

Also to achieve this we need to the changes in LineGraph.styles.ts and remove all styles involving theme.breakpoints.down('md'). We hope this might have already handled if we go for recharts, so we don't need now

Also , if this is mandatory and no one is using linegraph, we can remove those styles and commit it, please confirm

My recommendation is not to touch the existing linegraph as its a generic component and we anyway planned to migrate to recharts in next sprint (2 weeks from now) and any changes to linegraph might be a throw away code again.

jaalah-akamai commented 1 month ago

Will merge if pipeline passes 👍

kmuddapo commented 1 month ago

For some reason I'm seeing that the first two graphs take up the entire screen width, even on a large screen, vs the last two graphs - not sure if this expected? Is anyone else experiencing the same?

pic 1 pic 2