Closed KB-NVM closed 2 years ago
Ok, we have two issues here
meta
slot is there when you specify heading
attribute to the card, w/o header text provided you don't have a header rendered, which contains the meta
slot
<VwcCard
heading='All Options on Deck'
/>
graphics
slot actually doesn't exists :smile: instead you should use graphic
slot. That's a pure vivid documentation issue @yinonov
https://vivid.vonage.com/?path=/story/alpha-components-card--introduction
not sure when but typo's been fixed https://vivid.vonage.com/?path=/story/alpha-components-card--introduction#slots
regarding the heading
as a condition to meta - this isn't the spec nor I could have reproduce it.
can u share repro steps?
@yinonov I played a bit with the Card component in the Storybook and I can confirm that displaying of meta
slot is dependent on setting one of either heading
, subtitle
or icon
. As soon as at least one of those three is set then meta
slot is rendered.
Please see this: https://vivid.vonage.com/?path=/story/alpha-components-card--all-options&args=heading:!null;icon:!null;subtitle:!null
HTML code:
<style>
#root-inner {
width: 300px
}
vwc-card {
margin: 15px;
}
</style>
<vwc-card
label="All Options"
text="Use the 'footer' slot in order to add actionable items."
>
<div
style="height: 150px; width: 100%; background-color: #871EFF;"
slot="media"
></div>
<vwc-icon-button-toggle
onicon="more-vertical-solid"
officon="more-vertical-solid"
slot="meta"
></vwc-icon-button-toggle>
<vwc-button
slot="footer"
shape="pill"
layout="outlined"
label="Action"
type="submit"
outlined=""
>
<vwc-icon type="arrow-bold-right-line" slot="trailingIcon"></vwc-icon>
<button style="display: none;" type="submit"></button>
</vwc-button>
</vwc-card>
Even though vwc-icon-button-toggle
with slot meta
is present it is not rendered on the card.
Thanks! meta is indeed hidden. it is rendered but hides due to lack of more relevant heading parts. @rachelbt can u please attend this at https://github.com/Vonage/vivid/blob/2f4f541d2dc0652b55b4a94eabf8d90d44c88966/components/card/src/vwc-card.ts#L132-L136
According to Vivid storybook Card component supports
graphics
andmeta
slots to put some content (i.e. a button) there however the wrapperVwcCard
seems to not respect that - setting either of those slots has no effect.Patch file to reproduce in vivid-react's storybook: VwcCard.txt