@cmgfi/clear-ds 1.1.4 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -7
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.mjs +1503 -1511
- package/dist/index.mjs.map +1 -1
- package/dist/tokens/tokens.css +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -86,16 +86,24 @@ All button components share a canonical three-size ramp:
|
|
|
86
86
|
| `md` | 36px | 12px | `8px 14px` (default) |
|
|
87
87
|
| `lg` | 40px | 15px | `10px 16px` |
|
|
88
88
|
|
|
89
|
-
Icon
|
|
89
|
+
Icon sizes are explicitly defined per button size using design tokens:
|
|
90
|
+
|
|
91
|
+
| Button size | Icon token | Value |
|
|
92
|
+
|-------------|------------|-------|
|
|
93
|
+
| `sm` | `--icon-size-md` | 14px |
|
|
94
|
+
| `md` | `--icon-size-lg` | 18px |
|
|
95
|
+
| `lg` | `--icon-size-lg` | 18px |
|
|
96
|
+
|
|
97
|
+
Pass any React node to icon props — PrimeIcons (`<i className="pi pi-*" />`) are the standard.
|
|
90
98
|
|
|
91
99
|
| Component | Props | Description |
|
|
92
100
|
|---|---|---|
|
|
93
|
-
| `Button` | `variant`, `size`, `leadingIcon`, `trailingIcon`, `badge` | Primary action button. Variants: `primary` (default), `secondary`, `ghost`, `danger`, `link`. Sizes: `sm`, `md
|
|
94
|
-
| `IconButton` | `icon`, `size`, `variant` | Circular button
|
|
95
|
-
| `DropdownButton` | `label`, `items`, `size`, `variant`, `leadingIcon`, `disabled` | Button that opens a dropdown action menu. Chevron uses `pi pi-chevron-down`. Sizes: `sm`, `md
|
|
96
|
-
| `SplitButton` | `label`, `items`, `size`, `variant`, `leadingIcon`, `disabled` | Two joined pill buttons: main action (left) + dropdown trigger (right).
|
|
97
|
-
| `LightningButton` | `
|
|
98
|
-
| `CloseButton` | `size`, `disabled` | Circular `pi pi-times` dismiss button
|
|
101
|
+
| `Button` | `variant`, `size`, `leadingIcon`, `trailingIcon`, `badge` | Primary action button. Variants: `primary` (default), `secondary`, `ghost`, `danger`, `link`. Sizes: `sm`, `md` (default), `lg`. Optional leading/trailing PrimeIcon slots and a notification badge. |
|
|
102
|
+
| `IconButton` | `icon`, `size`, `variant` | Circular icon-only button. Sizes: `sm` (24×24px), `md` (36×36px, default), `lg` (40×40px). |
|
|
103
|
+
| `DropdownButton` | `label`, `items`, `size`, `variant`, `leadingIcon`, `disabled` | Button that opens a dropdown action menu. Chevron uses `pi pi-chevron-down`. Sizes: `sm`, `md` (default), `lg`. |
|
|
104
|
+
| `SplitButton` | `label`, `items`, `size`, `variant`, `leadingIcon`, `disabled` | Two joined pill buttons: main action (left) + dropdown trigger (right). `primary` — both halves dark teal. `secondary` — both halves light teal. Sizes: `sm`, `md` (default), `lg`. Chevron rotates 180° when open. |
|
|
105
|
+
| `LightningButton` | `items`, `size`, `variant`, `disabled` | Icon-only quick-action button with `pi pi-bolt` + `pi pi-chevron-down`. Variants: `basic`, `filled`. Sizes: `sm`, `md` (default), `lg`. |
|
|
106
|
+
| `CloseButton` | `size`, `disabled` | Circular `pi pi-times` dismiss button. Default size is `sm` (24×24px). Sizes: `sm` (default), `md` (36×36px), `lg` (40×40px). |
|
|
99
107
|
|
|
100
108
|
### Form Controls
|
|
101
109
|
|