feat: library metadata for DA block library #553
Conversation
| if (block.nextElementSibling?.classList.contains('library-metadata')) { | ||
| const md = getMetadata(block.nextElementSibling); | ||
| item.tags = md?.searchtags?.text || ''; | ||
| item.tags = md?.searchtags?.text || md?.description?.text || ''; |
There was a problem hiding this comment.
Instead of re-using item.tags should this better be its own field like item.description?
|
This isn't ideal from a user experience perspective, but I think we leave this as is. The tooltip shows on hover, but the way its designed implies that you can click it. I like the entire item being the clickable element, but we should probably revisit this now that we have this other icon. I'm not a fan of the tooltip poking outside the bounds of palette, but there is precedent for this. I don't have a good enough sense of how much content there is... and I want to say sidekick library allows HTML. I also don't have a better idea for this right now... so, tooltip it is. 😄 This is also going to be visually noisy now when #512 ships. The other thing I saw is that because the tooltip is set to fixed and does not have inset / left / right / top / bottom, you get arbitrary locations of where it shows. Screenshots below. Last, |
|
Hi @auniverseaway , I just saw your comment above and wanted to share that the alignment issue has already been fixed in #557 . Now it's well within the palette boundaries . Around tooltip, my consideration mainly was the limited space in the palette so having it as a tooltip made sense currently :) |
Description
This PR introduces description as part of library metadata for blocks present in block library.
This is based on ask from a customer where they are looking for a detailed description of what the block does and how to use it. An info icon is added next to the block and its variant name. When the icon is hovered over, the description of the block is visible.
Related Issue
#534
Motivation and Context
This solves a customer usecase and would also be useful for any future customer / other projects in DA where blocks need a description for easy of authoring and usage of blocks
How Has This Been Tested?
https://main--da-live--asthabh23.aem.page/edit#/audemars-piguet/arbres-fondationsaudemarspiguet/drafts/astha/library-test
vs
https://i534--da-live--asthabh23.aem.page/edit#/audemars-piguet/arbres-fondationsaudemarspiguet/drafts/astha/library-test
Screenshots (if appropriate):
Types of changes
Checklist: