feat(@clayui/language-picker): LPD-45714 Add security margin #5914
Conversation
veroglez
changed the title
|
@pat270, Could you help me with the styles of the picker options? It seems that the label is misaligned with the rest of the elements (icon, flag, text) 
|
|
@veroglez Sure I'll take a look |
| </span> | ||
|
|
||
| {!hideTriggerText ? ( | ||
| <span className="font-weight-normal mr-2"> |
There was a problem hiding this comment.
Without the btn class we won't need font-weight-normal. Do we need mr-2 here because the spacing is incorrect between the arrows and text? I can update in CSS if so.
There was a problem hiding this comment.
Yes, that margin is a safety spacing between the text and the arrows. Updating it in CSS would be ideal.
This change would only be for the case where the text is displayed, since the spacing is correct when only the flag is displayed.
|
@pat270 I have updated the code with the changes you recommended for the picker button. Thanks a lot! Do you have any recommendations for the picker options? for flag, text and label alignment? |
There was a problem hiding this comment.
Hi @veroglez, Thanks for working on this. We are avoiding creating new packages for the new components and instead we are adding the new components under the @clayui/core package, can you move this component to clay-core? Also I added some more comments.
…cate the translation
…eading with the screen reader
…void the btn class and update the styles
@matuzalemsteles thanks a lot for the review! I updated the code with your suggestions, let me know what you think |
…selectedLocaleId to be consistent with the design of the onSelectedLocaleChange API
…k in an uncontrolled way
… the Option component
There was a problem hiding this comment.
@veroglez thanks for working on this, great job. Just a small tweak you can just export the component in the index.ts in the root package file so people can use import {LanguagePicker} from '@clayui/core';. Just a little detail in these new components we are removing the Clay naming convention from the component names.
Sure! I updated this in b030db1 |
|
Going ahead with this and merging. It will be available in the release this week. |
Hi guys!,
I’m sending this pull request where we’re contributing a new component to Clay according to this Epic https://liferay.atlassian.net/browse/LPD-17787.
It’s a Language Picker and it has two variants:
Screen.Recording.2025-01-15.at.5.49.42.PM.mov
As shown in the video, both variants support a small size and the option to hide the trigger text.
A new feature in the translation variant is the addition of a label to indicate the progress of a translation. This can be useful in cases where the language selector considers more than one field, such as in a form. Along with the existing labels (Default, Translated, and Untranslated), this progress label is now included.
In the code I have also added all the tests that I think are necessary, if you consider that I have to add any more, do not hesitate to tell me.
Could you review it? Any feedback is welcome.
Thanks in advance! 😄
cc @drakonux