Feature/171 move buttons

[JodieM]

Changes

• Changed the layout of the buttons so they can be displayed in the same top right hand corner if there is full title and description, no title, no description or no title or description.
• Changed the buttons to be base style to match the other buttons on the page.
• Changed the icon spacing in the heading to more closely match standard

Issues Closed

#171

Testing

https://docs.google.com/document/d/12S4hkygtQndvVoywhDO1qMrapMOH0h1uFafObdcY8yY/edit?usp=sharing

Code Run Through

https://www.loom.com/share/7129fae1c7674025a1efbac0ae90da68?sid=eb6b991f-6930-490b-a935-85e8d680c3cf (there have been a few changes since then, but way the code has changed to be an Aricle rather than a Card is still the same).

[JodieM]

I need to make some more changes and include Dynamic Forms in this.

[JodieM]

@tschug I tried to get this code re-worked ready for a revised PR tonight, but I got stuck with some JS errors.
Can you please help when you have some time? Not urgent.

The latest Commit 341da22 has the issue when adding custom colours to the Bundle Icon.

https://www.loom.com/share/71bd084d38e041509f6a0ddd8cbb2383?sid=34004067-586d-4dd2-8a95-4ebfb3c312a7

@tschug I've added you to the scratch org if that helps, and I updated the video to only focus on the issue I am having.

[tschug]

I definitely think it's in the area you've shown and related to the change.

It looks like there's a few types of changes in that area, and I think the issue is what the error says --- I cannot find a "style" - which is likely what was there when it was in the tag.

It could be a few things:

• Moving from a Lightning Card to an HTML Article (My primary suspect)
• How it's loading since the hasHeader variable is no longer there and I don't know if it's replacement meets the same conditions.
• We may need to also look at WHICH scenario is throwing the issue since your demo has both on the same page, and I think it's very possible it.

The last point, the var css = this.template.querySelector(".cardIcon").style; is being called by the method initCSSVariables() and that's called by the renderedCallback(). And so, it's possible that because there is no cardIcon on the page, it's throwing the error that it cannot be found, since it's in a nested set of IFs

<article class="slds-card">
                <template lwc:if={isStandardUsage}>
                    <template lwc:if={showTitle}>
                        <div class="cardIcon">

And based on the first IF block - it's only applicable to the isStandardUsage --- so it should be there. But it won't be there for your dynamic form scenario.

I'll look more later, but those are my suspicions.

[JodieM]

Ready to review now @tschug. I still like this, but am aware that changing to an Article might be a bit of a step too far.