C_001_R6 Pill buttons are not title capitalized any more
🐜 Bug report
🔧
about: Short explanation Version Information
v1.1.4-pre-alpha.
I'm seeing this behaviour on
-
iOS device -
Android device -
Chrome -
Firefox -
Safari -
Edge -
Other
What is the expected behavior?
The text in the pill buttons/actions must be capitalized as title case
What is the actual behaviour?
The text in the pill buttons/actions are not capitalized as title case
Steps to Reproduce
- Visit https://hcp.dev.recoverycat.de/ or https://pat.dev.recoverycat.de/
- Visit https://hcp.recoverycat.de/ or https://pat.recoverycat.de/
- See how buttons from 1. are not in title case as buttons from 2.
Screenshots
Related code
- The replacement of the ionic button into a rcc button removed the css tittle transformation
- E2E tests ignore case
Tasks
-
Reintroduce the text-transform rule to this css file -
Make sure E2E tests for these buttons are case sensitive. -
We decided to follow the recommendations from https://github.com/cypress-io/cypress/discussions/22625 -
Create helper function like this one that allows as extra parameter a function of type string => RegExp, regExpFunc = (label: string) => new RegExp('^' + label + '$', 'g'). -
Find all matches in the E2E tests like this one, where text is not given to the tests in title case. -
Use the helper function instead to make it find exact values providing new RegExp('^ ' + label + ' $', 'g') as RegExp. Note that the black spaces are required due to the spaces provided in the html. See images.
-
-
Consider a pipe addition into the component, where this transformation is really visible as opposed to the CSS solution, which is a bit brittle. -
Consider a general review of the JSON files as well.
Due to a separation of concerns the last two points were discarded.
Edited by Carlos Sanchez