Releasing Changes

Rollout checklist

0 of 19 verified

Reset

Accessibility

Use high-contrast text colors

Allow all tasks to be completed using the keyboard alone

Show focus rings on interactive elements when navigating with the keyboard

Use semantic HTML elements instead of generic divs

Provide descriptive labels for all inputs

Respect prefers-reduced-motion when adding animations and transitions

• WCAG contrast minimum
• WAI-ARIA patterns

Design

Prefer semantic tokens over core color tokens

Support both light and dark mode with data-theme

Maintain parity between Figma and code

Accommodate different viewport widths

Accommodate content that is longer or shorter than expected

Render correctly at 200% browser zoom

Don’t use color alone to convey information

Documentation

Write JSDoc comments for all props and components

Document usage examples in stylus-docs

Share an announcement in #design-system

Testing

Write unit tests for new features and interactions

Risk mitigation

Verify that changes will not affect active growth experiments

Hide broad or risky changes behind a feature flag

Feature flags

For high-risk or broadly impactful changes, wrap the new behavior behind a LaunchDarkly feature flag. This allows the change to be tested in production with a subset of users before full rollout.

Stylus components can read flags directly using the useFlags hook from the LaunchDarkly React SDK:

import { useFlags } from "launchdarkly-react-client-sdk";

export const Card = (props: CardProps) => {
  const flags = useFlags();
  const useNewLayout = flags["stylus-card-v2"] ?? false;

  if (useNewLayout) {
    return <NewCardLayout {...props} />;
  }

  return <CurrentCardLayout {...props} />;
};

useFlags returns all feature flag values from the nearest LDProvider. Components using this hook must render inside an LDProvider.

When the rollout is complete, remove the flag check and the old code path.