refactor(divider): update divider to match the design system (#278)

Tap30 · Nov 23, 2024 · 2f7f5c4 · 2f7f5c4
1 parent b84dd60
commit 2f7f5c4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 38 deletions.
diff --git a/packages/web-components/src/divider/divider.style.ts b/packages/web-components/src/divider/divider.style.ts
@@ -1,43 +1,35 @@
 import { css } from "lit";
 
 export default css`
-  :host {
+  *,
+  *::before,
+  *::after {
     box-sizing: border-box;
   }
 
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit;
+  :host([variant="thin"]) {
+    --divider-height: var(--tap-sys-stroke-1);
   }
 
-  [hidden] {
-    display: none !important;
+  :host([variant="medium"]) {
+    --divider-height: var(--tap-sys-stroke-2);
   }
 
-  :host {
-    display: block;
-    background-color: var(
-      --tap-divider-background-color,
-      var(--tap-sys-color-border-primary)
-    );
-    width: 100%;
-    margin: var(--tap-divider-margin, var(--tap-sys-spacing-4)) 0;
+  :host([variant="thick"]) {
+    --divider-height: 0.5rem;
+    --divider-bg-color: var(--tap-sys-color-surface-secondary);
   }
 
-  :host([type="thin"]) {
-    height: var(--tap-divider-thin-height, var(--tap-sys-spacing-1));
-  }
+  :host {
+    --divider-height: var(--tap-sys-stroke-2);
+    --divider-bg-color: var(--tap-sys-color-border-primary);
 
-  :host([type="medium"]) {
-    height: var(--tap-divider-medium-height, var(--tap-sys-spacing-2));
-  }
+    display: block;
+    background-color: var(--divider-bg-color);
+
+    width: 100%;
+    height: var(--divider-height);
 
-  :host([type="bold"]) {
-    background-color: var(
-      --tap-divider-bold-background-color,
-      var(--tap-sys-color-surface-secondary)
-    );
-    height: var(--tap-divider-bold-height, var(--tap-sys-spacing-4));
+    margin: var(--tap-sys-spacing-4) 0;
   }
 `;
diff --git a/packages/web-components/src/divider/divider.ts b/packages/web-components/src/divider/divider.ts
@@ -2,7 +2,11 @@ import { LitElement } from "lit";
 import { property } from "lit/decorators.js";
 
 export class Divider extends LitElement {
-  @property({ reflect: true }) type: "thin" | "medium" | "bold" = "medium";
+  /**
+   * The thickness of the divider.
+   */
+  @property({ type: String })
+  public variant: "thin" | "medium" | "thick" = "thin";
 
   public override connectedCallback() {
     super.connectedCallback();

diff --git a/packages/web-components/src/divider/index.ts b/packages/web-components/src/divider/index.ts
@@ -5,16 +5,7 @@ import styles from "./divider.style.js";
 /**
  * @summary A divider component used to separate content.
  *
- * @prop {'thin' | 'medium' | 'bold'} [type='medium'] - The thickness of the divider.
- *
- * @csspart [divider] - The main container for the divider.
- *
- * @cssprop [--tap-divider-background-color=--tap-sys-color-border-primary] - The background color of the divider.
- * @cssprop [--tap-divider-margin=--tap-sys-spacing-4] - The margin around the divider.
- * @cssprop [--tap-divider-thin-height=--tap-sys-spacing-1] - The height of the thin divider.
- * @cssprop [--tap-divider-medium-height=--tap-sys-spacing-2] - The height of the medium divider.
- * @cssprop [--tap-divider-bold-background-color=--tap-sys-color-surface-secondary] - The background color of the bold divider.
- * @cssprop [--tap-divider-bold-height=--tap-sys-spacing-4] - The height of the bold divider.
+ * @prop {'thin' | 'medium' | 'thick'} [variant='thin'] - The thickness of the divider.
  */
 @customElement("tap-divider")
 export class TapDivider extends Divider {