| The caret, the small triangle indicating that an element can be expanded or collapsed, is currently produced in two different ways in XWiki Standard:
- with the Bootstrap caret helper class, which draws the triangle out of CSS borders
- with the caret-down / caret-right / caret-up icons of the current icon theme
A forum proposal settled on the second one as the standard. A caret is an icon like any other: it should follow the icon theme of the wiki, and for font based icon themes it inherits the color of its neighboring text instead of needing a dedicated border-color rule. This issue is about migrating the remaining class="caret" usages of XWiki Standard to the icon theme. Remaining usages
| File |
Line(s) |
| flamingo/menus_macros.vm |
108, 112, 203, 212 |
| flamingo/menus_content.vm |
176 |
| flamingo/delete.vm |
144 |
| flamingo/restore.vm |
119 |
| flamingo/export_macros.vm |
63 |
| templates/extension.vm |
1062 |
| templates/html_displayer/entitytreenode/edit.vm |
58 |
| uicomponents/widgets/buttonGroup.js |
163 |
| XWiki/XWikiUserProfileSheet.xml |
692, 700 |
| XWiki/Realtime/Configuration.xml |
594 |
| wysiwyg-webjar .../resource/resourcePicker.js |
47 |
| XDropdown.vue (Flamingo design system webjar) |
64 |
| LivedataEntrySelectorAll.vue |
74 |
The Bootstrap test fixtures under xwiki-platform-bootstrap/src/main/node/tests/ and the imported Bootswatch themes are third-party content and should stay untouched. The caret class itself stays available in Bootstrap, this issue only stops XWiki Standard from using it. Points of attention
- buttonGroup.js is the exact change that was reverted in
XWIKI-24482, where the Distribution Wizard side buttons ended up tiny and without an icon. Redoing it requires a check on a Distribution Wizard screen.
- macroSelector.js line 208 looks the caret up with children('.caret') to move it around, so it has to follow whatever resourcePicker.js ends up emitting.
- The two Vue components cannot call the Velocity icon service, they need to go through the icon mechanism already available in the design system webjar.
- menus_macros.vm lines 108 and 112 are the two responsive carets of the menu bar, one of which is only shown on extra small screens. The stylesheets targeting .caret need a pass as well.
- Once the migration is done, the convention is documented on the Icons page of the Front-end Resources guide.
If any of the migration cannot happen, the non standard caret should be commented to explain why it can't be aligned. |
