create-bestax 4.2.8 → 4.2.10
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 +1 -1
- package/package.json +3 -3
- package/templates/skills/bestax-custom-component/references/api.md +3 -1
- package/templates/skills/bestax-custom-component/references/library-contributor.md +15 -3
- package/templates/skills/bestax-layout-scaffold/references/layout-components.md +5 -5
- package/templates/skills/bestax-migrate/references/bloomer/prop-map.md +54 -23
- package/templates/skills/bestax-migrate/references/bloomer/unmappables.md +61 -11
- package/templates/skills/bestax-migrate/references/rbx/component-map.md +1 -1
- package/templates/skills/bestax-migrate/references/rbx/prop-map.md +25 -5
- package/templates/skills/bestax-migrate/references/rbx/unmappables.md +44 -4
- package/templates/skills/bestax-migrate/references/react-bulma-components/prop-map.md +17 -0
- package/templates/skills/bestax-migrate/references/react-bulma-components/unmappables.md +51 -4
- package/templates/skills/bestax-theming/references/themeable-components.md +39 -39
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/create-bestax)
|
|
4
4
|
[](https://www.npmjs.com/package/create-bestax)
|
|
5
5
|
[](https://opensource.org/licenses/MIT)
|
|
6
|
-
[](https://socket.dev/npm/package/create-bestax/overview)
|
|
7
7
|
[](https://scorecard.dev/viewer/?uri=github.com/allxsmith/bestax)
|
|
8
8
|
[](https://www.bestpractices.dev/projects/14361)
|
|
9
9
|
[](https://www.npmjs.com/package/create-bestax#provenance)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-bestax",
|
|
3
|
-
"version": "4.2.
|
|
3
|
+
"version": "4.2.10",
|
|
4
4
|
"description": "Create a new bestax-bulma project",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"figures": "^6.1.0",
|
|
40
40
|
"fs-extra": "^11.4.0",
|
|
41
41
|
"prompts": "^2.4.2",
|
|
42
|
-
"@allxsmith/bestax-bulma": "^5.
|
|
42
|
+
"@allxsmith/bestax-bulma": "^5.16.7"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@jest/globals": "^30.0.0",
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"clean": "rimraf dist",
|
|
76
76
|
"release": "npx semantic-release"
|
|
77
77
|
},
|
|
78
|
-
"readme": "# create-bestax\n\n[](https://www.npmjs.com/package/create-bestax)\n[](https://www.npmjs.com/package/create-bestax)\n[](https://opensource.org/licenses/MIT)\n[![Socket Badge](https://socket.dev/
|
|
78
|
+
"readme": "# create-bestax\n\n[](https://www.npmjs.com/package/create-bestax)\n[](https://www.npmjs.com/package/create-bestax)\n[](https://opensource.org/licenses/MIT)\n[](https://socket.dev/npm/package/create-bestax/overview)\n[](https://scorecard.dev/viewer/?uri=github.com/allxsmith/bestax)\n[](https://www.bestpractices.dev/projects/14361)\n[](https://www.npmjs.com/package/create-bestax#provenance)\n[](https://github.com/allxsmith/bestax/blob/main/SECURITY.md)\n\nThe scaffolder for [`@allxsmith/bestax-bulma`](https://www.npmjs.com/package/@allxsmith/bestax-bulma) — spin up a Vite app pre-wired for the **Bulma v1** React component library in one command. Picks your framework (JS or TypeScript), CSS flavor, and icon library, and can drop in the bestax **AI skills** so an agent like Claude Code knows the library from the first prompt.\n\nPart of the [bestax monorepo](https://github.com/allxsmith/bestax) — see also [`@allxsmith/bestax-bulma`](https://www.npmjs.com/package/@allxsmith/bestax-bulma) for the components themselves.\n\n## Requirements\n\n- **Node.js 22 or newer.** Node 18 and 20 are both past end-of-life. On an older runtime the\n CLI exits immediately with an explicit upgrade message.\n- npm 10 or newer (ships with Node 22), or yarn/pnpm.\n\n## Usage\n\n### Quick Start\n\n```bash\n# Using npm\nnpm create bestax@latest my-app\n\n# Using npx\nnpx create-bestax@latest my-app\n\n# Alternative naming\nnpm create bestax-bulma@latest my-app\n```\n\n### Interactive Mode\n\nRunning without arguments will prompt you for all options:\n\n```bash\nnpm create bestax@latest\n```\n\nYou'll be asked to:\n\n1. Enter a project name\n2. Select a framework (Vite or Vite + TypeScript)\n3. Choose a Bulma CSS flavor (Complete or Minimal)\n4. Select an icon library (Font Awesome, Material Icons, etc.)\n5. Choose whether to install the bestax AI skills into `.claude/skills/`\n\nEvery prompt has a flag equivalent, so the whole flow is scriptable and CI-friendly — see the options below.\n\n### Command Line Options\n\n```bash\nnpm create bestax@latest [project-directory] [options]\n```\n\n**Arguments:**\n\n- `[project-directory]` - Optional project directory name\n\n**Options:**\n\n- `-t, --template <template>` - Template to use: `vite` or `vite-ts` \n **Default:** `vite`\n- `-b, --bulma <flavor>` - Bulma CSS flavor:\n - `complete` - Full Bulma CSS with all components and helpers\n - `prefixed` - Prefixed version for compatibility\n - `no-helpers` - Without helper classes\n - `no-helpers-prefixed` - Prefixed without helpers\n - `no-dark-mode` - Without dark mode support \n **Default:** `complete`\n- `-i, --icon <library>` - Icon library:\n - `none` - No icon library\n - `fontawesome` - Font Awesome\n - `mdi` - Material Design Icons\n - `ionicons` - Ionicons\n - `material-icons` - Material Icons\n - `material-symbols` - Material Symbols \n **Default:** `none`\n- `--skills` / `--no-skills` - Install (or skip) the bestax AI skills into\n `.claude/skills/` (with a `CLAUDE.md`) so a Claude Code session picks them up\n automatically. When omitted you're prompted; with `-y` the default is to install.\n- `-y, --yes` - Skip prompts and use defaults or provided options. \n When used, the following defaults are selected unless overridden by flags:\n - Template: `vite`\n - Bulma flavor: `complete`\n - Icon library: `none`\n - AI skills: installed (pass `--no-skills` to opt out)\n\n**Example:**\n\n```bash\n# Create a TypeScript project with Font Awesome icons\nnpm create bestax@latest my-app -t vite-ts -i fontawesome -b complete\n\n# Use all defaults (skip prompts)\nnpm create bestax@latest my-app -y\n```\n\n## Templates\n\nAvailable templates:\n\n- `vite` - Vite + JavaScript\n- `vite-ts` - Vite + TypeScript\n\nEach template includes:\n\n- Pre-configured bestax-bulma integration (React 19)\n- The latest `@allxsmith/bestax-bulma`, which ships Bulma v1 automatically\n- Icon library support (Font Awesome, Material Design, etc.)\n- Sample components demonstrating library usage\n- Development and build scripts\n\n## For AI Tools\n\nScaffolding for an AI agent? Pass `--skills` (or accept the prompt) to drop the bestax\nAgent Skills and a `CLAUDE.md` into the new project so Claude Code, Cursor, or Copilot\nbuild the bestax way from the start. The library also ships LLM-optimized docs:\n\n- [LLMs guide](https://bestax.io/docs/guides/llms) — using bestax with Claude Code, Cursor, Copilot\n- [Agent Skills](https://bestax.io/docs/skills/intro) — teach your agent the bestax conventions\n- [llms.txt](https://bestax.io/llms.txt) (curated index) · [llms-full.txt](https://bestax.io/llms-full.txt) (full docs)\n\n## Development\n\n```bash\nnpm run build # Build the CLI\nnpm run dev # Watch mode\nnpm test # Run tests\nnpm run lint # Lint CLI source code\nnpm run typecheck # Type check CLI source code\n```\n\n**Note on Templates:** Template files in `templates/` are excluded from linting. They should be manually validated by scaffolding a test project and running lint/build there before releasing.\n\n## Hardened by default\n\nA scaffolder runs with write access to your filesystem and picks your starting dependencies, so how it is built and published matters:\n\n- **Signed provenance** — every release carries a sigstore attestation linking the tarball to the exact commit and CI run that built it. Check the **Provenance** section on the [npm page](https://www.npmjs.com/package/create-bestax#provenance), or run `npm audit signatures`.\n- **npm OIDC trusted publishing** — short-lived, per-run credentials; no long-lived `NPM_TOKEN` exists to be stolen. Release commits and tags are GPG-signed.\n- **Socket.dev scans every PR** for malware, install scripts, obfuscated code, and privilege escalation before it can reach `main`.\n- **Dependencies are a deliberate act** — install scripts are blocked unless individually allow-listed, freshly published versions are refused for 3 days, and CI installs only what the reviewed lockfile resolves.\n- **Every GitHub Action is pinned to a full commit SHA**, so a compromised action release can't roll silently into a build of this CLI.\n- **CodeQL, Dependency Review, and Dependabot** run continuously, alongside a high-severity `pnpm audit` gate.\n- **Layered AI review before merge** — [CodeRabbit](https://coderabbit.ai) plus an independent adversarial Claude review (a different model from the one writing AI-authored changes), on top of required green CI, an approving review, and a human merge.\n\nFull detail: [`SECURITY.md`](https://github.com/allxsmith/bestax/blob/main/SECURITY.md) · [Security guide](https://bestax.io/docs/guides/security)\n\n## Telemetry\n\n`create-bestax` can send one **anonymous** usage event after a successful\nscaffold — only if you opt in when asked (once, at the end of a scaffold). The\nevent is just the choices you made — template, Bulma flavor, icon library,\nskills, package manager — plus the CLI version, Node major version, and OS\nplatform; never names, IPs, machine IDs, paths, or file contents, and no\nidentifier exists that could link two events together. Opt out any time with\n`--no-telemetry`, `BESTAX_TELEMETRY=0`, or `DO_NOT_TRACK=1`.\n\nFull disclosure of every field and control: [Telemetry guide](https://bestax.io/docs/guides/telemetry)\n\n## Publishing\n\nThis package uses semantic-release with scope-based rules. Only commits with `feat(create-bestax)` or `fix(create-bestax)` will trigger releases.\n"
|
|
79
79
|
}
|
|
@@ -72,7 +72,9 @@ Storybook `argTypes`/tests:
|
|
|
72
72
|
`validAlignments`, `validTextTransforms`, `validTextWeights`, `validFontFamilies`,
|
|
73
73
|
`validDisplays`, `validVisibilities`, `validFlexDirections`, `validFlexWraps`,
|
|
74
74
|
`validJustifyContents`, `validAlignContents`, `validAlignItems`, `validAlignSelfs`,
|
|
75
|
-
`validFlexGrowShrink`, `validViewports
|
|
75
|
+
`validFlexGrowShrink`, `validViewports`, `validFloats`, `validOverflows`,
|
|
76
|
+
`validInteractions`, `validCursors`, `validRadii`, `validShadows`,
|
|
77
|
+
`validResponsives`.
|
|
76
78
|
|
|
77
79
|
```ts
|
|
78
80
|
export type MyColor = (typeof validColors)[number];
|
|
@@ -110,15 +110,27 @@ Rules that keep components consistent:
|
|
|
110
110
|
types; `PolymorphicComponent<FooOwnProps, 'default-tag'>` is the cast target,
|
|
111
111
|
and `PolymorphicComponentWithoutRef` the one for a component that forwards no
|
|
112
112
|
ref. Add type-level checks in `src/__typetests__/` both ways — that the
|
|
113
|
-
default `as` accepts its element's props and a different `as` rejects them
|
|
114
|
-
|
|
113
|
+
default `as` accepts its element's props and a different `as` rejects them.
|
|
114
|
+
Tests and stories are type-checked too (`typecheck:tests`), but `__typetests__/`
|
|
115
|
+
is the home for these: `pnpm typecheck` reads it, so a consumer running that
|
|
116
|
+
script gets them as well. Pinning the props instead
|
|
115
117
|
rejects correct code and accepts incorrect code at the same time, which is what #641 fixed
|
|
116
118
|
across eight components. A literal union (`Title.tsx`) escapes the generic only when its
|
|
117
119
|
members genuinely **share** a prop and ref surface — `h1`–`h6` and `p` all carry plain
|
|
118
120
|
`HTMLAttributes`, so one interface describes them all. It is not a general exemption:
|
|
119
121
|
`Dropdown.Item`'s `'a' | 'div' | 'button'` differ in `href`, `disabled`, `type` and their ref
|
|
120
122
|
element, and pinning them to one interface reproduces exactly this defect (#663). When the
|
|
121
|
-
members differ, constrain `T` to the union rather than dropping the generic
|
|
123
|
+
members differ, constrain `T` to the union rather than dropping the generic —
|
|
124
|
+
`ConstrainedPolymorphicComponentWithoutRef` in `helpers/polymorphic.ts` is that
|
|
125
|
+
shape, and `Dropdown.Item` is the worked example. Two consequences to pin while
|
|
126
|
+
you are there. **Default the alias's `T` to the whole union, not to the rendered
|
|
127
|
+
element** — narrowing it would break `const p: SomeProps = { as: 'div' }`, which
|
|
128
|
+
compiles for every consumer today; the cost is that the bare alias then carries
|
|
129
|
+
only the keys all members share, so no `href` (#667, `next-major`). The
|
|
130
|
+
component keeps full precision at each call site regardless. And a wrapping HOC
|
|
131
|
+
(`React.memo`) infers through the derivation overload, so it collapses onto the
|
|
132
|
+
component's default element — stricter than the component, not looser, whatever
|
|
133
|
+
a reader expects.
|
|
122
134
|
Forward the ref unless the component owns the node it needs: `Reveal` observes
|
|
123
135
|
an element for scroll intersection and wraps a custom `as` in its own `div`,
|
|
124
136
|
so the element `as` names is not the one it holds — it uses
|
|
@@ -58,11 +58,11 @@ Every component also accepts the shared Bulma helper props (`m`/`p` spacing, `te
|
|
|
58
58
|
|
|
59
59
|
`<Hero>` is a full-width banner. Subcomponents: `Hero.Head`, `Hero.Body`, `Hero.Foot`.
|
|
60
60
|
|
|
61
|
-
| Prop | Type
|
|
62
|
-
| ---------------------- |
|
|
63
|
-
| `color` | `primary \| link \| info \| success \| warning \| danger \| black \| white \| light \| dark` (CSS-backed). Also accepted but deprecated, no CSS, dev-warn:
|
|
64
|
-
| `size` | `'small' \| 'medium' \| 'large' \| 'fullheight' \| 'fullheight-with-navbar'`
|
|
65
|
-
| `fullheightWithNavbar` | `boolean`
|
|
61
|
+
| Prop | Type |
|
|
62
|
+
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
63
|
+
| `color` | `primary \| link \| info \| success \| warning \| danger \| black \| white \| light \| dark` (CSS-backed). Also accepted but deprecated, no CSS, dev-warn: every other `validColors` member, plus `inherit` and `current` |
|
|
64
|
+
| `size` | `'small' \| 'medium' \| 'large' \| 'fullheight' \| 'fullheight-with-navbar'` |
|
|
65
|
+
| `fullheightWithNavbar` | `boolean` |
|
|
66
66
|
|
|
67
67
|
```tsx
|
|
68
68
|
<Hero color="primary" size="medium">
|
|
@@ -14,20 +14,20 @@ component.
|
|
|
14
14
|
|
|
15
15
|
bloomer's `withHelpersModifiers` mixed these into every component.
|
|
16
16
|
|
|
17
|
-
| bloomer | bestax-bulma | note
|
|
18
|
-
| --------------------------- | -------------------------------------------------------------- |
|
|
19
|
-
| `hasTextAlign="centered"` | `textAlign="centered"` | `left` / `right` / `centered` — same union
|
|
20
|
-
| `hasTextColor="grey-light"` | `textColor="grey-light"`, or `className="has-text-grey-light"` | `textColor` is declared per component, not by the helper hook, so it carries over on the ~48 targets that have it and becomes the Bulma class on the rest (`Tag`, `Table`, `Hero`, `Menu`, `Breadcrumb`, `Panel`, `Icon`, `Progress`, the form controls); every Bulma 0.6 colour and shade works
|
|
21
|
-
| `isPulled="right"` | `float="right"` |
|
|
22
|
-
| `isClearfix` | `clearfix` |
|
|
23
|
-
| `isOverlay` | `overlay` |
|
|
24
|
-
| `isUnselectable` | `interaction="unselectable"` |
|
|
25
|
-
| `isMarginless` | `m="0"` | bestax expresses the `is-*less` helpers as spacing
|
|
26
|
-
| `isPaddingless` | `p="0"` |
|
|
27
|
-
| `isFullWidth` | `isFullWidth` | on Button, Select, Table, Tabs; a TODO elsewhere
|
|
28
|
-
| `isDisplay`, `isHidden` | `display*`, `visibility*` | flattened — see below
|
|
29
|
-
| `tag` | `as` | where bestax declares one — see below
|
|
30
|
-
| `render` | — | always a TODO
|
|
17
|
+
| bloomer | bestax-bulma | note |
|
|
18
|
+
| --------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
19
|
+
| `hasTextAlign="centered"` | `textAlign="centered"` | `left` / `right` / `centered` — same union |
|
|
20
|
+
| `hasTextColor="grey-light"` | `textColor="grey-light"`, or `className="has-text-grey-light"` | `textColor` is declared per component, not by the helper hook, so it carries over on the ~48 targets that have it and becomes the Bulma class on the rest (`Tag`, `Table`, `Hero`, `Menu`, `Breadcrumb`, `Panel`, `Icon`, `Progress`, the form controls); every Bulma 0.6 colour and shade works |
|
|
21
|
+
| `isPulled="right"` | `float="right"` | |
|
|
22
|
+
| `isClearfix` | `clearfix` | |
|
|
23
|
+
| `isOverlay` | `overlay` | |
|
|
24
|
+
| `isUnselectable` | `interaction="unselectable"` | |
|
|
25
|
+
| `isMarginless` | `m="0"` | bestax expresses the `is-*less` helpers as spacing |
|
|
26
|
+
| `isPaddingless` | `p="0"` | |
|
|
27
|
+
| `isFullWidth` | `isFullWidth` | on Button, Select, Table, Tabs; a TODO elsewhere |
|
|
28
|
+
| `isDisplay`, `isHidden` | `display*`, `visibility*` | flattened — see below |
|
|
29
|
+
| `tag` | `as` | where bestax declares one — see below |
|
|
30
|
+
| `render` | — | always a TODO |
|
|
31
31
|
|
|
32
32
|
## `isDisplay` and `isHidden`
|
|
33
33
|
|
|
@@ -101,18 +101,49 @@ Everywhere else `tag` is left in place with a TODO. On the components that becom
|
|
|
101
101
|
(`Help`, `Label`, `Heading`, `BreadcrumbItem`, `PanelTab`, `TabLink`, `Page`, `HeroVideo`) a
|
|
102
102
|
literal `tag` is honoured — `<Help tag="span">` becomes `<span className="help">`.
|
|
103
103
|
|
|
104
|
+
A literal `tag` outside the union its bestax target narrows `as` to — `<Media tag="section">`,
|
|
105
|
+
`<Control tag="span">` — is dropped with a `prop:as` TODO naming the tags that component does
|
|
106
|
+
render. bloomer rendered the tag you asked for; bestax does not offer it there, and writing it
|
|
107
|
+
through produced output the project could not compile.
|
|
108
|
+
|
|
109
|
+
## `href` picks the element
|
|
110
|
+
|
|
111
|
+
bestax gives an element the attributes of the tag `as` names, so `href` exists only where that
|
|
112
|
+
tag is an `<a>`. bloomer had no such rule, and the two libraries part company in two ways.
|
|
113
|
+
|
|
104
114
|
bloomer's `Button` and `Image` never took `tag` at all. Seven bloomer components — `Button`,
|
|
105
115
|
`Delete`, `LevelItem`, `DropdownItem`, `NavbarItem`, `PanelBlock`, `CardFooterItem` — rendered
|
|
106
116
|
an `<a>` whenever `href` was set, whatever `tag` said, and a `<div>` (or their default tag)
|
|
107
|
-
otherwise; the rest (`MenuLink`, `PageControl`, `Dropdown`, …) rendered their
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
`
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
117
|
+
otherwise; the rest (`MenuLink`, `NavbarLink`, `PageControl`, `Dropdown`, …) rendered their
|
|
118
|
+
`tag` regardless.
|
|
119
|
+
|
|
120
|
+
**On the switching components the `href` wins the element**, because that is what bloomer
|
|
121
|
+
rendered. `Button` and `LevelItem` gain `as="a"`; on the targets that already render an anchor
|
|
122
|
+
(`Navbar.Item`, `Dropdown.Item`, `Panel.Block`) the `tag` is simply dropped and the `href`
|
|
123
|
+
stays — each of those takes the anchor's props under its default `as`. A `NavbarItem` or
|
|
124
|
+
`DropdownItem` with neither `href` nor `tag` gains `as="div"`, because bestax's `Navbar.Item`
|
|
125
|
+
and `Dropdown.Item` default to an `<a>`. An empty or false `href` selected nothing in bloomer
|
|
126
|
+
and is dropped. bestax's `Panel.Block` is always an `<a>`, so only a `PanelBlock` with `href`
|
|
127
|
+
becomes one — the rest stay the plain `<div class="panel-block">` (or the `tag` you gave) that
|
|
128
|
+
bloomer rendered.
|
|
129
|
+
|
|
130
|
+
A dynamic `href={expr}` was a runtime decision bloomer made and bestax's `as` is one element or
|
|
131
|
+
the other. It resolves to the anchor, which is the branch the `href` is there for, and the
|
|
132
|
+
`prop:href` TODO names the element to render by hand for the empty case:
|
|
133
|
+
|
|
134
|
+
```jsx
|
|
135
|
+
<Button href={p.url} tag="span">x</Button>
|
|
136
|
+
// TODO(bestax-migrate): bloomer chose the element at runtime … render <span> by hand where
|
|
137
|
+
// the `href` is empty
|
|
138
|
+
<Button href={p.url} as="a">x</Button>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
**Everywhere else the element wins.** `MenuLink` and `NavbarLink` rendered their `tag` whatever
|
|
142
|
+
`href` said, so `<MenuLink href="/x" tag="span">` really was a `<span href="/x">` — which
|
|
143
|
+
navigates nowhere in any browser. The element stays and the attribute that did nothing goes,
|
|
144
|
+
with a `prop:href` TODO. The same happens to a component that becomes plain markup: a
|
|
145
|
+
`<TabLink href="#one" tag="span">` becomes a `<span>`, and its `href` is named rather than
|
|
146
|
+
written. Where the link was the intent, drop the `tag`.
|
|
116
147
|
|
|
117
148
|
## Helper props on parts that take none
|
|
118
149
|
|
|
@@ -87,12 +87,14 @@ bestax's `Dropdown` takes a `label` and renders its own trigger and menu, so blo
|
|
|
87
87
|
</Dropdown>
|
|
88
88
|
|
|
89
89
|
<Dropdown label="Open" active right>
|
|
90
|
-
<Dropdown.Item
|
|
90
|
+
<Dropdown.Item href="/a">A</Dropdown.Item>
|
|
91
91
|
</Dropdown>
|
|
92
92
|
```
|
|
93
93
|
|
|
94
|
-
bestax's `Dropdown.Item`
|
|
95
|
-
`
|
|
94
|
+
bestax's `Dropdown.Item` renders an `<a>` by default and takes that anchor's props, so the
|
|
95
|
+
`href` carries over. It keeps one only where the element it renders is the anchor: on
|
|
96
|
+
`as="div"` or `as="button"` the attribute is dropped (`prop:href`), and the item is a link
|
|
97
|
+
again if you drop the `as`.
|
|
96
98
|
`isHoverable` → `hoverable`, `isActive` → `active` carry over on the `Dropdown` itself.
|
|
97
99
|
|
|
98
100
|
## `prop:tag` — polymorphism
|
|
@@ -108,6 +110,56 @@ Elsewhere, render the element you wanted directly, or move the bestax component
|
|
|
108
110
|
A dynamic `tag` on a component that becomes plain markup is flagged the same way — the plain
|
|
109
111
|
element takes bloomer's default tag.
|
|
110
112
|
|
|
113
|
+
## `prop:as` — a tag the component does not render
|
|
114
|
+
|
|
115
|
+
Several bestax components accept `as` but narrow it to the tags Bulma's markup allows there, so
|
|
116
|
+
a literal `tag` outside that union (`<Media tag="section">`, `<Control tag="span">`) becomes a
|
|
117
|
+
`prop:as` TODO listing the tags that component does render. Wrap the component in the element
|
|
118
|
+
you wanted, or restructure.
|
|
119
|
+
|
|
120
|
+
## `prop:href` — a link needs the anchor
|
|
121
|
+
|
|
122
|
+
bestax gives an element the attributes of the tag `as` names, so an `href` belongs on an `<a>`
|
|
123
|
+
or on a custom component you pass to `as`, never on another intrinsic tag. bloomer's `MenuLink`, `NavbarLink` and the components that become plain
|
|
124
|
+
markup rendered their `tag` whatever `href` said, so `<MenuLink href="/x" tag="span">` really
|
|
125
|
+
was a `<span href="/x">` — an attribute no browser acts on. The element stays, the dead
|
|
126
|
+
attribute goes:
|
|
127
|
+
|
|
128
|
+
```jsx
|
|
129
|
+
<MenuLink href="/x" tag="span">Home</MenuLink>
|
|
130
|
+
<Menu.Item as="span">Home</Menu.Item>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Drop the `tag` where the link was the point. On the components that switched to an `<a>` on
|
|
134
|
+
`href` the codemod does that for you — see [prop-map.md](prop-map.md).
|
|
135
|
+
|
|
136
|
+
Most targets take no `href` at all. It lives on `Menu.Item`, `Navbar.Item`, `Navbar.Link`,
|
|
137
|
+
`Panel.Block`, `Dropdown.Item` and the three `Pagination` controls, which render an `<a>` unless
|
|
138
|
+
told otherwise,
|
|
139
|
+
and on `Button` and `Level.Item` once `as="a"` names one — those two render a `<button>` and a
|
|
140
|
+
`<div>` by default, and drop the attribute. Everywhere else the codemod removes it.
|
|
141
|
+
|
|
142
|
+
`Dropdown.Item` is the one to read twice: it accepts `as="a" | "div" | "button"` and takes the
|
|
143
|
+
props of whichever you name, so the default `<a>` keeps an `href` and the other two do not.
|
|
144
|
+
Drop the `as` to make it a link again; inside the `<button>` form an `<a>` would nest
|
|
145
|
+
interactive content, so navigate in `onClick` there.
|
|
146
|
+
|
|
147
|
+
## `prop:target`, `prop:download`, `prop:hrefLang`, `prop:ping`, `prop:referrerPolicy`, `prop:media`
|
|
148
|
+
|
|
149
|
+
`target`, `download`, `hrefLang`, `ping`, `referrerPolicy` and `media` follow the element the same way
|
|
150
|
+
`href` does, and they are invalid on the wrong one whether or not an `href` is beside them —
|
|
151
|
+
`<Navbar.Link as="span" target="_blank">` does not compile on its own. Each is judged against
|
|
152
|
+
the element that actually renders, not as a group, so a `referrerPolicy` on an `<img>` or a
|
|
153
|
+
`target` on a `<form>` stays where it is legal. Where one is removed the TODO quotes it. Put it
|
|
154
|
+
on an `<a>` inside, or make the element one that takes it.
|
|
155
|
+
|
|
156
|
+
`rel` is never touched: React declares it on `HTMLAttributes`, so it is valid on every element.
|
|
157
|
+
|
|
158
|
+
A component can be narrower than its element. One that takes no `href` at any `as` takes none of
|
|
159
|
+
these either. `Level.Item` is not narrower: it declares the anchor's whole attribute surface at
|
|
160
|
+
every `as` and forwards it only on the `<a>`, so all of these survive at `as="a"` and none of
|
|
161
|
+
them reaches a `<p>` or a `<div>`.
|
|
162
|
+
|
|
111
163
|
## `prop:render` — the render prop
|
|
112
164
|
|
|
113
165
|
bloomer's `render` handed the computed props (`className` included) to your own renderer:
|
|
@@ -159,7 +211,9 @@ value, or a dynamic `className` the class cannot be spliced into, is flagged wit
|
|
|
159
211
|
|
|
160
212
|
## Props with no counterpart
|
|
161
213
|
|
|
162
|
-
Each of these
|
|
214
|
+
Each of these raises a TODO. Most are left on the element for you to resolve; the `href` rows
|
|
215
|
+
are the exception — bestax types no `href` onto the element these ended up on, so the codemod
|
|
216
|
+
removes the attribute and the TODO quotes what it was:
|
|
163
217
|
|
|
164
218
|
| prop | on | what to do |
|
|
165
219
|
| ------------------------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
|
|
@@ -167,8 +221,9 @@ Each of these is left in place with a TODO:
|
|
|
167
221
|
| `hasAddons="fullwidth"` | `Field` | `hasAddons` plus `className="has-addons-fullwidth"` |
|
|
168
222
|
| `isAlign` | `TabList` | set `align` on the `<Tabs>` — Bulma aligns the container |
|
|
169
223
|
| `isGrid` | `Columns` | Bulma removed `columns.is-grid` in 0.5; use `isMultiline` with sized columns, or `Grid` |
|
|
170
|
-
| `href` | `CardFooterItem`, `CardHeaderIcon`, `Delete
|
|
171
|
-
| `href
|
|
224
|
+
| `href` | `CardFooterItem`, `CardHeaderIcon`, `Delete` | put an `<a>` inside, or handle it in `onClick` |
|
|
225
|
+
| `href` beside a `tag` | `MenuLink`, `NavbarLink`, and anything that becomes plain markup | the tag bloomer rendered was no anchor, so the `href` did nothing; drop the `tag` |
|
|
226
|
+
| `href={expr}` (dynamic) | `Button`, `LevelItem` and the other components that switched to an `<a>` on `href` | resolved to the anchor; render the other element by hand where the `href` is empty |
|
|
172
227
|
| `href` | `NavbarItem hasDropdown` | bestax's `Navbar.Dropdown` is the container; put the `href` on the `Navbar.Link` inside |
|
|
173
228
|
| `isRatio` beside `isSize` | `Image` | bestax's one `size` took the fixed size; restore the ratio if that was the point |
|
|
174
229
|
|
|
@@ -202,11 +257,6 @@ prop conditionally:
|
|
|
202
257
|
counterpart in bestax (only `isNarrowTouch`) — Bulma keeps the `is-*-touch` classes, so use
|
|
203
258
|
`className`.
|
|
204
259
|
|
|
205
|
-
## `prop:hasTextColor="white-ter"` / `"white-bis"`
|
|
206
|
-
|
|
207
|
-
Two Bulma 0.6 shades bestax has no colour for. Use `white`, or a custom class. Every other colour
|
|
208
|
-
and shade of that era exists in bestax verbatim.
|
|
209
|
-
|
|
210
260
|
## `value-reference` — a component used as a value
|
|
211
261
|
|
|
212
262
|
`const Wrapped = Box` and `{ Subtitle }` are rewritten to the bestax binding (`Hero.Foot`,
|
|
@@ -98,7 +98,7 @@ test holds to rbx's own export surface in both directions.
|
|
|
98
98
|
| `Navbar.Divider` | `Navbar.Divider` | mapped |
|
|
99
99
|
| `Navbar.Menu` | `Navbar.Menu` | mapped |
|
|
100
100
|
| `Navbar.Link` | `Navbar.Link` | mapped |
|
|
101
|
-
| `Navbar.Item` |
|
|
101
|
+
| `Navbar.Item` | `Navbar.Item` | mapped |
|
|
102
102
|
| `Navbar.Item.Container` | _structural_ | mapped |
|
|
103
103
|
| `Navbar.Dropdown` | _structural_ | mapped |
|
|
104
104
|
| `Navbar.Segment` | _structural_ | mapped |
|
|
@@ -28,8 +28,7 @@ rbx mixes these into every component via `HelpersProps`.
|
|
|
28
28
|
| `shadowless` | `shadow="shadowless"` | |
|
|
29
29
|
| `unselectable` | `interaction="unselectable"` | |
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
else in rbx's `colors` and `shades` unions exists in bestax verbatim.
|
|
31
|
+
Every name in rbx's `colors` and `shades` unions exists in bestax verbatim.
|
|
33
32
|
|
|
34
33
|
## Bare boolean modifiers → `is*`
|
|
35
34
|
|
|
@@ -86,7 +85,7 @@ rbx has three shapes; all three flatten to bestax's per-viewport props.
|
|
|
86
85
|
|
|
87
86
|
rbx's `forwardRefAs` puts `as` on **every** component. bestax declares it on a smaller set, and
|
|
88
87
|
several of those narrow it to specific tags (`Footer` is `'footer' | 'div'`, `Control` is
|
|
89
|
-
`'div'`). The codemod passes `as` through only where bestax really accepts it, and TODOs it
|
|
88
|
+
`'div' | 'p'`). The codemod passes `as` through only where bestax really accepts it, and TODOs it
|
|
90
89
|
everywhere else:
|
|
91
90
|
|
|
92
91
|
| bestax component | `as` accepts |
|
|
@@ -98,7 +97,7 @@ everywhere else:
|
|
|
98
97
|
| `Media` | `'article' \| 'div'` |
|
|
99
98
|
| `Media.Left` | `'figure' \| 'div'` |
|
|
100
99
|
| `Level.Item` | `'div' \| 'p' \| 'a'` |
|
|
101
|
-
| `Control` | `'div'`
|
|
100
|
+
| `Control` | `'div' \| 'p'` |
|
|
102
101
|
| `Menu.Item` | any element type |
|
|
103
102
|
| `Dropdown.Item` | `'a' \| 'div' \| 'button'` |
|
|
104
103
|
| `Navbar.Item`, `Navbar.Link` | any element type |
|
|
@@ -113,7 +112,28 @@ wrong:
|
|
|
113
112
|
other two.
|
|
114
113
|
- Several of the accepted props are **narrow literal unions**, so `as={SomeComponent}` still
|
|
115
114
|
fails to typecheck even where `as` is allowed — which is deliberate: a visible type error
|
|
116
|
-
beats a silent rewrite.
|
|
115
|
+
beats a silent rewrite. A **literal** outside the union is a different case: the codemod can
|
|
116
|
+
read it, so `<Control as="span">` drops the `as` with a `prop:as` TODO naming the tags that
|
|
117
|
+
component does render. Writing it through produced output the project could not compile.
|
|
118
|
+
Note that this one does change the rendered element: rbx's `forwardRefAs` rendered the tag you
|
|
119
|
+
gave it, so that really was a `<span>`, and the TODO exists to tell you the element moved.
|
|
120
|
+
|
|
121
|
+
## `href` follows `as`
|
|
122
|
+
|
|
123
|
+
bestax gives an element the attributes of the tag `as` names, so `href` exists only where that
|
|
124
|
+
tag is an `<a>`. rbx is looser: `<Button as="span" href="/x">` type-checks there and renders
|
|
125
|
+
`<span href="/x">`, which navigates nowhere in any browser.
|
|
126
|
+
|
|
127
|
+
So the codemod keeps the element and drops the attribute, with a `prop:href` TODO:
|
|
128
|
+
|
|
129
|
+
```jsx
|
|
130
|
+
<Button as="span" href="/x">x</Button>
|
|
131
|
+
<Button as="span">x</Button> // + TODO(bestax-migrate): `href` on `as="span"` …
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
`<Button href="/x">` with no `as` goes the same way — bestax's `Button` renders a `<button>`,
|
|
135
|
+
so there is no anchor for the attribute to sit on. Where the link was the intent, set `as="a"`;
|
|
136
|
+
that is what keeps the `href`. Dropping the `as` does not, on this component.
|
|
117
137
|
|
|
118
138
|
## Refs
|
|
119
139
|
|
|
@@ -51,6 +51,50 @@ bestax's `<File>` renders the whole Bulma structure itself, so `File.Label`, `Fi
|
|
|
51
51
|
rbx puts `as` on everything; bestax does not. Either render the tag directly, or restructure.
|
|
52
52
|
See the `as` section of [prop-map.md](prop-map.md) for the components that do accept it.
|
|
53
53
|
|
|
54
|
+
The same rule fires a second way: several bestax components accept `as` but narrow it to the
|
|
55
|
+
tags Bulma's markup allows there, so a literal outside that union (`<Control as="span">`,
|
|
56
|
+
`<Media as="section">`) is dropped and named. The TODO lists the tags that component renders.
|
|
57
|
+
|
|
58
|
+
## `prop:href` — a link needs the anchor
|
|
59
|
+
|
|
60
|
+
bestax gives an element the attributes of the tag `as` names, so an `href` belongs on an `<a>`
|
|
61
|
+
or on a custom component you pass to `as`, never on another intrinsic tag. rbx let the two disagree, and the browser ignored the result:
|
|
62
|
+
`<Menu.List.Item as="span" href="/x">` rendered a `<span>` that navigated nowhere.
|
|
63
|
+
|
|
64
|
+
The codemod keeps the element you asked for and drops the attribute that did nothing:
|
|
65
|
+
|
|
66
|
+
```jsx
|
|
67
|
+
<Menu.List.Item as="span" href="/x">Home</Menu.List.Item>
|
|
68
|
+
<Menu.Item as="span">Home</Menu.Item>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Most targets take no `href` at all. It lives on `Menu.Item`, `Navbar.Item`, `Navbar.Link`,
|
|
72
|
+
`Panel.Block`, `Dropdown.Item` and the three `Pagination` controls, which render an `<a>` unless
|
|
73
|
+
told otherwise,
|
|
74
|
+
and on `Button` and `Level.Item` once `as="a"` names one — those two render a `<button>` and a
|
|
75
|
+
`<div>` by default, and drop the attribute. Everywhere else the codemod removes it.
|
|
76
|
+
|
|
77
|
+
`Dropdown.Item` is the one to read twice: it accepts `as="a" | "div" | "button"` and takes the
|
|
78
|
+
props of whichever you name, so the default `<a>` keeps an `href` and the other two do not.
|
|
79
|
+
Drop the `as` to make it a link again; inside the `<button>` form an `<a>` would nest
|
|
80
|
+
interactive content, so navigate in `onClick` there.
|
|
81
|
+
|
|
82
|
+
## `prop:target`, `prop:download`, `prop:hrefLang`, `prop:ping`, `prop:referrerPolicy`, `prop:media`
|
|
83
|
+
|
|
84
|
+
`target`, `download`, `hrefLang`, `ping`, `referrerPolicy` and `media` follow the element the same way
|
|
85
|
+
`href` does, and they are invalid on the wrong one whether or not an `href` is beside them —
|
|
86
|
+
`<Navbar.Link as="span" target="_blank">` does not compile on its own. Each is judged against
|
|
87
|
+
the element that actually renders, not as a group, so a `referrerPolicy` on an `<img>` or a
|
|
88
|
+
`target` on a `<form>` stays where it is legal. Where one is removed the TODO quotes it. Put it
|
|
89
|
+
on an `<a>` inside, or make the element one that takes it.
|
|
90
|
+
|
|
91
|
+
`rel` is never touched: React declares it on `HTMLAttributes`, so it is valid on every element.
|
|
92
|
+
|
|
93
|
+
A component can be narrower than its element. One that takes no `href` at any `as` takes none of
|
|
94
|
+
these either. `Level.Item` is not narrower: it declares the anchor's whole attribute surface at
|
|
95
|
+
every `as` and forwards it only on the `<a>`, so all of these survive at `as="a"` and none of
|
|
96
|
+
them reaches a `<p>` or a `<div>`.
|
|
97
|
+
|
|
54
98
|
## `component:Generic` — rbx's base element
|
|
55
99
|
|
|
56
100
|
`Generic` is rbx's untyped passthrough. Render the underlying tag, and move its helper props to
|
|
@@ -155,10 +199,6 @@ children — where it renders its own background and close button, both wired to
|
|
|
155
199
|
form instead, which renders only what you wrote; there, wire your own `Modal.Background`'s
|
|
156
200
|
`onClick` to the same `onClose`.
|
|
157
201
|
|
|
158
|
-
## `prop:textColor="white-ter"` / `"white-bis"`
|
|
159
|
-
|
|
160
|
-
The only two rbx colour names bestax does not carry. Use `white`, or a custom class.
|
|
161
|
-
|
|
162
202
|
## `value-reference` — a component used as a value
|
|
163
203
|
|
|
164
204
|
`const X = Card.Header;` and similar. The codemod rewrites what it can prove safe and flags the
|
|
@@ -29,6 +29,23 @@ this automatically for literal values; dynamic values get TODOs.
|
|
|
29
29
|
| flexbox props | same names/values (`flexDirection`, `justifyContent`, …) |
|
|
30
30
|
| `clearfix`, `overlay` | same |
|
|
31
31
|
|
|
32
|
+
## `renderAs` → `as`, and the props that follow it
|
|
33
|
+
|
|
34
|
+
bestax gives an element the attributes of the tag `as` names, and several components narrow
|
|
35
|
+
`as` to the tags Bulma's markup allows there (`Footer` is `'footer' | 'div'`, `Control` is
|
|
36
|
+
`'div' | 'p'`, `Level.Item` is `'div' | 'p' | 'a'`). RBC's `renderAs` took any tag, so two
|
|
37
|
+
shapes cannot carry across:
|
|
38
|
+
|
|
39
|
+
- a `renderAs` outside that union — `<Media renderAs="section">` — drops the `as` with a
|
|
40
|
+
`prop:as` TODO naming the tags the component does render;
|
|
41
|
+
- an `href` beside a `renderAs` that is not an `<a>` (`<Menu.List.Item renderAs="span"
|
|
42
|
+
href="/x">`) keeps the element and drops the `href`, with a `prop:href` TODO. RBC rendered
|
|
43
|
+
a `<span href="/x">` there, which navigates nowhere in any browser, so nothing working is
|
|
44
|
+
lost. Drop the `renderAs` where the link was the point.
|
|
45
|
+
|
|
46
|
+
`<Button href="/x">` with no `renderAs` goes the same way: bestax's `Button` renders a
|
|
47
|
+
`<button>`. Set `as="a"` to make it a link.
|
|
48
|
+
|
|
32
49
|
## Boolean modifier convention
|
|
33
50
|
|
|
34
51
|
RBC uses bare booleans (`loading`, `outlined`, `rounded`, `fullwidth`); bestax prefixes
|
|
@@ -17,7 +17,7 @@ Reported from package.json, not a code TODO. bestax-bulma's peers: **React ^18 |
|
|
|
17
17
|
**@fortawesome/fontawesome-free ^6.7 || ^7** (FA 5 apps: upgrade, or
|
|
18
18
|
`npm install --legacy-peer-deps` and keep FA 5 for your own `<i>` tags).
|
|
19
19
|
|
|
20
|
-
## `Element` — no generic element
|
|
20
|
+
## `component:Element` — no generic element
|
|
21
21
|
|
|
22
22
|
bestax has no `Element`. Pick the semantic component (`Block`, `Box`, `Content`, …) that
|
|
23
23
|
matches the usage, or plain JSX with classes:
|
|
@@ -29,7 +29,7 @@ matches the usage, or plain JSX with classes:
|
|
|
29
29
|
<Span textColor="grey" m="2">…</Span> // bestax exports Span/Paragraph/Strong/etc.
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
## `Tile` — Bulma v1 replaced tiles with Grid
|
|
32
|
+
## `component:Tile` — Bulma v1 replaced tiles with Grid
|
|
33
33
|
|
|
34
34
|
Convert ancestor/parent/child tile trees to `Grid`/`Cell` (docs:
|
|
35
35
|
https://bestax.io/docs/api/grid):
|
|
@@ -87,7 +87,7 @@ RBC modal has) selects the **compound** form, and that renders only the children
|
|
|
87
87
|
So `closeOnBlur` and `showClose={true}` mean "add those two children"; passing either as `false`
|
|
88
88
|
means "drop the prop", since the compound form gives you neither unless you ask.
|
|
89
89
|
|
|
90
|
-
## `touch` / `untilWidescreen` / `untilFullhd` / `{ only: true }` breakpoints
|
|
90
|
+
## `responsive` — `touch` / `untilWidescreen` / `untilFullhd` / `{ only: true }` breakpoints
|
|
91
91
|
|
|
92
92
|
No bestax helper-prop variants exist. Use Bulma classes directly:
|
|
93
93
|
`className="is-hidden-touch"`, `is-flex-tablet-only`, etc. (all still exist in Bulma v1).
|
|
@@ -113,7 +113,7 @@ The codemod only rewrites literals. Convert the expression at its source, e.g.:
|
|
|
113
113
|
<Block textSize={String(n) as '1' | '2' | '3' | '4' | '5' | '6' | '7'}>
|
|
114
114
|
```
|
|
115
115
|
|
|
116
|
-
## Button shade colors (`black-bis`, `grey-light`, …) and `isSelected`
|
|
116
|
+
## `prop:color` — Button shade colors (`black-bis`, `grey-light`, …) and `isSelected`
|
|
117
117
|
|
|
118
118
|
bestax `Button` colors are the semantic set + `text`/`ghost`. For shades use
|
|
119
119
|
`bgColor`/`textColor` (they accept the full palette incl. shades), and replace
|
|
@@ -146,6 +146,53 @@ to `<Delete>`, a plain function component that forwards no ref — even though `
|
|
|
146
146
|
does. The codemod detects that case and replaces the general advice with a TODO naming
|
|
147
147
|
`Delete`, so the message on the line is the one to trust.
|
|
148
148
|
|
|
149
|
+
## `prop:as` — a tag the component does not render
|
|
150
|
+
|
|
151
|
+
Several bestax components accept `as` but narrow it to the tags Bulma's markup allows there, so
|
|
152
|
+
a literal `renderAs` outside that union (`<Media renderAs="section">`, `<Footer
|
|
153
|
+
renderAs="section">`) becomes a `prop:as` TODO listing the tags that component does render. Wrap
|
|
154
|
+
the component in the element you wanted, or restructure. See the `as` section of
|
|
155
|
+
[prop-map.md](prop-map.md) for which components accept it at all.
|
|
156
|
+
|
|
157
|
+
## `prop:href` — a link needs the anchor
|
|
158
|
+
|
|
159
|
+
bestax gives an element the attributes of the tag `as` names, so an `href` belongs on an `<a>`
|
|
160
|
+
or on a custom component you pass to `as`, never on another intrinsic tag. RBC let the two
|
|
161
|
+
disagree, and the browser ignored the result: `<Menu.List.Item renderAs="span" href="/x">`
|
|
162
|
+
rendered a `<span>` that navigated nowhere. The element stays, the dead attribute goes:
|
|
163
|
+
|
|
164
|
+
```jsx
|
|
165
|
+
<Menu.List.Item renderAs="span" href="/x">Home</Menu.List.Item>
|
|
166
|
+
<Menu.Item as="span">Home</Menu.Item>
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
Most targets take no `href` at all. It lives on `Menu.Item`, `Navbar.Item`, `Navbar.Link`,
|
|
170
|
+
`Panel.Block`, `Dropdown.Item` and the three `Pagination` controls, which render an `<a>` unless
|
|
171
|
+
told otherwise,
|
|
172
|
+
and on `Button` and `Level.Item` once `as="a"` names one — those two render a `<button>` and a
|
|
173
|
+
`<div>` by default, and drop the attribute. Everywhere else the codemod removes it.
|
|
174
|
+
|
|
175
|
+
`Dropdown.Item` is the one to read twice: it accepts `as="a" | "div" | "button"` and takes the
|
|
176
|
+
props of whichever you name, so the default `<a>` keeps an `href` and the other two do not.
|
|
177
|
+
Drop the `as` to make it a link again; inside the `<button>` form an `<a>` would nest
|
|
178
|
+
interactive content, so navigate in `onClick` there.
|
|
179
|
+
|
|
180
|
+
## `prop:target`, `prop:download`, `prop:hrefLang`, `prop:ping`, `prop:referrerPolicy`, `prop:media`
|
|
181
|
+
|
|
182
|
+
`target`, `download`, `hrefLang`, `ping`, `referrerPolicy` and `media` follow the element the same way
|
|
183
|
+
`href` does, and they are invalid on the wrong one whether or not an `href` is beside them —
|
|
184
|
+
`<Navbar.Link as="span" target="_blank">` does not compile on its own. Each is judged against
|
|
185
|
+
the element that actually renders, not as a group, so a `referrerPolicy` on an `<img>` or a
|
|
186
|
+
`target` on a `<form>` stays where it is legal. Where one is removed the TODO quotes it. Put it
|
|
187
|
+
on an `<a>` inside, or make the element one that takes it.
|
|
188
|
+
|
|
189
|
+
`rel` is never touched: React declares it on `HTMLAttributes`, so it is valid on every element.
|
|
190
|
+
|
|
191
|
+
A component can be narrower than its element. One that takes no `href` at any `as` takes none of
|
|
192
|
+
these either. `Level.Item` is not narrower: it declares the anchor's whole attribute surface at
|
|
193
|
+
every `as` and forwards it only on the `<a>`, so all of these survive at `as="a"` and none of
|
|
194
|
+
them reaches a `<p>` or a `<div>`.
|
|
195
|
+
|
|
149
196
|
## Helper props dropped from plain-element replacements
|
|
150
197
|
|
|
151
198
|
Where the codemod produced a plain element (`Form.Label` → `<label>`, `Breadcrumb.Item` →
|
|
@@ -13,7 +13,7 @@ This is the self-contained inventory of the color/size/variant props that matter
|
|
|
13
13
|
members still typecheck on `Progress`/`Notification`/`Hero` but style nothing. They are
|
|
14
14
|
**deprecated**: passing one logs a console warning in development, and they will be removed
|
|
15
15
|
from those unions in the next major (the `has-text-*`/`has-background-*` **helpers** do cover
|
|
16
|
-
|
|
16
|
+
every one of them). On the `Hero` root, `inherit` and `current` are equally CSS-less and deprecated
|
|
17
17
|
(its `Head`/`Body`/`Foot` sub-components keep them, as text helpers). `Pagination` and
|
|
18
18
|
`Tabs` ship no color CSS for **any** value — their entire `color`
|
|
19
19
|
prop is deprecated. Before relying on an unusual value, grep the shipped CSS:
|
|
@@ -39,50 +39,50 @@ This is the self-contained inventory of the color/size/variant props that matter
|
|
|
39
39
|
```
|
|
40
40
|
primary, link, info, success, warning, danger,
|
|
41
41
|
black, black-bis, black-ter, grey-darker, grey-dark, grey, grey-light, grey-lighter,
|
|
42
|
-
white, light, dark
|
|
42
|
+
white, white-bis, white-ter, light, dark
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
Shades (`colorShade` / `backgroundColorShade`): `00, 05, 10, … 95, invert, light, dark, soft, bold, on-scheme`.
|
|
46
46
|
|
|
47
47
|
## Component `color` / `size` props (verbatim unions)
|
|
48
48
|
|
|
49
|
-
| Component | `color` accepts
|
|
50
|
-
| ------------------ |
|
|
51
|
-
| `Button` | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black \| text \| ghost`
|
|
52
|
-
| `Notification` |
|
|
53
|
-
| `Tag` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
54
|
-
| `Box` | `primary \| link \| info \| success \| warning \| danger`
|
|
55
|
-
| `Message` | `primary \| link \| info \| success \| warning \| danger`
|
|
56
|
-
| `Input` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
57
|
-
| `Avatar` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
58
|
-
| `Badge` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
59
|
-
| `Title` | — (no `color`; use `textColor`)
|
|
60
|
-
| `SubTitle` | — (no `color`; use `textColor`)
|
|
61
|
-
| `Autocomplete` | `primary \| link \| info \| success \| warning \| danger`
|
|
62
|
-
| `Checkbox` | `primary \| link \| info \| success \| warning \| danger`
|
|
63
|
-
| `DateInput` | `primary \| link \| info \| success \| warning \| danger`
|
|
64
|
-
| `DateTimeInput` | `primary \| link \| info \| success \| warning \| danger`
|
|
65
|
-
| `File` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
66
|
-
| `Hero` |
|
|
67
|
-
| `LinkButton` | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black`
|
|
68
|
-
| `Loading` | `primary \| link \| info \| success \| warning \| danger`
|
|
69
|
-
| `Navbar` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
70
|
-
| `Numberinput` | `primary \| link \| info \| success \| warning \| danger \| light \| dark`
|
|
71
|
-
| `Pagination` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
72
|
-
| `Panel` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
73
|
-
| `Progress` |
|
|
74
|
-
| `Radio` | `primary \| link \| info \| success \| warning \| danger`
|
|
75
|
-
| `Rate` | `primary \| link \| info \| success \| warning \| danger`
|
|
76
|
-
| `Select` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
77
|
-
| `Slider` | `primary \| link \| info \| success \| warning \| danger`
|
|
78
|
-
| `Steps` | `primary \| link \| info \| success \| warning \| danger`
|
|
79
|
-
| `Switch` | `primary \| link \| info \| success \| warning \| danger`
|
|
80
|
-
| `Tabs` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
81
|
-
| `Taginput` | `primary \| link \| info \| success \| warning \| danger`
|
|
82
|
-
| `TextArea` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
83
|
-
| `TimeInput` | `primary \| link \| info \| success \| warning \| danger`
|
|
84
|
-
| `Tooltip` | `primary \| link \| info \| success \| warning \| danger \| dark \| light`
|
|
85
|
-
| `Tr` / `Td` / `Th` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white`
|
|
49
|
+
| Component | `color` accepts | `size` accepts | Notes |
|
|
50
|
+
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
51
|
+
| `Button` | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black \| text \| ghost` | `small \| normal \| medium \| large` | adds `text`, `ghost`; also `isLight`, `isOutlined`, `isInverted`, `isRounded` |
|
|
52
|
+
| `Notification` | every `validColors` member (the `-bis`/`-ter` shades and the greys deprecated: no CSS, dev-warn, removed next major — see ⚠️) | — | also `isLight` |
|
|
53
|
+
| `Tag` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `normal \| medium \| large` | also `isLight`, `isRounded`, `isDelete`, `isHoverable` |
|
|
54
|
+
| `Box` | `primary \| link \| info \| success \| warning \| danger` | — | `color` renders `has-text-<color>`, same as `textColor` (which wins when both are set; no `.box.is-*` ships — tint via `bgColor`); also `hasShadow` |
|
|
55
|
+
| `Message` | `primary \| link \| info \| success \| warning \| danger` | — | the 6 only |
|
|
56
|
+
| `Input` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isRounded`, `isStatic` |
|
|
57
|
+
| `Avatar` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `16x16 \| 24x24 \| 32x32 \| 48x48 \| 64x64 \| 96x96 \| 128x128 \| number` | initials/icon background (auto-derived from `name` when unset); also `shape` |
|
|
58
|
+
| `Badge` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | pill background; default `danger` |
|
|
59
|
+
| `Title` | — (no `color`; use `textColor`) | `1`–`6` (string or number) | also `isSpaced` |
|
|
60
|
+
| `SubTitle` | — (no `color`; use `textColor`) | `1`–`6` (string or number) | — |
|
|
61
|
+
| `Autocomplete` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | the 6 only |
|
|
62
|
+
| `Checkbox` | `primary \| link \| info \| success \| warning \| danger` | `small \| normal \| medium \| large` | the 6 only |
|
|
63
|
+
| `DateInput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `isRounded` |
|
|
64
|
+
| `DateTimeInput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `isRounded` |
|
|
65
|
+
| `File` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isBoxed`, `isFullwidth` |
|
|
66
|
+
| `Hero` | every `validColors` member + `inherit`/`current` (the `-bis`/`-ter` shades, the greys, `inherit` and `current` deprecated: no CSS, dev-warn, removed next major — see ⚠️) | `small \| medium \| large \| fullheight \| fullheight-with-navbar` | section background |
|
|
67
|
+
| `LinkButton` | `primary \| link \| info \| success \| warning \| danger \| white \| light \| dark \| black` | — | button-styled link; emits `link-button-<color>` — **no `isLight`/`isOutlined`/`isInverted`** |
|
|
68
|
+
| `Loading` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | spinner color; default light grey |
|
|
69
|
+
| `Navbar` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | — |
|
|
70
|
+
| `Numberinput` | `primary \| link \| info \| success \| warning \| danger \| light \| dark` | `small \| medium \| large` | also `inputColor` (the 6) for the inner input |
|
|
71
|
+
| `Pagination` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | **entire `color` prop deprecated** (no CSS ships; dev-warn; removal next major) |
|
|
72
|
+
| `Panel` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | — |
|
|
73
|
+
| `Progress` | every `validColors` member (the `-bis`/`-ter` shades and the greys deprecated: no CSS, dev-warn, removed next major — see ⚠️) | `small \| medium \| large` | — |
|
|
74
|
+
| `Radio` | `primary \| link \| info \| success \| warning \| danger` | `small \| normal \| medium \| large` | the 6 only |
|
|
75
|
+
| `Rate` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | the 6 only |
|
|
76
|
+
| `Select` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isRounded` |
|
|
77
|
+
| `Slider` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `isRounded`, `isCircle` |
|
|
78
|
+
| `Steps` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | the 6 only |
|
|
79
|
+
| `Switch` | `primary \| link \| info \| success \| warning \| danger` | `small \| normal \| medium \| large` | also `isRounded`, `isThin`, `isOutlined` |
|
|
80
|
+
| `Tabs` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | **entire `color` prop deprecated** (no CSS ships; dev-warn; removal next major) |
|
|
81
|
+
| `Taginput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | also `tagColor` (the 6 + `dark \| light`) for the tags |
|
|
82
|
+
| `TextArea` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | `small \| medium \| large` | also `isRounded`, `isStatic` |
|
|
83
|
+
| `TimeInput` | `primary \| link \| info \| success \| warning \| danger` | `small \| medium \| large` | — |
|
|
84
|
+
| `Tooltip` | `primary \| link \| info \| success \| warning \| danger \| dark \| light` | `small \| medium \| large` | — |
|
|
85
|
+
| `Tr` / `Td` / `Th` | `primary \| link \| info \| success \| warning \| danger \| black \| dark \| light \| white` | — | cell background; cells take `textAlign`/`textWeight`/`textSize` directly |
|
|
86
86
|
|
|
87
87
|
The 6 brand colors (`primary, link, info, success, warning, danger`) are the ones a custom theme
|
|
88
88
|
recolors via the HSL trios (see `css-variables.md`). The greyscale and `white`/`light`/`dark`
|