kobotoolbox / kpi / 27607839577
82%
master: 76%

LAST BUILD BRANCH: dependabot/github_actions/actions-deps-2b1d353b35
DEFAULT BRANCH: master
Ran
Jobs 10
Files 883
Run time 3min
Badge
Embed ▾
README BADGES
x

If you need to use a raster PNG badge, change the '.svg' to '.png' in the link

Markdown

Textile

RDoc

HTML

Rst
coverage: 81.594%. Remained the same
27607839577

push

github

web-flow 
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>

9035 of 12268 branches covered (73.65%)

29665 of 36357 relevant lines covered (81.59%)

5.56 hits per line

Coverage Regressions

Lines Coverage ∆ File
24
74.76
 -23.3% kpi/utils/usage_calculator.py
3
60.53
 -7.89% kobo/apps/organizations/utils.py
2
63.64
 -4.55% kobo/apps/stripe/utils/limit_enforcement.py
Jobs
ID Job ID Ran Files Coverage
1 27607839577.1 879
50.17
2 27607839577.2 879
53.54
3 27607839577.3 879
44.89
4 27607839577.4 881
51.53
5 27607839577.5 881
54.84
6 27607839577.6 879
59.45
7 27607839577.7 881
66.51
8 27607839577.8 881
46.29
9 27607839577.9 881
60.63
10 27607839577.10 883
68.87
Source Files on build 27607839577