@astryxdesign/core 0.2.0-canary.4e594e1 → 0.2.0-canary.523df3f
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.2.0-canary.
|
|
3
|
+
"version": "0.2.0-canary.523df3f",
|
|
4
4
|
"displayName": "Astryx Core",
|
|
5
5
|
"description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -644,7 +644,7 @@
|
|
|
644
644
|
"react-dom": ">=19.0.0"
|
|
645
645
|
},
|
|
646
646
|
"devDependencies": {
|
|
647
|
-
"@astryxdesign/cli": "0.2.0-canary.
|
|
647
|
+
"@astryxdesign/cli": "0.2.0-canary.523df3f",
|
|
648
648
|
"@babel/cli": "^8.0.4",
|
|
649
649
|
"@babel/core": "^7.29.7",
|
|
650
650
|
"@babel/preset-react": "^8.0.1",
|
|
@@ -62,7 +62,7 @@ export const docs = {
|
|
|
62
62
|
{
|
|
63
63
|
name: 'interactiveRef',
|
|
64
64
|
type: 'RefObject<HTMLElement | null>',
|
|
65
|
-
description: 'Ref to a nested control (e.g. a checkbox in startContent) that owns the item\'s keyboard access and action. The row becomes an enlarged click/tap target that delegates surface clicks to it (useClickableContainer) and renders no invisible button/anchor, so the row adds no second tab stop (WCAG 4.1.2). Mutually exclusive with onClick/href
|
|
65
|
+
description: 'Ref to a nested control (e.g. a checkbox in startContent) that owns the item\'s keyboard access and action. The row becomes an enlarged click/tap target that delegates surface clicks to it (useClickableContainer) and renders no invisible button/anchor, so the row adds no second tab stop (WCAG 4.1.2). Mutually exclusive with onClick/href; those are ignored when set.',
|
|
66
66
|
},
|
|
67
67
|
{
|
|
68
68
|
name: 'href',
|
|
@@ -34,10 +34,10 @@ export const docs = {
|
|
|
34
34
|
],
|
|
35
35
|
usage: {
|
|
36
36
|
description:
|
|
37
|
-
'A headless hover/focus reveal primitive. Gives a container a scoped trigger that reveals (or conceals) content inside it when the container is hovered or receives keyboard focus
|
|
37
|
+
'A headless hover/focus reveal primitive. Gives a container a scoped trigger that reveals (or conceals) content inside it when the container is hovered or receives keyboard focus: the classic "row actions appear on hover" pattern. The reveal is CSS-only: no hover state lives in React and hovering never triggers a re-render. The caller authors no StyleX for the reveal itself; the hook hands out a scoped marker and matching styles, so nested containers never leak hover/focus into one another. Accessible by construction: revealed content is visually hidden at rest with position and opacity (never display:none), so it stays mounted, keeps its place in the tab order, and is announced to assistive technology; it reveals on :focus-within so keyboard users see it when tabbing in, stays visible on touch (never gated behind hover on coarse pointers), and honors prefers-reduced-motion.',
|
|
38
38
|
bestPractices: [
|
|
39
39
|
{ guidance: true, description: 'Destructure getContainerProps and getContentRevealProps; spread getContainerProps() on the container (via mergeProps with your own stylex.props) and getContentRevealProps() on the content to reveal.' },
|
|
40
|
-
{ guidance: true, description: 'Use for secondary affordances
|
|
40
|
+
{ guidance: true, description: 'Use for secondary affordances: reveal-on-hover row actions (edit/copy/remove on list or table rows) and overlay controls on a card or media tile (e.g. Thumbnail\'s remove button).' },
|
|
41
41
|
{ guidance: true, description: 'Gate the reveal with isEnabled when a consumer prop decides whether content is revealed on hover or always shown.' },
|
|
42
42
|
{ guidance: true, description: 'Pass isLayoutPreserved for absolutely-positioned or overlay content to reserve its box and avoid layout shift when it appears.' },
|
|
43
43
|
{ guidance: false, description: 'Use it to hide content that must always be discoverable; keep essential actions visible instead of gating them behind hover.' },
|
|
@@ -52,7 +52,7 @@ export const docs = {
|
|
|
52
52
|
/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
|
|
53
53
|
export const docsDense = {
|
|
54
54
|
description:
|
|
55
|
-
'Headless hover/focus reveal primitive. Gives a container a scoped trigger that reveals (or conceals) content inside it on hover / keyboard focus
|
|
55
|
+
'Headless hover/focus reveal primitive. Gives a container a scoped trigger that reveals (or conceals) content inside it on hover / keyboard focus: the "row actions appear on hover" pattern. CSS-only: no hover state in React, no re-render on hover. Caller authors no StyleX; hook hands out a scoped marker + matching styles, so nested containers never leak hover/focus. Accessible: revealed content visually hidden at rest via position + opacity (never display:none), stays mounted + in tab order + announced; reveals on :focus-within, stays visible on touch, honors prefers-reduced-motion.',
|
|
56
56
|
paramDescriptions: {
|
|
57
57
|
options: 'config for reveal container. optional.',
|
|
58
58
|
'options.isEnabled': 'when false hook is inert: no marker, content getters return no styles, content always shown. Lets component gate reveal on its own prop.',
|
|
@@ -63,10 +63,10 @@ export const docsDense = {
|
|
|
63
63
|
},
|
|
64
64
|
usage: {
|
|
65
65
|
description:
|
|
66
|
-
'Headless hover/focus reveal primitive. Gives a container a scoped trigger that reveals (or conceals) content inside it on hover / keyboard focus
|
|
66
|
+
'Headless hover/focus reveal primitive. Gives a container a scoped trigger that reveals (or conceals) content inside it on hover / keyboard focus: the "row actions appear on hover" pattern. CSS-only: no hover state in React, no re-render on hover. Caller authors no StyleX; hook hands out a scoped marker + matching styles, so nested containers never leak hover/focus. Accessible: revealed content visually hidden at rest via position + opacity (never display:none), stays mounted + in tab order + announced; reveals on :focus-within, stays visible on touch, honors prefers-reduced-motion.',
|
|
67
67
|
bestPractices: [
|
|
68
68
|
{ guidance: true, description: 'Destructure getContainerProps + getContentRevealProps; spread getContainerProps() on container (via mergeProps w/ your stylex.props) + getContentRevealProps() on content to reveal.' },
|
|
69
|
-
{ guidance: true, description: 'Use for secondary affordances
|
|
69
|
+
{ guidance: true, description: 'Use for secondary affordances: reveal-on-hover row actions (edit/copy/remove on list / table rows) + overlay controls on card / media tile (e.g. Thumbnail remove button).' },
|
|
70
70
|
{ guidance: true, description: 'Gate reveal w/ isEnabled when a consumer prop decides revealed-on-hover vs always shown.' },
|
|
71
71
|
{ guidance: true, description: 'Pass isLayoutPreserved for absolutely-positioned / overlay content to reserve its box + avoid layout shift.' },
|
|
72
72
|
{ guidance: false, description: 'Use to hide content that must always be discoverable; keep essential actions visible instead of gating behind hover.' },
|