[Unified Search] Change filter styling

[kowalczyk-krzysztof]

Summary

This PR changes filter styling to match suggestion proposed here.

Closes: #158875

Visuals

Previous	New

[elasticmachine]

Pinging @elastic/kibana-visualizations (Team:Visualizations)

[cauemarcondes]

LGTM

[ghudgins]

@kowalczyk-krzysztof I played with it and I don't think it's a good UX to use the tag. can we bold the AND's and ORs instead? I think that could at least nudge it in the right direction

thanks for flagging it

[kowalczyk-krzysztof]

@kowalczyk-krzysztof I played with it and I don't think it's a good UX to use the tag. can we bold the AND's and ORs instead? I think that could at least nudge it in the right direction

thanks for flagging it

@ghudgins Sure, I got rid of the badge and made it so it's EuiTextColor again with same color it was but bold.

[andreadelrio]

Hi @kowalczyk-krzysztof, thanks for taking this on. After revising the design proposed last year I have an updated proposal. See:

Essentially I think we should increase the font size and reduce the font weight, this will help with readability and reduces visual noise. Also, instead of using the warning EuiBadge we should use the hollow EuiBadge (I checked with Graham and he's onboard).

Also can you add some padding above the Preview heading? Something like 16px or 24px should work (see the screen attached to see how it should look).

[kowalczyk-krzysztof]

@andreadelrio
Thanks for the update. I've made changes to this PR to include your latest design.

[andreadelrio]

@kowalczyk-krzysztof thanks for the updates. I'm still seeing some Preview text in 12px, please change to 14px.

[andreadelrio]

@kowalczyk-krzysztof please see:

[kowalczyk-krzysztof]

@kowalczyk-krzysztof please see:

Thanks for the feedback @andreadelrio - I'll make the requested changes, however, when it comes to filter pill, I'm not sure if it'll be a quick fix as the component used in preview and filter pill is the same in both cases and I'm not sure yet if there's an easy way to differentiate the source.

cc: @ghudgins

[ghudgins]

I caught up with @andreadelrio and think we can proceed with her recommendations even though it's going in both places

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 89d6d3c

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
unifiedSearch	357.5KB	358.1KB	+688.0B

History

• 💔 Build #254119 failed 46b61d5
• 💛 Build #253454 was flaky ef78e4d
• 💛 Build #253005 was flaky 2e7d7dd
• 💚 Build #252504 succeeded 274aae6
• 💔 Build #252479 failed 2718216
• 💔 Build #252440 failed fac437a

cc @kowalczyk-krzysztof

[kowalczyk-krzysztof]

@ghudgins
Ok so if I understood correctly, we're going with the approach that both filter pills and filter preview will behave the same? If that's true, @andreadelrio could you please re-review this PR.

[ghudgins]

yes, looks good to me. just checked it out on the branch.

@andreadelrio any concerns?

as it is today

[andreadelrio]

yes, looks good to me. just checked it out on the branch.

@andreadelrio any concerns?

as it is today

The introduction of the badge inside the pill makes pills look slightly more chunky (see image attached). This is an issue because we're trying to make our UI elements compressed (already did with controls, Unified Search bar will follow). There's also the issue of it kind of looking like a filter pill is inside another filter pill which is not the case. @kowalczyk-krzysztof can you confirm whether the effort to keep the styles separate be too big?

[kowalczyk-krzysztof]

yes, looks good to me. just checked it out on the branch.
@andreadelrio any concerns?

as it is today

The introduction of the badge inside the pill makes pills look slightly more chunky (see image attached). This is an issue because we're trying to make our UI elements compressed (already did with controls, Unified Search bar will follow). There's also the issue of it kind of looking like a filter pill is inside another filter pill which is not the case. @kowalczyk-krzysztof can you confirm whether the effort to keep the styles separate be too big?

@andreadelrio Yeah I couldn't really figure out a way to properly separate the styles and I still don't think it's a quick change and the level of effort required might be too big, considering this was supposed to be a papercut. The easiest solution would be just to give up on the badge and keep it as text in both places.
cc @ghudgins

[ghudgins]

if there's nothing we can do about the vertical space we're creating in the pills then yeah we should close the PR. sorry for the runaround....