create-bestax 4.2.4 → 4.2.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/package.json
CHANGED
|
@@ -69,7 +69,7 @@ component is guaranteed to appear (the generator fails if one lacks an API page)
|
|
|
69
69
|
- [SubTitle](https://bestax.io/docs/api/elements/subtitle) — The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`…
|
|
70
70
|
- [Table](https://bestax.io/docs/api/elements/table) — The `Table` component and its subcomponents provide a highly composable, Bulma-styled table system for React.
|
|
71
71
|
- [Tag](https://bestax.io/docs/api/elements/tag) — The `Tag` component renders a Bulma-styled label or badge.
|
|
72
|
-
- [Tags](https://bestax.io/docs/api/elements/tags) — The `Tags` component groups multiple `Tag` components together in a
|
|
72
|
+
- [Tags](https://bestax.io/docs/api/elements/tags) — The `Tags` component groups multiple `Tag` components together in a Bulma-styled container that wraps onto multiple lines by default.
|
|
73
73
|
- [Title](https://bestax.io/docs/api/elements/title) — The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`…
|
|
74
74
|
- [UnorderedList](https://bestax.io/docs/api/elements/unorderedlist) — The `UnorderedList` component renders a styled unordered list (`<ul>`) element with Bulma helper class integration.
|
|
75
75
|
|
|
@@ -59,6 +59,34 @@ don't rely on it.
|
|
|
59
59
|
- `features` — extra library classes, string or array: `'fa-spin'`, `['fa-lg', 'fa-border']`.
|
|
60
60
|
- Color via the helper props: `textColor="primary"`, `textColor="danger"`, etc.
|
|
61
61
|
|
|
62
|
+
## Custom node (SVG, react-icons, FontAwesome React)
|
|
63
|
+
|
|
64
|
+
`Icon` also accepts `children` instead of `name` — an inline SVG, a `react-icons` component, a
|
|
65
|
+
Font Awesome React `<FontAwesomeIcon>`, … — rendered in place of a class-based glyph. `name`
|
|
66
|
+
and `children` are mutually exclusive (the type rejects passing both, or neither). `size`,
|
|
67
|
+
`textColor`, `bgColor`, `ariaLabel` and `containerClassName` behave identically; `library`,
|
|
68
|
+
`variant`, `features` and `libraryFeatures` are ignored since there's no class-based glyph to
|
|
69
|
+
style.
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
<Icon ariaLabel="Custom icon">
|
|
73
|
+
<MyReactIconsComponent />
|
|
74
|
+
</Icon>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
`IconText`'s `iconProps` / `items[].iconProps` and `Control`'s `iconLeft`/`iconRight` accept
|
|
78
|
+
the same escape hatch — pass a node directly (instead of an `IconProps` object) and it is
|
|
79
|
+
wrapped in an `Icon` for you: `<IconText iconProps={<MySvg />}>Starred</IconText>`.
|
|
80
|
+
|
|
81
|
+
`Panel.Icon` takes the same `children`, but its container is `panel-icon` rather than `icon` —
|
|
82
|
+
it always overrides `containerClassName`, so style and query that class instead.
|
|
83
|
+
|
|
84
|
+
⚠️ **`children` excludes `undefined`.** Write a conditional icon as `cond ? <MySvg /> : null`
|
|
85
|
+
(or `cond && <MySvg />`), never `cond ? <MySvg /> : undefined` — the latter is a type error,
|
|
86
|
+
because the renderer would fall through to the `name` path with no name. In the `IconText` and
|
|
87
|
+
`Control` slots a falsy node counts as "no icon": nothing is rendered, and `Control` falls back
|
|
88
|
+
to `iconLeftName`/`iconRightName` if one is given, otherwise leaving the icon column unreserved.
|
|
89
|
+
|
|
62
90
|
## Accessibility
|
|
63
91
|
|
|
64
92
|
Every `Icon` renders `aria-label` (default `"icon"`), set via its camelCase `ariaLabel` prop.
|