@bitrise/bitkit-v2 0.3.252-beta.1706 → 0.3.253-beta.1710
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/AGENTS.md +7 -0
- package/package.json +1 -1
package/AGENTS.md
CHANGED
|
@@ -75,9 +75,15 @@ Bitkit components use consistent prop names across the library:
|
|
|
75
75
|
| Field validation/help text | `helperText`, `errorText`, `warningText` | — |
|
|
76
76
|
| Trailing icon | `suffixIcon` | `rightIcon` |
|
|
77
77
|
| Leading icon | `icon` | `leftIcon`, `prefixIcon` |
|
|
78
|
+
| Per-component color set | `colorVariant` | `colorPalette`, `colorScheme` |
|
|
78
79
|
|
|
79
80
|
## Common API patterns
|
|
80
81
|
|
|
82
|
+
- **`colorVariant`, not Chakra's `colorPalette`** — components that come in multiple color sets (BitkitBadge, BitkitTag, BitkitColorButton, BitkitCloseButton, BitkitRibbon, BitkitAvatar, BitkitLink, BitkitEmptyState, BitkitPageFooter, …) pick the color via a `colorVariant` prop with a fixed, per-component set of keys. Chakra's reserved `colorPalette` prop is **not** accepted. Each component documents its own allowed keys — verify them via the Storybook MCP, don't assume. The spelling is `gray`, never `grey`.
|
|
83
|
+
```tsx
|
|
84
|
+
<BitkitBadge colorVariant="green">Passed</BitkitBadge>
|
|
85
|
+
<BitkitRibbon colorVariant="purple">…</BitkitRibbon>
|
|
86
|
+
```
|
|
81
87
|
- **`state` prop replaces `disabled`/`loading`** — use `<BitkitButton state="disabled">`, not `<BitkitButton disabled>`. Values: `'disabled' | 'loading' | 'skeleton'`.
|
|
82
88
|
- **Dot notation for compound components** — sub-components are exposed as static properties on the parent, not as separate named exports:
|
|
83
89
|
```tsx
|
|
@@ -150,6 +156,7 @@ Bitkit components use consistent prop names across the library:
|
|
|
150
156
|
|
|
151
157
|
For grouping a single child or a few siblings without styling, use a fragment (`<>...</>`).
|
|
152
158
|
- **Use `Text` for text content, not `Box`** — when rendering string content, use `<Text>` from `@chakra-ui/react/text`. Choose semantic tag via `as`: `<Text as="strong">`, `<Text as="span">`, `<Text as="label">`, plain `<Text>` for paragraphs.
|
|
159
|
+
- **Avoid the `chakra.*` factory** — `chakra.div`, `chakra.span`, etc. are a last resort. Reach for a named primitive instead: `Box` for layout wrappers (`<Box as="span">` for an inline wrapper), `Text` for text (`<Text as="span">` for inline text), `Stack`/`HStack`/`VStack` for flex layouts. They're typed and forward style props the same way, but keep usage consistent. Only fall back to `chakra.*` when no named primitive fits.
|
|
153
160
|
- **Import from Chakra subpaths** — `import { Button } from '@chakra-ui/react/button'`, not `from '@chakra-ui/react'`.
|
|
154
161
|
|
|
155
162
|
## Skeleton loading
|