@bitrise/bitkit-v2 0.3.256 → 0.3.258
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 +2 -0
- package/package.json +1 -1
package/AGENTS.md
CHANGED
|
@@ -157,6 +157,8 @@ Bitkit components use consistent prop names across the library:
|
|
|
157
157
|
For grouping a single child or a few siblings without styling, use a fragment (`<>...</>`).
|
|
158
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
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.
|
|
160
|
+
- **A sentence with an inline link/icon is one `<Text>`, not a flex `<Box>`** — don't wrap a `<Text>` and a `<BitkitLink>` in a `<Box display="flex" gap="…">`; put the link inline inside the text with a space: `<Text>Visualised using{' '}<BitkitLink suffixIcon={…}>Perfetto UI</BitkitLink></Text>`. Inline Bitkit components (e.g. `BitkitLink` with a `suffixIcon`) already render `inline-flex` and align their own icon, so the flex wrapper is redundant — and inline flow baseline-aligns the text correctly.
|
|
161
|
+
- **Style a single plain element with `asChild`, not a wrapper `<Box>`** — the "props on the component" rule above only works for elements that forward Chakra style props. A plain DOM element that doesn't (`<iframe>`, `<video>`, `<svg>`, …) can still avoid the extra node: `<Box asChild border="…" width="…" height="…"><iframe …/></Box>` merges the style props onto the child via Slot. Move the child's own inline styles onto the `<Box>`. **Precedence gotcha:** an inline `style={{…}}` on the child beats Chakra's generated classes — a child `style={{ border: 'none' }}` will override `<Box border="…">`, so drop the conflicting inline style when collapsing.
|
|
160
162
|
- **Import from Chakra subpaths** — `import { Button } from '@chakra-ui/react/button'`, not `from '@chakra-ui/react'`.
|
|
161
163
|
|
|
162
164
|
## Skeleton loading
|