learningequality
Add "auto" value to KFixedGridItem/KGridItem's "alignment" prop
Product
Kolibri
Desired behavior
Allow 'auto' value in KFixedGridItem/KGridItem's alignment prop and when alignment is 'auto', do not set text-align (like it happens when alignment is 'right', 'center', 'left') but instead set dir=auto on the grid item element.
Current behavior
text-align is set on grid items all the time. Even when we set dir=auto on KFixedGridItem/KGridItem, it doesn't work properly because of conflicting with text-align defined in the grid item component, and we need to use a workaround like for example unsetting text-align here.
The Value Add
No hacks will be needed anymore to make automatic directionality work for content in grid items which means that chances that accessibility works as expected will be higher in regards to dir=auto.
Comments
Hey! Just to inform, I have started working on this issue but am caught up currently due to my semester examinations. I'll generate a PR as soon as possible, once my exams are over next week. Thank you for your time and patience :)
hey @AlexVelezLl since there is no one assigned rn can i work on this issue?
Hey @lokesh-sagi125! For sure! I will assign this to you. Please feel free to ask any question if needed 🤗.
hey @AlexVelezLl i went through the code for this issue and feel like the mention issue has already been dealt with, it is accepting the auto value from the common.js file, do you want me to add it directly to the file?
@lokesh-sagi125 I am not sure I can understand exactly what you mean. Are you saying that this:
when alignment is 'auto', do not set text-align (like it happens when alignment is 'right', 'center', 'left') but instead set dir=auto on the grid item element.
already works?
yes @MisRob when i tested it in playground and inspected it , there was no text-align being set and the div is being set div=auto
, i have attached an image of my console.
Thanks for checking this @lokesh-sagi125. Yes, it seems it already works as expected. Let me confirm some time later this week and we can probably close the issue then.
@lokesh-sagi125 I confirm this has been resolved already in https://github.com/learningequality/kolibri-design-system/commit/c85e4d80e0759c16e68fc5435ee8ee572ece0c5d so will close the issue. Thank you for checking on this, either it was done after I opened the issue and we didn't link, or I missed it.