Lf 4426 days of the week component repeat crop plan is not understandable in punjabi or hindi

[Duncan-Brain]

Description

This PR adapts the component to welcome longer abbreviations by no longer requiring a square button checkbox and allowing varying size.

Jira link:LF-4426

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain)

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have added "MISSING" for all new language tags to languages I don't speak
• I have added the GNU General Public License to all new files

[kathyavini]

Thank you for getting rid of the horrible absolute positioning code!! 🙏 It's much improved and definitely adaptable. I have a minor request and some questions:

1. Request: the border disappears when the checkbox is selected. With the previous layout (distributed across a fixed width) that didn't really matter, but with the current solution there is a slight shifting around of the options depending on what's checked -- can you either move to outlines over border OR preserve a transparent border in the checked state so that there is no layout shift when selecting?

Screen.Recording.2024-09-12.at.12.17.37.PM.mov

2. Question: I see the space between items has been decreased, is that intentional?

Original:

New:

I don't mind too much either way, but in terms of Hindi and Punjabi, they probably will break awkwardly onto two lines even with the smaller gap so we don't have to tighten it up that much if we don't want to.

3. You showed us this morning all items taking the width of the longest item. Even if we don't square it up (i.e. do aspect ratio 1/1), do we still want the width calculated like that (all rectangles equal width)? It's much improved in e.g. French, but that's a good example of where I think equal width would look better than variable width:

Original (squished, yuck!)

New -- much better, but I think it would look nicer if all rectangles were equal width? @antsgar curious what you think?

Hindi/Punjabi the variable width looks fine to me, as the difference between the shortest and longest day isn't as dramatic and they aren't bunched in the middle either:

(2 and 3 are optional adjusts in my opinion by the way. Only 1 is a bug that should be fixed)

[Duncan-Brain]

1. yeah, I wondered if you would notice that! Outline it is!
2. I can't find a good gap spacing using Loics factors of 8px rule and I think it would be trying to "magic number" it -- which I don't like doing. So overall I think the smaller gap looks more professional ... 16px maybe max --- feel free to open something if you want a different spacing.
3. If you like the equal width it will also require setting that px value as a magic max-width number explicitly based on what works for existing languages max chars. Grid handles that nicer I think but doesn't do overflow as well. And I personally don't love the idea of language specific styling if we can help it. Especially if Loic is just going to redesign this at some point for repeat task flow.

[kathyavini]

@Duncan-Brain by fixed width, you mean that the overall width gets fixed and then flexbox handles the even distribution? So it would require passing a different appropriate max width to the the component based on current language, like a map { 'fr': '100px', 'en': '80px' } etc? 🤔

Yeah I guess I also do not want to start creating language-based style maps. I'll just wait to see if @antsgar has a thought about it, but I'm okay with straight variable width then.

[Duncan-Brain]

@kathyavini What I meant by width is that I personally had trouble finding a solution that used the intrinsic content width as the equal width for all flex items. I tried working on the flex basis to achieve that following this thread (https://stackoverflow.com/questions/29503227/how-to-make-flexbox-items-the-same-size) but flex basis 0 with flex grow requires some width property of some sort to grow up to "fixed max width", and the flex basis 100% I also couldn't get to work I think commenters on that had the same issue.

There might be more complex react refs to watch the width possible to craft a responsive solution use that but didn't seem worth it for this quick fix...

I would have preferred grid but it doesn't work with wrapping and fit content according to this thread: https://stackoverflow.com/questions/52764726/css-grid-auto-fit-with-max-content