Create-flow chips were hard to use as toggles: selected state lived only in color, unselected Applicable Scope looked like a disabled control, the five-value cap on core values had no visible remaining count, and three Help icons on community structure did nothing.
This pass matches Figma Chip unselected (cream type, hollow, thin dark ring) versus selected (filled yellow, black type, plus a check so selection is not color-only), uses a real disabled state only when the field is read-only, surfaces the five-value limit, and drops the dummy Help icons.
Changes
Chip toggle buttons set aria-pressed and show a check when selected
Chip fill, type, and ring are painted on the element so Safari’s native button chrome cannot turn unselected chips gray
Applicable Scope uses unselected / selected; read-only uses a real disabled chip and hides Add
Core values show “n of 5”, disable leftover chips and Add at the cap, and announce the limit
Organization Type, Scale, and Maturity no longer show Help icons
Tests for Chip, Applicable Scope, MultiSelect, core values, and community structure
Screenshots
How to Test
npm run dev and open /create/decision-approaches
Open Sociocracy (or any approach). Unselected Applicable Scope chips should be cream type on a hollow dark ring, not gray fill. Click one: filled yellow, black type, check. Add Applicable Scope still works
/create/core-values: counter reads “0 of 5” through “5 of 5”. At five, leftover chips and Add are disabled; a screen reader should hear the limit
/create/community-structure: Organization Type, Scale, and Maturity have no Help icons; chips still toggle with aria-pressed
Optional: npx tsc --noEmit and npx vitest run tests/components/Chip.test.tsx tests/components/ApplicableScopeField.test.tsx tests/components/MultiSelect.test.tsx tests/components/CoreValuesSelectScreen.test.tsx tests/components/CommunityStructureSelectScreen.test.tsx
Notes
Selected chips include a check that Figma Chip Selected does not draw; that is the non-color selected indicator
Unselected is supposed to look quieter than selected. Gray fill is disabled only
## Overview
Create-flow chips were hard to use as toggles: selected state lived only in color, unselected Applicable Scope looked like a disabled control, the five-value cap on core values had no visible remaining count, and three Help icons on community structure did nothing.
This pass matches Figma Chip unselected (cream type, hollow, thin dark ring) versus selected (filled yellow, black type, plus a check so selection is not color-only), uses a real disabled state only when the field is read-only, surfaces the five-value limit, and drops the dummy Help icons.
## Changes
- Chip toggle buttons set `aria-pressed` and show a check when selected
- Chip fill, type, and ring are painted on the element so Safari’s native button chrome cannot turn unselected chips gray
- Applicable Scope uses unselected / selected; read-only uses a real disabled chip and hides Add
- Core values show “n of 5”, disable leftover chips and Add at the cap, and announce the limit
- Organization Type, Scale, and Maturity no longer show Help icons
- Tests for Chip, Applicable Scope, MultiSelect, core values, and community structure
## Screenshots
## How to Test
1. `npm run dev` and open `/create/decision-approaches`
2. Open Sociocracy (or any approach). Unselected Applicable Scope chips should be cream type on a hollow dark ring, not gray fill. Click one: filled yellow, black type, check. Add Applicable Scope still works
3. `/create/core-values`: counter reads “0 of 5” through “5 of 5”. At five, leftover chips and Add are disabled; a screen reader should hear the limit
4. `/create/community-structure`: Organization Type, Scale, and Maturity have no Help icons; chips still toggle with `aria-pressed`
5. Optional: `npx tsc --noEmit` and `npx vitest run tests/components/Chip.test.tsx tests/components/ApplicableScopeField.test.tsx tests/components/MultiSelect.test.tsx tests/components/CoreValuesSelectScreen.test.tsx tests/components/CommunityStructureSelectScreen.test.tsx`
## Notes
- Selected chips include a check that Figma Chip Selected does not draw; that is the non-color selected indicator
- Unselected is supposed to look quieter than selected. Gray fill is disabled only
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Overview
Create-flow chips were hard to use as toggles: selected state lived only in color, unselected Applicable Scope looked like a disabled control, the five-value cap on core values had no visible remaining count, and three Help icons on community structure did nothing.
This pass matches Figma Chip unselected (cream type, hollow, thin dark ring) versus selected (filled yellow, black type, plus a check so selection is not color-only), uses a real disabled state only when the field is read-only, surfaces the five-value limit, and drops the dummy Help icons.
Changes
aria-pressedand show a check when selectedScreenshots
How to Test
npm run devand open/create/decision-approaches/create/core-values: counter reads “0 of 5” through “5 of 5”. At five, leftover chips and Add are disabled; a screen reader should hear the limit/create/community-structure: Organization Type, Scale, and Maturity have no Help icons; chips still toggle witharia-pressednpx tsc --noEmitandnpx vitest run tests/components/Chip.test.tsx tests/components/ApplicableScopeField.test.tsx tests/components/MultiSelect.test.tsx tests/components/CoreValuesSelectScreen.test.tsx tests/components/CommunityStructureSelectScreen.test.tsxNotes