[VAULT-35871] UI: Address design UI feedback on namespace picker #30571
Conversation
|
CI Results: |
…getting the width.
73be9a6 to
4c1276f
Compare
|
Build Results: |
| @extend .truncate-second-line, .is-word-break; | ||
| white-space: normal; | ||
| } | ||
| } |
There was a problem hiding this comment.
Reintroduced namespace-picker.scss in order to truncate long namespace names to 2 lines with ellipsis:
| @@ -23,6 +23,11 @@ | |||
| padding: size_variables.$spacing-36; | |||
| } | |||
|
|
|||
| .has-side-padding-4 { | |||
There was a problem hiding this comment.
nit: the updated pattern for new css classes is to drop has- or is- [docs]
There was a problem hiding this comment.
I also wonder if it might make sense to move some of these helpers to the namespace-picker.scss file. I'll defer to your judgement, just a thought 💭
There was a problem hiding this comment.
Thank you for catching this!! I was following the existing patterns in the spacing file, but that makes sense to not add new css classes following the old pattern. 🎉
I could be convinced either way. If we moved them into namespace-picker.scss they would still have the generic spacing css class names (like top-padding-10 instead of something like namespace-picker__{element}) since they are reused throughout the file. So, if no one has a strong opinion, I think it makes sense to keep them in spacing.scss file.
| const namespaceLinks = document.querySelectorAll('[data-test-namespace-link]'); | ||
| namespaceLinks.forEach((checkmark: Element) => { | ||
| const width = (checkmark as HTMLElement).offsetWidth; | ||
| if (width > maxWidth) { |
There was a problem hiding this comment.
Does this wrap at any point or will it always expand to the longest namespace? Wondering if we should have/need some sort of max limit 🤔
There was a problem hiding this comment.
The HDS component has a maxWidth of 400px, so if it's > 400px it will wrap.
For example, in this case the help text ("Enter a full path...") at the top is the element w/ the adjusted width, and you can see that it is wrapped to 2 lines:
There was a problem hiding this comment.
Awesome! Thanks for confirming
|
|
||
| @use '../helper-classes/general'; | ||
|
|
||
| .namespace-picker { |
There was a problem hiding this comment.
Good call on making this a component specific css file and class! 🎉
) * [VAULT-35871] UI: Address design UI feedback on namespace picker * remove unused css class * dynamic width based on namespace length; not help messages * handle long namespace name - truncate the second line * hide/show message element so that it doesn't affect the layout while getting the width. * add cop 6BF8 yright header to scss file * address PR comments & additional design feedback * fix syntax error * address more design feedback: use small buttons
Description
Address design UI feedback on namespace picker:
Screenshots: