feat: 💄 add more custom properties to uui-box (#772)

add --uui-box-border-width, add --uui-box-box-shadow, add --uui-box-border-radius
umbraco · Apr 5, 2024 · def0263 · def0263
1 parent 229b8da
commit def0263
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/uui-box/lib/uui-box.element.ts b/packages/uui-box/lib/uui-box.element.ts
@@ -20,6 +20,9 @@ function slotHasContent(target: EventTarget | null): boolean {
  *  @slot - area for the content of the box
  *  @cssprop --uui-box-header-padding - overwrite the header padding
  *  @cssprop --uui-box-default-padding - overwrite the box padding
+ *  @cssprop --uui-box-border-width - overwrite the box border, default is 0
+ *  @cssprop --uui-box-box-shadow - overwrite the box shadow, default is var(--uui-shadow-depth-1)
+ *  @cssprop --uui-box-border-radius - overwrite the box border-radius, default is var(--uui-border-radius)
  *
  */
 @defineElement('uui-box')
@@ -119,8 +122,11 @@ export class UUIBoxElement extends LitElement {
     css`
       :host {
         display: block;
-        box-shadow: var(--uui-shadow-depth-1);
-        border-radius: var(--uui-border-radius);
+        border: var(--uui-box-border-width, 0) solid
+          var(--uui-color-divider-standalone);
+
+        box-shadow: var(--uui-box-box-shadow, var(--uui-shadow-depth-1));
+        border-radius: var(--uui-box-border-radius, var(--uui-border-radius));
         background-color: var(--uui-color-surface);
       }