fix(kslideout): title and content styles

[kleinfreund]

(Branched off of the work for #1770 so targeting that PR’s branch for now)

Summary

This PR mainly aims at reducing the need to override some of KSlideout’s default styles by making the layout a bit more consistent and adjusting the spacing between certain elements.

fix(kslideout): overriding KCard padding

Removes the custom padding override of .kong-card so that the content area has the same padding as KCard.

fix(kslideout): title styles

Addresses a number of style issues of the title bar in order to achieve a better default appearance.

Removes the margins added to the title, before title, and after title containers and instead adds a padding to the header making the title bar appear flush with the content.

Reduces the gap size between title, before title, and after title to allow for more flexible usage scenarios.

Signed-off-by: Philipp Rudloff philipp.rudloff@konghq.com

Notes

• Markup changes: I’m changing the markup of the component here which might interfere with the development efforts that are on-going for Kongponents v9, but this depends on whether there are plans to change this component much in that process. Let me know, happy to make changes.
• Before/after title slot usage: I’d like to hear about current use cases for the before/after title slots as I’m making changes to how those are spaced-out in the header.

The overrides we currently find ourselves using (with Kongponents v8) without these changes:

.k-slideout {
  // Overrides KSlideout’s override so the padding is the same as that of KCard.
  --KCardPaddingX: #{$kui-space-80} !important;
  --KCardPaddingY: #{$kui-space-80} !important;
}

.k-slideout-header-content {
  padding-right: $kui-space-80;
  padding-left: $kui-space-80;
}

Screenshots

Before:

After:

PR Checklist

• Conventional Commits all commits follow the conventional commit standards outlined in the main README.
• Tests coverage: test coverage was added for new features and bug fixes
• Docs: includes a technically accurate README

[kleinfreund]

Closing this as it was superseded by #2012.