Simplify <wa-callout>

- Remove `base` (rel #207)
- Eliminate properties mirroring standard CSS properties (rel #259)
- Simplify markup

docs/docs/components/callout.md

@@ -64,3 +64,9 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
 ```html {.example}
 <wa-callout variant="brand"> Nothing fancy here, just a simple callout. </wa-callout>
 ```
+
+### Styling
+
+You can customize the callout's appearance mostly by setting regular CSS properties:
+- `background`, `border`, `border-radius`, `color`, `padding`, `margin`, etc. should work as expected
+- `gap` sets the space between the icon and the content

src/components/callout/callout.style.ts

@@ -2,17 +2,20 @@ import { css } from 'lit';
 
 export default css`
   :host {
-    --border-radius: var(--wa-panel-border-radius);
-    --border-style: var(--wa-panel-border-style);
-    --border-width: var(--wa-panel-border-width);
     --icon-color: currentColor;
     --icon-size: var(--wa-font-size-l);
     --spacing: var(--wa-space-m);
 
-    display: contents;
-
-    /* For better DX, we'll reset the margin here so the base part can inherit it */
-    margin: 0;
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    border-radius: var(--wa-panel-border-radius);
+    background-color: var(--background-color);
+    border-color: var(--border-color);
+    border-style: var(--wa-panel-border-style);
+    border-width: var(--wa-panel-border-width);
+    color: var(--content-color);
+    padding: var(--spacing);
   }
 
   :host([variant='brand']) {
@@ -45,34 +48,19 @@ export default css`
     --content-color: var(--wa-color-danger-on-normal);
   }
 
-  .callout {
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    background-color: var(--background-color);
-    border-color: var(--border-color);
-    border-radius: var(--border-radius);
-    border-style: var(--border-style);
-    border-width: var(--border-width);
-    color: var(--content-color);
-    font: inherit;
-    padding: var(--spacing);
-    margin: inherit;
-  }
-
-  .callout__icon {
+  [part~='icon'] {
     flex: 0 0 auto;
     display: flex;
     align-items: center;
     color: var(--icon-color);
     font-size: var(--icon-size);
+
+    ::slotted(*) {
+      margin-inline-end: var(--spacing);
+    }
   }
 
-  .callout__icon ::slotted(*) {
-    margin-inline-end: var(--spacing) !important;
-  }
-
-  .callout__message {
+  [part~='message'] {
     flex: 1 1 auto;
     display: block;
     overflow: hidden;

src/components/callout/callout.ts

@@ -1,4 +1,3 @@
-import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit';
 import componentStyles from '../../styles/component.styles.js';
@@ -15,19 +14,12 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The callout's main content.
  * @slot icon - An icon to show in the callout. Works best with `<wa-icon>`.
  *
- * @csspart base - The component's base wrapper.
  * @csspart icon - The container that wraps the optional icon.
  * @csspart message - The container that wraps the callout's main content.
  *
- * @cssproperty --background-color - The callout's background color.
- * @cssproperty --border-color - The color of the callout's border.
- * @cssproperty --border-radius - The radius of the callout's corners.
- * @cssproperty --border-style - The style of the callout's borders.
- * @cssproperty --border-width - The width of the callout's borders.
- * @cssproperty --content-color - The color of the callout's content.
  * @cssproperty --icon-color - The color of the callout's icon.
  * @cssproperty --icon-size - The size of the callout's icon.
- * @cssproperty --spacing - The amount of space around and between the callout's content. Expects a single value.
+ * @cssproperty --spacing - The amount of space around and between the callout's content. Expects a single value. If you want different spacing around and between the content, use `padding` on the callout itself.
  */
 @customElement('wa-callout')
 export default class WaCallout extends WebAwesomeElement {
@@ -38,24 +30,12 @@ export default class WaCallout extends WebAwesomeElement {
 
   render() {
     return html`
-      <div
-        part="base"
-        class=${classMap({
-          callout: true,
-          'callout--brand': this.variant === 'brand',
-          'callout--success': this.variant === 'success',
-          'callout--neutral': this.variant === 'neutral',
-          'callout--warning': this.variant === 'warning',
-          'callout--danger': this.variant === 'danger'
-        })}
-      >
-        <div part="icon" class="callout__icon">
-          <slot name="icon"></slot>
-        </div>
+      <div part="icon">
+        <slot name="icon"></slot>
+      </div>
 
-        <div part="message" class="callout__message">
-          <slot></slot>
-        </div>
+      <div part="message">
+        <slot></slot>
       </div>
     `;
   }