[Lens] [Dashboard] Remove metric chart progress bar rounded border (#211189)

## Summary

Closes https://github.com/elastic/kibana/issues/174889

1. Removes rounded border shown in metric chart progress bar border
2. Makes the panel heading highlight fit the container
3. Removes rounded border from loader horizontal bar

## Screenshots and screen recordings

1. Removes rounded border shown in metric chart progress bar border

#### Before
<img width="874" alt="Screenshot 2025-02-14 at 21 05 29"
src="https://github.com/user-attachments/assets/ada89180-0cb1-4385-b58d-a6ca068376b7"
/>

#### After

<img width="647" alt="Screenshot 2025-02-14 at 20 30 58"
src="https://github.com/user-attachments/assets/9048a1a5-6afd-418f-994c-69fd68b969b1"
/>/

2. Makes the panel heading highlight fit the container

#### Before

<img width="950" alt="Screenshot 2025-02-14 at 20 34 31"
src="https://github.com/user-attachments/assets/eb4df553-bace-4ce2-b2c0-93829235c5ce"
/>

#### After

<img width="154" alt="Screenshot 2025-02-14 at 20 36 53"
src="https://github.com/user-attachments/assets/2887de13-198d-4ea4-a7a9-57bfd657746f"
/>/

3. Removes rounded border from loader horizontal bar

#### Before


https://github.com/user-attachments/assets/a091f3a1-9d0e-4a55-a45e-9930e6d54983


#### After


https://github.com/user-attachments/assets/5e6fd8d4-407e-45c0-b3ff-ba1884c413c1

### Considerations

We need to make sure that these styles changes do not affect the rest of
the visualizations. I checked different visualizations and it looks like
there are no side effects, e.g metric chart - break down by

<img width="653" alt="Screenshot 2025-02-14 at 20 48 15"
src="https://github.com/user-attachments/assets/d21b6e5d-af53-48be-ac20-646468949fea"
/>
<img width="650" alt="Screenshot 2025-02-14 at 21 03 29"
src="https://github.com/user-attachments/assets/c60d1ca4-671b-492d-8629-5a69e273dc89"
/>

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
This commit is contained in:
Maria Iriarte 2025-03-11 09:34:54 +01:00 committed by GitHub
parent fe80777b6f
commit 9d6ec7dc90
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 2 additions and 3 deletions

View file

@ -186,6 +186,7 @@ const styles = {
flexDirection: 'column',
height: '100%',
position: 'relative',
overflow: 'hidden',
}),
embPanelContent: css({
'&.embPanel__content': {
@ -193,7 +194,6 @@ const styles = {
flex: '1 1 100%',
zIndex: 1,
minHeight: 0, // Absolute must for Firefox to scroll contents
borderRadius: '4px',
overflow: 'hidden',
},
'&.embPanel__content--hidden, &[data-error]': {

View file

@ -24,6 +24,7 @@
border-radius: $euiBorderRadius;
background: $euiColorEmptyShade;
height: 100%;
overflow: hidden;
@include euiScrollBar;
&>* {
flex: 1 1 100%;

View file

@ -10,8 +10,6 @@
height: 100%;
display: flex;
overflow: auto;
// important for visualizations with no padding
border-radius: $euiBorderRadius;
@include euiScrollBar;
.lnsExpressionRenderer__component {
position: static; // Let the progress indicator position itself against the outer parent