XWIKI-22674: Search facets item count misalignment #3758

Sereza7 · 2024-12-12T10:56:14Z

Jira URL

https://jira.xwiki.org/browse/XWIKI-22674

Changes

Description

Fixed the alignment
Added a highlight of the counters
reduced the size of counter text

Clarifications

There are a few changes that are not necessary for XWIKI-22674. However, they are closely related and a first step on the way to implementation of the improvements described in XWIKI-22676.

Screenshots & Video

After the PR:

Here is a quick video demo of how the elements interact and helping to see how they align with each other.

2024-12-12.11-50-06.mp4

Executed Tests

None except manual tests shown above, style changes in a SSX only almost never have any impact on tests, especially those which don't involve hiding some elements like this one.

Expected merging strategy

Prefers squash: Yes
Backport on branches:
- 16.10.X (no reason not to, relatively low scope and low criticity changes)

* Fixed the alignment * Added a highlight of the counters * reduced the size of counter text

Sereza7 · 2024-12-12T10:59:05Z

@tkrieck Can you validate that the changes proposed here are okay with what you reported https://jira.xwiki.org/browse/XWIKI-22674 and proposed in https://jira.xwiki.org/browse/XWIKI-22676 ? As a precision, this is not a full implementation of your UI proposal, it's just a first step to update the style of the counts .

Thanks!

tkrieck · 2024-12-12T13:42:18Z

@tkrieck Can you validate that the changes proposed here are okay with what you reported https://jira.xwiki.org/browse/XWIKI-22674 and proposed in https://jira.xwiki.org/browse/XWIKI-22676 ? As a precision, this is not a full implementation of your UI proposal, it's just a first step to update the style of the counts .

Thanks!

Hi @Sereza7 thank you for taking this issue. Yes it's perfect, I know it's not a full implementation, but the misalignment was pretty important to give the UI a polished look.

manuelleduc · 2024-12-13T09:21:49Z

...ki-platform-search-solr/xwiki-platform-search-solr-ui/src/main/resources/Main/SolrSearch.xml

  margin-left: auto;
+  background-color: $theme.highlightColor;
+  border-radius: 7px; /* Same value as @border-radius-base from Flamingo. */


Can't we use a variable from a theme here instead of a hard-coded value?

It's a CSS SSX, so we can't use LESS variables directly:

We would need to migrate it to a LESS SSX. In order to do so, we'd need to remove all the references to old color theme variables (which are in the format $theme.<something>) and find an equivalent in the LESS variables we have. It's a bit beyond the scope of this PR, and I'm not really eager to move things to LESS knowing that we'll soon want to get back to regular CSS...

Note that this situation (with the exact same comment) has already been encountered and solved like this:
https://github.com/search?q=repo%3Axwiki%2Fxwiki-platform+Same+value+as+%40border-radius-base+from+Flamingo.&type=code

manuelleduc · 2024-12-13T09:22:05Z

...ki-platform-search-solr/xwiki-platform-search-solr-ui/src/main/resources/Main/SolrSearch.xml

  margin-left: auto;
+  background-color: $theme.highlightColor;
+  border-radius: 7px; /* Same value as @border-radius-base from Flamingo. */
+  font-size: 0.8em;


Same question for the font-size.

Here it's the .small mixin and not a variable. We don't have an alternative for CSS yet, so I just went with a hardcoded value.
Note that even in LESS this value gets hardcoded often ^^'
https://github.com/search?q=repo%3Axwiki%2Fxwiki-platform+font-size%3A&type=code

Shouldn't we start adding a common mechanism asap instead of hard-coding them more and more?
iirc we agreed to start using CSS variables, can't we introduce one for this?

@manuelleduc

I'd rather introduce them all at once so that we don't duplicate things or have inconsistent ways to provide them.

If that's okay with you, I think it'd make sense to put this PR on hold (as a draft) as long as XWIKI-22667 is not done. This ticket could be too high priority to wait for this though.

WDYT?

tkrieck

As stated in another comment, the changes fix the main issue from the Jira. I won't comment on the code though, as Manual already did it.

All is fine by me, thank you! 👍

Sereza7 · 2024-12-13T10:04:42Z

All comments have been addressed. This PR is ready for more discussion or a merge.

Sereza7 · 2025-03-12T10:56:31Z

See #3758 (comment)

* Added one variable to the CSS property set. * Used CSS properties instead of hard coding in all the places where it was explicitely mentionned that we should use a variable, and the ones discussed on the PR.

Sereza7 · 2025-03-26T10:08:01Z

We don't have a way in CSS properties to port 1to1 the .small mixin. However it can be easily replaced with a CSS property. I created --font-size-small for this use case. Right now the value is set in rem, same as --font-size-base. This means that we won't be able to use it exactly like the mixin, but it works here and AFAIR we didn't use this mixin in a lot of contexts in XS anyways. Maybe we'll need to swap the variable to em at some point (and change its name to avoid creating confusion), but for now this is enough.

I took the opportunity to update the other places with similar comments where we had a hard-coded value :)

Here are a few screenshots of the tests on a local instance with the latest CSS variables setup:

(Don't mind the weird look of the gallery macro, it's unrelated to the changes here, we can see that the border-radius applies as expected)

Sereza7 · 2025-03-26T10:10:58Z

@manuelleduc This is a small scale usage of CSS variables we just introduced with XWIKI-22667 :)

manuelleduc · 2025-03-27T09:07:51Z

@manuelleduc This is a small scale usage of CSS variables we just introduced with XWIKI-22667 :)

Are you sure we can do this? XWIKI-22667 is for 17.3.0RC1+ while this PR is labelled as applicable to 16.10.x too.

Sereza7 · 2025-03-27T14:22:10Z

This is not a regression but a small UI bugfix. I removed the backport label from the PR (and updated the JIRA fix version). IMO this is completely okay to not backport it on stable.

Thanks for noticing the inconsistency :)

manuelleduc · 2025-03-27T15:16:30Z

...skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/cssVariablesInit.css

+## List of all the new variables added to the CSS property set.
+## Those variables do not have a LESS variable equivalent in previous systems. They were introduced mostly to replace
+## whole mixins. There should be no overlap between this category of variables and the others.
+#set($newVariables = {


More than the fact that those variables are "new", what important imo is to clearly document when they have been introduced.

Thanks for the review!
Added the version numbers at the start, since I couldn't find a way to add a velocity comment inside the list declaration (ideally it would have been on every line).

Addressed in 8e537f9 👍

Yes, but indeed Velocity does not allow it.

manuelleduc

lgtm, just the remark on new variables versions documentation to address

* Made the version of introduction explicit for each variable

Sereza7 · 2025-04-02T14:57:16Z

@manuelleduc Can we merge this PR on master?

manuelleduc · 2025-04-02T15:01:26Z

...skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/cssVariablesInit.css

+## List of versions where variables were introduced:
+## * 17.3.0RC1: 100vw, int-viewport-width, font-size-small
+#set($newVariables = {
+"100vw": "100vw",


Feels off to have the key being precisely the value. Can't we find a more descriptive key?

A more descriptive key would be vw-viewport-width to match the pattern of the one defined next to it. However it's simpler to understand and use as it is now. For technical reasons you do need this variable. IMO this shouldn't be an API (using it now but with CSS variable spec improvements we should not need it anymore). I don't expect any customization to rely on this variable anyways, it's only useful for some complex formulas.

See how the hack works at https://css-tricks.com/typecasting-and-viewport-transitions-in-css-with-tanatan2/#aa-setting-things-up

manuelleduc · 2025-04-02T15:03:04Z

...skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/cssVariablesInit.css

-"100vw": "100vw",
-"int-viewport-width": "calc(10000 * tan(atan2(var(--100vw), 10000px)))",


Why are those variables moved to the "new" section if they were already there (and therefore not new)?

I added them for the migration of LESS to CSS formulas. There is no @100vw or @int-viewport-width in LESS.

I just didn't think of the use of separating them from values inherited from the LESS system when I did the first implementation for XWIKI-21667.

XWIKI-22674: Search facets item count misalignment

4467801

* Fixed the alignment * Added a highlight of the counters * reduced the size of counter text

Sereza7 assigned manuelleduc Dec 12, 2024

Sereza7 mentioned this pull request Dec 12, 2024

XWIKI-22675: Extra line below facet items #3759

Merged

manuelleduc self-requested a review December 13, 2024 08:07

manuelleduc added the backport stable-16.10.x label Dec 13, 2024

manuelleduc requested a review from tkrieck December 13, 2024 09:15

manuelleduc reviewed Dec 13, 2024

View reviewed changes

tkrieck reviewed Dec 13, 2024

View reviewed changes

Sereza7 requested a review from manuelleduc December 13, 2024 10:04

Sereza7 marked this pull request as draft March 12, 2025 10:56

Sereza7 marked this pull request as ready for review March 24, 2025 12:32

Sereza7 marked this pull request as draft March 24, 2025 12:33

Sereza7 added 2 commits March 26, 2025 10:27

Merge branch 'xwiki:master' into XWIKI-22674

f3f8210

XWIKI-22674: Search facets item count misalignment

b04eafa

* Added one variable to the CSS property set. * Used CSS properties instead of hard coding in all the places where it was explicitely mentionned that we should use a variable, and the ones discussed on the PR.

Sereza7 marked this pull request as ready for review March 26, 2025 10:09

Sereza7 removed the backport stable-16.10.x label Mar 27, 2025

manuelleduc reviewed Mar 27, 2025

View reviewed changes

manuelleduc approved these changes Mar 27, 2025

View reviewed changes

XWIKI-22674: Search facets item count misalignment

8e537f9

* Made the version of introduction explicit for each variable

manuelleduc reviewed Apr 2, 2025

View reviewed changes

Sereza7 mentioned this pull request Apr 2, 2025

XWIKI-23060: Add CSS variables for font weight #3873

Merged

Merge branch 'master' into XWIKI-22674

45dec46

		"100vw": "100vw",
		"int-viewport-width": "calc(10000 * tan(atan2(var(--100vw), 10000px)))",

Uh oh!

XWIKI-22674: Search facets item count misalignment #3758

Are you sure you want to change the base?

XWIKI-22674: Search facets item count misalignment #3758

Uh oh!

Conversation

Sereza7 commented Dec 12, 2024

Jira URL

Changes

Description

Clarifications

Screenshots & Video

Executed Tests

Expected merging strategy

Uh oh!

Sereza7 commented Dec 12, 2024

Uh oh!

tkrieck commented Dec 12, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tkrieck left a comment

Choose a reason for hiding this comment

Uh oh!

Sereza7 commented Dec 13, 2024

Uh oh!

Sereza7 commented Mar 12, 2025

Uh oh!

Sereza7 commented Mar 26, 2025

Uh oh!

Sereza7 commented Mar 26, 2025

Uh oh!

manuelleduc commented Mar 27, 2025

Uh oh!

Sereza7 commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

manuelleduc left a comment

Choose a reason for hiding this comment

Uh oh!

Sereza7 commented Apr 2, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Sereza7 Apr 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Sereza7 commented Mar 27, 2025 •

edited

Loading

Sereza7 Apr 3, 2025 •

edited

Loading