@synerise/ds-button-group 1.1.58 → 1.1.60

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/CLAUDE.md +63 -0
  3. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.1.60](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.1.59...@synerise/ds-button-group@1.1.60) (2026-07-23)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-button-group
9
+
10
+ ## [1.1.59](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.1.58...@synerise/ds-button-group@1.1.59) (2026-07-16)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-button-group
13
+
6
14
  ## [1.1.58](https://github.com/Synerise/synerise-design/compare/@synerise/ds-button-group@1.1.57...@synerise/ds-button-group@1.1.58) (2026-06-17)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-button-group
package/CLAUDE.md ADDED
@@ -0,0 +1,63 @@
1
+ # ButtonGroup (`@synerise/ds-button-group`)
2
+
3
+ > Wraps a series of `ds-button` elements in a flex container, adding optional title/description labels, horizontal alignment, full-width stretch, split-mode borders, error state, and compact/spaced layout control.
4
+
5
+ ## Package structure
6
+
7
+ ```
8
+ src/
9
+ ButtonGroup.tsx — main component
10
+ ButtonGroup.types.ts — ButtonGroupProps
11
+ ButtonGroup.styles.ts — Container, Title, Description styled components
12
+ ButtonDivider/
13
+ ButtonDivider.tsx — zero-props vertical divider between buttons
14
+ ButtonDivider.styles.tsx — styled ds-divider
15
+ index.ts — public exports
16
+ ```
17
+
18
+ ## Public exports
19
+
20
+ ### `ButtonGroup` (default)
21
+
22
+ | Prop | Type | Default | Description |
23
+ |------|------|---------|-------------|
24
+ | `children` | `ReactNode` | `undefined` | Button elements to render inside the group |
25
+ | `title` | `string` | `undefined` | Optional heading above the button row |
26
+ | `description` | `string` | `undefined` | Optional helper text below the button row |
27
+ | `size` | `'small' \| 'middle' \| 'large'` | `undefined` | Size class applied to the group container |
28
+ | `buttonsPosition` | `'left' \| 'center' \| 'right'` | `'center'` | Horizontal alignment |
29
+ | `fullWidth` | `boolean` | `undefined` | Container `width: 100%`, buttons `flex: 1` |
30
+ | `compact` | `boolean` | `true` | `true` = zero gap, square middle corners, rounded outer corners; `false` = 8px gap, all corners rounded |
31
+ | `splitMode` | `boolean` | `undefined` | Adds 1px borders between adjacent `single-icon` buttons |
32
+ | `error` | `boolean` | `undefined` | In `splitMode`, switches borders to `red-600` |
33
+ | `disabled` | `boolean` | `undefined` | CSS-only, suppresses hover effects in splitMode |
34
+ | `className` | `string` | `undefined` | Extra class (always includes `ds-button-group`) |
35
+
36
+ ### `ButtonDivider`
37
+
38
+ Zero-props vertical divider. Renders a styled `ds-divider` with `type="vertical"`.
39
+
40
+ ### Types
41
+
42
+ | Export | Description |
43
+ |--------|-------------|
44
+ | `ButtonGroupProps` | Full props interface |
45
+
46
+ ## Styling
47
+
48
+ - **`compact={true}`** — `gap: 0`, inner buttons `border-radius: 0`, first child gets `3px 0 0 3px`, last child gets `0 3px 3px 0`.
49
+ - **`compact={false}`** — `gap: 8px`, each button `border-radius: 3px`.
50
+ - **`splitMode`** — CSS borders via `.ant-btn-*` class selectors.
51
+ - **`fullWidth`** — outer `width: 100%`, inner buttons `flex: 1`.
52
+
53
+ ## Key dependencies
54
+
55
+ - `@synerise/ds-button` — expected child component
56
+ - `@synerise/ds-divider` — base for `ButtonDivider`
57
+
58
+ ## Implementation notes
59
+
60
+ - **No antd dependency** — `Button.Group` replaced with a plain `<div className="ant-btn-group">`.
61
+ - **`compact` corner rounding** — handled by CSS `:first-child` / `:last-child` selectors on the group container. Individual `groupVariant` props on buttons are no longer required for basic groups.
62
+ - **`splitMode` targets CSS classes** — uses `.ant-btn-*` selectors. Adding a new button type requires updating the styled-component CSS.
63
+ - **`disabled` is CSS-only** — not forwarded to child buttons. Disable buttons individually.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-button-group",
3
- "version": "1.1.58",
3
+ "version": "1.1.60",
4
4
  "description": "Button-Group UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -17,6 +17,7 @@
17
17
  "files": [
18
18
  "/dist",
19
19
  "CHANGELOG.md",
20
+ "CLAUDE.md",
20
21
  "README.md",
21
22
  "package.json",
22
23
  "LICENSE.md"
@@ -38,9 +39,9 @@
38
39
  "sideEffects": false,
39
40
  "types": "dist/index.d.ts",
40
41
  "dependencies": {
41
- "@synerise/ds-button": "^1.5.33",
42
- "@synerise/ds-divider": "^1.3.15",
43
- "@synerise/ds-utils": "^1.10.1"
42
+ "@synerise/ds-button": "^1.5.35",
43
+ "@synerise/ds-divider": "^1.3.16",
44
+ "@synerise/ds-utils": "^1.10.2"
44
45
  },
45
46
  "peerDependencies": {
46
47
  "@synerise/ds-core": "*",
@@ -48,5 +49,5 @@
48
49
  "styled-components": "^5.3.3",
49
50
  "vitest": "4"
50
51
  },
51
- "gitHead": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
52
+ "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
52
53
  }