fix: Remove local definition of --uui-box-default-padding for uui-box (#189)

* remove local definition of --uui-box-default-padding

* better description of slots

* test --uui-box-default-padding can be defined outside scope

BREAKING CHANGE: This should now be configured globally

Author: nielslyngsoe

packages/uui-box/lib/uui-box.element.ts

@@ -6,8 +6,8 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 /**
  *  A box for grouping elements
  *  @element uui-box
- *  @slot headline - headline area
- *  @slot header - headline area
+ *  @slot headline - headline area, this area is placed within the headline tag which is located inside the header. Use this to ensure the right headline styling.
+ *  @slot header - header area, use this for things that is not the headline but located in the header.
  *  @slot default - area for the content of the box
  *  @cssprop --uui-box-default-padding - overwrite the box padding
  *
@@ -22,7 +22,6 @@ export class UUIBoxElement extends LitElement {
         box-shadow: var(--uui-shadow-depth-1);
         border-radius: var(--uui-border-radius);
         background-color: var(--uui-interface-surface);
-        --uui-box-default-padding: var(--uui-size-space-5);
       }
 
       #header {

packages/uui-box/lib/uui-box.test.ts

@@ -24,6 +24,24 @@ describe('UUIBox', () => {
     });
   });
 
+  describe('css custom properties', () => {
+    let wrapper: HTMLDivElement;
+    let element: UUIBoxElement;
+    beforeEach(async () => {
+      wrapper = (await fixture(html`<div
+        style="--uui-box-default-padding:1337px;">
+        <uui-box headline="headline"> Main </uui-box>
+      </div>`)) as HTMLDivElement;
+      element = wrapper.querySelector('uui-box')!;
+    });
+    it('allows for --uui-box-default-padding to be defined outside the scope.', () => {
+      const elementStyles = window.getComputedStyle(element);
+      expect(
+        elementStyles.getPropertyValue('--uui-box-default-padding').trim()
+      ).to.equal('1337px');
+    });
+  });
+
   describe('template', () => {
     it('renders a default slot', () => {
       const slot = element.shadowRoot!.querySelector('slot')!;