Skip to content

feat(Chips): add "neutral" variant color #3170

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Oct 30, 2025
Merged

feat(Chips): add "neutral" variant color #3170

merged 2 commits into from
Oct 30, 2025

Conversation

@YossiSaadi
Copy link
Contributor

@YossiSaadi YossiSaadi commented Oct 30, 2025 •
edited by qodo-merge-for-open-source bot
Loading

User description

https://monday.monday.com/boards/3532714909/pulses/9857616053

PR Type

Enhancement

Description

  • Add "neutral" variant color support to Chips component

  • Extend color type definitions with neutral color mappings

  • Add neutral color to StateSelectedColor and StateSelectedHoverColor enums

  • Include neutral theme example in Storybook documentation

Diagram Walkthrough

flowchart LR
  A["Color Types"] -->|"Add neutral"| B["ElementAllowedColor"]
  C["Color Maps"] -->|"Add neutral mappings"| D["StateSelectedColor"]
  E["StateSelectedHoverColor"] -->|"Add neutral"| F["Color Enums"]
  G["Storybook Stories"] -->|"Add neutral examples"| H["Chips.stories.tsx"]
  B --> I["Chips Component"]
  D --> I
  F --> I
  H --> I
Loading

File Walkthrough
Relevant files
Enhancement
Colors.ts
Add neutral color type definitions and mappings                   

packages/core/src/types/Colors.ts

  • Add neutral color to MapStateSelectedColor mapping with
    --ui-background-color value
  • Add neutral color to MapStateSelectedHoverColor mapping with
    --ui-background-hover-color value
  • Extend ElementAllowedColor type to include "neutral" variant
 +5/-3     
colors-vars-map.ts
Add neutral to color state enums                                                 

packages/core/src/utils/colors-vars-map.ts

  • Add NEUTRAL = "neutral" to StateSelectedColor enum
  • Add NEUTRAL = "neutral" to StateSelectedHoverColor enum
 +4/-2     
Documentation
Chips.stories.tsx
Add neutral color examples to Storybook stories                   

packages/docs/src/pages/components/Chips/Chips.stories.tsx

  • Add neutral theme example to Themes story with color="neutral" prop
  • Add neutral color example to OnColor story with neutral background
    container
 +14/-0   

@YossiSaadi YossiSaadi requested a review from a team as a code owner October 30, 2025 12:22
@qodo-merge-for-open-source
Copy link
Contributor

qodo-merge-for-open-source bot commented Oct 30, 2025 •
edited
Loading

PR Reviewer Guide 🔍

(Review updated until commit 094e0fa)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

Type Consistency

Verify that all consumers of ElementAllowedColor and getElementColor properly handle the new "neutral" and "warning" mappings, including token availability for both selected and hover states.

 
  warning: "--warning-color-selected",
  neutral: "--ui-background-color"
};

const MapStateSelectedHoverColor = {
  positive: "--positive-color-selected-hover",
  negative: "--negative-color-selected-hover",
  primary: "--primary-selected-hover-color",
  warning: "--warning-color-selected-hover",
  neutral: "--ui-background-hover-color"
};
Deprecated Enums

Adding NEUTRAL to deprecated StateSelectedHoverColor and StateSelectedColor may encourage further usage; confirm call sites are migrating off these enums or add lint/docs to prevent new usage.

 
export enum StateSelectedColor {
  POSITIVE = "positive",
  NEGATIVE = "negative",
  PRIMARY = "primary",
  WARNING = "warning",
  NEUTRAL = "neutral"
}

/**
 * @deprecated
 */
export enum StateSelectedHoverColor {
  POSITIVE = "positive",
  NEGATIVE = "negative",
  PRIMARY = "primary",
  NEUTRAL = "neutral"
}

talkor
talkor approved these changes Oct 30, 2025
View reviewed changes
Copy link
Member

@talkor talkor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel neutral about this

@github-actions
Copy link
Contributor

github-actions bot commented Oct 30, 2025

📦 Bundle Size Analysis

✅ No bundle size changes detected.

Unchanged Components
Component Base PR Diff
@vibe/button 17.73KB 17.73KB 0B ➖
@vibe/icon 13.02KB 13.02KB 0B ➖
@vibe/loader 5.81KB 5.81KB 0B ➖
Accordion 6.34KB 6.34KB 0B ➖
AccordionItem 68.05KB 68.05KB 0B ➖
AlertBanner 72.88KB 72.88KB 0B ➖
AlertBannerButton 19.17KB 19.17KB 0B ➖
AlertBannerLink 15.5KB 15.5KB 0B ➖
AlertBannerText 65.49KB 65.49KB 0B ➖
AttentionBox 74.28KB 74.28KB 0B ➖
AttentionBoxLink 15.39KB 15.39KB 0B ➖
Avatar 68.23KB 68.28KB +47B 🔺
AvatarGroup 95.78KB 95.74KB -44B 🟢
Badge 43.61KB 43.61KB 0B ➖
Box 9.33KB 9.33KB 0B ➖
BreadcrumbItem 66.19KB 66.19KB 0B ➖
BreadcrumbMenu 70.07KB 70.07KB 0B ➖
BreadcrumbMenuItem 79.14KB 79.15KB +6B 🔺
BreadcrumbsBar 5.76KB 5.76KB 0B ➖
ButtonGroup 70.18KB 70.18KB 0B ➖
Checkbox 68.39KB 68.39KB 0B ➖
Chips 76.97KB 77KB +33B 🔺
Clickable 6.27KB 6.27KB 0B ➖
ColorPicker 76.06KB 76.14KB +81B 🔺
ColorPickerContent 75.37KB 75.4KB +29B 🔺
Combobox 85.8KB 85.8KB 0B ➖
Counter 42.38KB 42.38KB 0B ➖
DatePicker 134.45KB 134.45KB 0B ➖
Dialog 54.06KB 54.06KB 0B ➖
DialogContentContainer 6.31KB 6.31KB 0B ➖
Divider 5.53KB 5.53KB 0B ➖
Dropdown 125.3KB 125.54KB +246B 🔺
menu 59.97KB 59.97KB 0B ➖
option 93.05KB 93.16KB +112B 🔺
singleValue 93.1KB 93.2KB +110B 🔺
EditableHeading 68.1KB 68.1KB 0B ➖
EditableText 68KB 68KB 0B ➖
EmptyState 72.64KB 72.64KB 0B ➖
ExpandCollapse 68.05KB 68.05KB 0B ➖
Flex 7.46KB 7.46KB 0B ➖
FormattedNumber 5.86KB 5.86KB 0B ➖
GridKeyboardNavigationContext 4.65KB 4.65KB 0B ➖
Heading 66.81KB 66.81KB 0B ➖
HiddenText 5.45KB 5.45KB 0B ➖
IconButton 69.93KB 69.93KB 0B ➖
Info 74.15KB 74.15KB 0B ➖
Label 70.35KB 70.31KB -38B 🟢
LayerProvider 2.95KB 2.95KB 0B ➖
LegacyModal 76.68KB 76.68KB 0B ➖
LegacyModalContent 66.89KB 66.89KB 0B ➖
LegacyModalFooter 3.45KB 3.45KB 0B ➖
LegacyModalFooterButtons 20.7KB 20.7KB 0B ➖
LegacyModalHeader 72.76KB 72.76KB 0B ➖
Link 15.18KB 15.18KB 0B ➖
List 74.72KB 74.72KB 0B ➖
ListItem 67.32KB 67.32KB 0B ➖
ListItemAvatar 68.49KB 68.5KB +14B 🔺
ListItemIcon 14.17KB 14.17KB 0B ➖
ListTitle 66.92KB 66.92KB 0B ➖
Menu 8.69KB 8.69KB 0B ➖
MenuDivider 5.66KB 5.66KB 0B ➖
MenuGridItem 7.22KB 7.22KB 0B ➖
MenuItem 78.91KB 78.99KB +78B 🔺
MenuItemButton 71.96KB 71.96KB 0B ➖
MenuTitle 67.08KB 67.08KB 0B ➖
MenuButton 67.66KB 67.66KB 0B ➖
MultiStepIndicator 53.25KB 53.25KB 0B ➖
NumberField 74.86KB 74.86KB 0B ➖
LinearProgressBar 7.45KB 7.45KB 0B ➖
RadioButton 67.63KB 67.63KB 0B ➖
Search 72.4KB 72.4KB 0B ➖
Skeleton 6.17KB 6.17KB 0B ➖
Slider 75.81KB 75.81KB 0B ➖
SplitButton 68.58KB 68.58KB 0B ➖
SplitButtonMenu 8.8KB 8.8KB 0B ➖
Steps 73.4KB 73.4KB 0B ➖
Table 7.29KB 7.29KB 0B ➖
TableBody 68.68KB 68.68KB 0B ➖
TableCell 66.84KB 66.84KB 0B ➖
TableContainer 5.37KB 5.37KB 0B ➖
TableHeader 5.68KB 5.68KB 0B ➖
TableHeaderCell 74.06KB 74.06KB 0B ➖
TableRow 5.58KB 5.58KB 0B ➖
TableRowMenu 70.37KB 70.37KB 0B ➖
TableVirtualizedBody 73.19KB 73.19KB 0B ➖
Tab 65.49KB 65.49KB 0B ➖
TabList 8.93KB 8.93KB 0B ➖
TabPanel 5.34KB 5.34KB 0B ➖
TabPanels 5.92KB 5.92KB 0B ➖
TabsContext 5.54KB 5.54KB 0B ➖
Text 66.66KB 66.66KB 0B ➖
TextArea 68.01KB 68.01KB 0B ➖
TextField 71.29KB 71.29KB 0B ➖
TextWithHighlight 65.86KB 65.86KB 0B ➖
ThemeProvider 4.69KB 4.69KB 0B ➖
Tipseen 73.14KB 73.14KB 0B ➖
TipseenContent 73.6KB 73.6KB 0B ➖
TipseenImage 73.44KB 73.44KB 0B ➖
TipseenMedia 73.32KB 73.32KB 0B ➖
TipseenWizard 75.9KB 75.9KB 0B ➖
Toast 76.11KB 76.11KB 0B ➖
ToastButton 19KB 19KB 0B ➖
ToastLink 15.38KB 15.38KB 0B ➖
Toggle 68.41KB 68.41KB 0B ➖
Tooltip 64.66KB 64.66KB 0B ➖
TransitionView 37.67KB 37.67KB 0B ➖
VirtualizedGrid 12.61KB 12.61KB 0B ➖
VirtualizedList 12.37KB 12.37KB 0B ➖

📊 Summary:

  • Total Base Size: 5.13MB
  • Total PR Size: 5.13MB
  • Total Difference: +674B

@YossiSaadi
Copy link
Contributor Author

YossiSaadi commented Oct 30, 2025

I feel neutral about this
@talkor

LNTM

@YossiSaadi YossiSaadi merged commit b91490f into master Oct 30, 2025
15 checks passed
@YossiSaadi YossiSaadi deleted the feat/yossi/chips-component-update-9857616053 branch October 30, 2025 12:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@talkor talkor talkor approved these changes

Assignees

No one assigned

Labels

Review effort 2/5

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@YossiSaadi @talkor