Botom bar in the OnyxCard

[bergser]

I really like how new OnyxCard component looks like and I have one question regarding future of it.

In CoreUI there is a ScuTile component which can be used together with ScuBottomBar like this

Currently in onyx there is no BottomBar which can be used with OnyxCard. Do you have any concept or plans about this?

Our applications are build based on cards and actions inside them, so this information is important for us. It would be also nice to have more examples representing different uses of the card component.

P.S. Code tab in the storybook is not working properly for the card examples https://storybook.onyx.schwarz/?path=/story/basic-card-examples--details-card Maybe this is only on my side, but I just see the code from previous opened component

screenshot

[larsrickert]

Thanks for your positive feedback!

1. onyx already provides a OnyxBottomBar that you can use together with the OnyxCard component, see this playground example. But I agree that the dev experience is not optimal because the current bottom bar is mainly used on a whole page. We will check if and how we can improve this
2. There are already more card examples available in Figma, so you can contact your UX designer for this. I will talk with @SchwarzIT/onyx-ux if we want to implement more examples technically for you to copy+paste :)
3. We are aware of the broken "Code" panel. We have already created a bug fix for Storybook (Addon-Docs: Consider custom code snippet in story code panel and update styles storybookjs/storybook#30179), unfortunately we are forced to wait for the Storybook team to release the change. For now, you can copy the examples from our repository here

[larsrickert]

@SchwarzIT/onyx-ux Question: Is it intended to use the bottom bar in cards or should the buttons just the placed at the bottom without a bottom bar?

[jannick-ux]

The focus of the bottombar is in the usage with the whole page. This is the case, it was intended to be used. Therefore I would not use it as a standard-feature within the card component (in the end the bottombar is just a collection of buttons with a border).
Nevertheless to keep things easy here, we could create an card-component-example that uses the bottombar as an special solution.

[bergser]

@larsrickert I checked OnyxBottomBar some time ago and noticed that it has position: sticky;. So I understood that this is designed mainly to be used together with OnyxPageLayout

https://github.com/SchwarzIT/onyx/blob/main/packages/sit-onyx/src/components/OnyxBottomBar/OnyxBottomBar.vue

[larsrickert]

I created a follow-up ticket for us to implement more card examples so you can track the progress there.
#2687