docs: add per-component lifecycle status badges#738
Conversation
github-actions
Bot
added
documentation
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
QuintonJason
force-pushed
the
docs/foundations
branch
from
2c2fb97 to
18559ac
Compare
QuintonJason
force-pushed
the
docs/add-status-badges
branch
from
6a83c34 to
1de0fb6
Compare
QuintonJason
force-pushed
the
docs/foundations
branch
from
18559ac to
a767e2d
Compare
QuintonJason
force-pushed
the
docs/add-status-badges
branch
from
1de0fb6 to
aded0ca
Compare
…able) Add a StatusBadge React helper at libs/core/src/stories/_helpers/ that renders Stable / Beta / Deprecated above a component's MDX page so consumers see lifecycle state without navigating to the central table. Apply it to pds-button, pds-modal, and pds-table as a proof-of-pattern; remaining components stay unbadged until follow-up PRs. Source of truth remains the Resources/Component status table; the badge component is documented to be kept in sync.
Address review feedback that hard-coded status props would drift from the central Component status table. Introduce a JSON manifest as the single source of truth: - libs/core/src/stories/resources/component-status.json lists all 35 Pine components with their lifecycle status and any inline notes. - StatusBadge takes an optional `component` prop and reads the status from the JSON manifest, falling back to the explicit `status` prop when supplied. - The three component MDX pages (pds-button, pds-modal, pds-table) now use the component-tag form so promotion only requires editing JSON. - The central Component status MDX gains a callout pointing contributors at the JSON manifest as the source of truth.
QuintonJason
force-pushed
the
docs/add-status-badges
branch
from
aded0ca to
25cf513
Compare
✅ Deploy Preview for pine-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Prop overrides JSON manifest, validate status values, warn on unknown components, include notes in aria-label, and remove unused default export.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 2031e57. Configure here.
Guard against null or malformed manifest entries and skip manifest notes when an explicit status override is provided.
pixelflips
left a comment
pixelflips
left a comment
There was a problem hiding this comment.
A few comments. Nothing blocking. Overall, this feels very manual, even though Storybook can handle some of it. I'll let you make the call, but I'd lean toward letting a storybook addon handle this vs. basically creating a new component. Either way is fine by me, though, just some thoughts.
| "summary": "Do not use in new UI; plan migration; removal is scheduled with notice in the changelog." | ||
| } | ||
| }, | ||
| "components": { |
There was a problem hiding this comment.
Probably fine, but it seems very manual to keep updated. Previously, when I was looking into this, there were quite a few addons for Storybook that, when added, just allowed you to set the badge in the component story file params. They can also be configured to show in the sidebar.
Just a thought, not a blocker. Do a search for "badges" at https://storybook.js.org/addons.
There was a problem hiding this comment.
Will handle in a followup
2 participants
Description
Renders a Stable / Beta / Deprecated badge at the top of each component MDX page so consumers see lifecycle state without navigating to the central Resources/Component status table.
What's new
libs/core/src/stories/_helpers/StatusBadge.tsx(+ companion CSS) — typed React helper rendered as<StatusBadge status="stable" />. Uses Pine semantic tokens (--pine-color-text-success/-warning/-danger) for color so the badge respects current and future theming.What's not in this PR
Dependency note
This PR is based on
docs/foundations(#736) because the badge mirrors the lifecycle labels introduced there. Merge that first; rebase onmainonce it lands.Closes a Level-3 "Component status page" surfacing gap on the maturity scorecard.
Fixes #(no-issue)
Type of change
How Has This Been Tested?
Confirmed the helper lint-passes (ESLint + pine-colors Stylelint plugin).
Verified import path from each component MDX resolves under the existing
_helpersre-export pattern.Storybook builds and renders the badge above the component name on each affected page.
unit tests
e2e tests
accessibility tests (badge has
role="note"+ descriptivearia-label)tested manually
other:
Test Configuration:
Checklist:
cc @Kajabi/dss-devs
Note
Low Risk
Documentation and Storybook-only helpers; no runtime component API or app behavior changes.
Overview
Introduces a shared lifecycle status system for Storybook: a
component-status.jsonmanifest, a Resources/Component status MDX page, and a reusableStatusBadgehelper that reads status (and optional notes) from the manifest when you passcomponent="pds-…".StatusBadge(React + CSS) renders Stable / Beta / Deprecated (and Unknown on bad/missing data) using Pine semantic color tokens,role="note", and anaria-labelthat can include manifest notes. It is re-exported fromstories/_helpersand wired at the top ofpds-button,pds-modal, andpds-tabledocs as the initial rollout pattern.The central status doc duplicates the component list in a manual table; the JSON is documented as the source of truth for badges, with an expectation to keep the table in sync when statuses change.
Reviewed by Cursor Bugbot for commit 0e7daf9. Bugbot is set up for automated code reviews on this repo. Configure here.