diff --git a/docs/evidence/button-ghost/rn-web-bitcoin-swap-light.jpg b/docs/evidence/button-ghost/rn-web-bitcoin-swap-light.jpg new file mode 100644 index 0000000..85e18f5 Binary files /dev/null and b/docs/evidence/button-ghost/rn-web-bitcoin-swap-light.jpg differ diff --git a/docs/evidence/button-ghost/rn-web-probe-matrix-dark.jpg b/docs/evidence/button-ghost/rn-web-probe-matrix-dark.jpg new file mode 100644 index 0000000..9ffe32c Binary files /dev/null and b/docs/evidence/button-ghost/rn-web-probe-matrix-dark.jpg differ diff --git a/docs/evidence/button-ghost/rn-web-probe-matrix-light.jpg b/docs/evidence/button-ghost/rn-web-probe-matrix-light.jpg new file mode 100644 index 0000000..514b16f Binary files /dev/null and b/docs/evidence/button-ghost/rn-web-probe-matrix-light.jpg differ diff --git a/docs/evidence/button-ghost/web-ghost-board-dark.png b/docs/evidence/button-ghost/web-ghost-board-dark.png new file mode 100644 index 0000000..03d1c54 Binary files /dev/null and b/docs/evidence/button-ghost/web-ghost-board-dark.png differ diff --git a/docs/evidence/button-ghost/web-ghost-board-light.png b/docs/evidence/button-ghost/web-ghost-board-light.png new file mode 100644 index 0000000..c9b796b Binary files /dev/null and b/docs/evidence/button-ghost/web-ghost-board-light.png differ diff --git a/docs/evidence/button-ghost/web-variant-board-light.png b/docs/evidence/button-ghost/web-variant-board-light.png new file mode 100644 index 0000000..0b5c882 Binary files /dev/null and b/docs/evidence/button-ghost/web-variant-board-light.png differ diff --git a/packages/doc/generated/components/button.md b/packages/doc/generated/components/button.md index 01428c3..e2e25cc 100644 --- a/packages/doc/generated/components/button.md +++ b/packages/doc/generated/components/button.md @@ -9,13 +9,15 @@ nav_order: 1 # Button +`variant="ghost"` is the lowest emphasis (tertiary), below `solid` and the default `soft`: no fill at rest, `text-primary` text and a `bg-subtle` wash when pressed. It keeps each size's height and padding, so its hit area matches `solid` and `soft`. Use it for an action inside content, where a fill would compete with that content. It is never a screen's main action or its only one. `accent` does not paint ghost: the prop is accepted and has no effect, as on `IconButton`. + ## API ### Button Props | Prop | Required | Type | Notes | | --- | --- | --- | --- | -| `variant` | no | `'solid' | 'soft'` | style axis | +| `variant` | no | `'solid' | 'soft' | 'ghost'` | style axis | | `size` | no | `'sm' | 'lg'` | style axis | | `fill` | no | `'natural' | 'even' | 'hug'` | style axis | | `accent` | no | `'neutral' | 'lilac' | 'orange'` | theme scope | diff --git a/packages/doc/pipeline/component-api-ir.js b/packages/doc/pipeline/component-api-ir.js index 5291bfe..464428e 100644 --- a/packages/doc/pipeline/component-api-ir.js +++ b/packages/doc/pipeline/component-api-ir.js @@ -11,6 +11,7 @@ export const COMPONENT_API_DOCS = [ file: 'packages/rn/generated/components/button.ts', type: 'ButtonProps', relatedPrefix: 'Button', + lead: '`variant="ghost"` is the lowest emphasis (tertiary), below `solid` and the default `soft`: no fill at rest, `text-primary` text and a `bg-subtle` wash when pressed. It keeps each size\'s height and padding, so its hit area matches `solid` and `soft`. Use it for an action inside content, where a fill would compete with that content. It is never a screen\'s main action or its only one. `accent` does not paint ghost: the prop is accepted and has no effect, as on `IconButton`.', }, { source: 'alert', diff --git a/packages/doc/pipeline/docs-drift.test.js b/packages/doc/pipeline/docs-drift.test.js index c2f0a92..2d21e6e 100644 --- a/packages/doc/pipeline/docs-drift.test.js +++ b/packages/doc/pipeline/docs-drift.test.js @@ -63,7 +63,7 @@ const PAGE_CONTRACT = { kind: 'api', source: 'button', title: 'Button', nav: 1, cells: [ '### Button Props', - "| `variant` | no | `'solid' | 'soft'` | style axis |", + "| `variant` | no | `'solid' | 'soft' | 'ghost'` | style axis |", "| `size` | no | `'sm' | 'lg'` | style axis |", "| `fill` | no | `'natural' | 'even' | 'hug'` | style axis |", "| `accent` | no | `'neutral' | 'lilac' | 'orange'` | theme scope |", @@ -76,6 +76,12 @@ const PAGE_CONTRACT = { '### Button Icon Props', '| `name` | yes | `IconName` | scalar icon name |', '> `children` is not accepted (`children?: never`).', + // the lead's four ghost points (#233 · the admitted docs contract): tertiary · + // inside content · never the main/only action · accent does not paint it. + 'is the lowest emphasis (tertiary)', + 'Use it for an action inside content, where a fill would compete with that content.', + "It is never a screen's main action or its only one.", + '`accent` does not paint ghost', ], excludes: ['## Example', '## Anatomy', '## Base', '## Token map'], }, diff --git a/packages/expo-demo/src/screens/Bitcoin.tsx b/packages/expo-demo/src/screens/Bitcoin.tsx index 7d8023b..3a7bd85 100644 --- a/packages/expo-demo/src/screens/Bitcoin.tsx +++ b/packages/expo-demo/src/screens/Bitcoin.tsx @@ -1,12 +1,25 @@ import * as React from 'react'; -import { Button, Text, View } from '@ds'; +import { Button, ButtonIcon, ButtonText, Text, View } from '@ds'; + +const BTC = '₿ 0.0413'; +const EUR = '€ 2 634'; export function Bitcoin() { + // The other-unit amount under the big one is a ghost swap (#233): an action inside + // content, so no fill competes with the amount. The screen owns the unit state. + const [inEuro, setInEuro] = React.useState(false); + return ( - ₿ 0.0413 + + {inEuro ? EUR : BTC} + + diff --git a/packages/playground/pages/component/button.html b/packages/playground/pages/component/button.html index 463582c..bb9cf02 100644 --- a/packages/playground/pages/component/button.html +++ b/packages/playground/pages/component/button.html @@ -32,18 +32,37 @@ - + + + + + +