Add "auto" value to KFixedGridItem/KGridItem's "alignment" prop

[MisRob]

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

Related Slack thread

[BabyElias]

Hey! Can I work on this issue?

[MisRob]

Hi @BabyElias, yes, thank you

[BabyElias]

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 :)

[lokesh-sagi125]

hey @AlexVelezLl since there is no one assigned rn can i work on this issue?

[AlexVelezLl]

Hey @lokesh-sagi125! For sure! I will assign this to you. Please feel free to ask any question if needed 🤗.

[lokesh-sagi125]

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?

[MisRob]

@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?

[lokesh-sagi125]

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.

[lokesh-sagi125]

this was the acceptance criteria of the issue right?

[MisRob]

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]

sure @MisRob

[MisRob]

@lokesh-sagi125 I confirm this has been resolved already in c85e4d8 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.

[lokesh-sagi125]

glad to know it was fixed:)