kobotoolbox / kpi / 27607839577 / 8

82%

master: 76%

push

github

feat(frontend): update button and pill DEV-2280 (#7152)

### 📣 Summary

Added Pill component wrapper with gray-light and amber-light variants,
improved Button stories organization, and updated amber color palette.

### 💭 Notes

Changes here:
- **Pill component** (`jsapp/js/components/common/Pill.tsx` + stories):
New Mantine wrapper with custom variants
  - `gray-light` (default): gray background with dark text
  - `amber-light`: going to be used in Activity Log
  - Storybook preview shows all sizes and variants
- **Pill theme** (`jsapp/js/theme/kobo/Pill.ts` + module.css): Custom
variant definitions with hover states for the close button
- **Button stories** (`ButtonNew.stories.tsx`): Reorganized
PreviewAllVariants with headings
  - Added `danger-transparent` variant to the preview
  - Now shows variant name and size with nested layout
  - Better demo button labels
- **Theme colors** (`jsapp/js/theme/kobo/index.ts`): 
- Filled in full amber color scale [0-9] instead of placeholder `#000`
values
- Added index number comments `// [0]` to all color arrays so you don't
have to count
- Updated Alert and KoboIcon to use new amber scale (amber[5] and
amber[8])

AI Joke: Pills are just badges that learned to close themselves. 💊

### 👀 Preview steps

1. ℹ️ Open Storybook
2. Go to Design system → Pill
3. 🟢 You'll see the Default story with a simple gray pill
4. Switch to PreviewAllVariants
5. 🟢 Check out gray-light and amber-light variants in all sizes (xs
through xl)
6. 🟢 Hover over the remove ("x") buttons - they get darker
7. Navigate to Design system → Button → PreviewAllVariants
8. 🟢 Layout now has variant headings and size subheadings instead of one
big grid
9. 🟢 The new danger-transparent variant is in there too

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

3789 of 12100 branches covered (31.31%)

16791 of 36274 relevant lines covered (46.29%)

0.46 hits per line