From 6e2ee5aad115f84b359f38fe1a1da9eee2e5a8b1 Mon Sep 17 00:00:00 2001 From: Matheus Henrique Date: Tue, 20 Feb 2024 13:09:57 -0300 Subject: [PATCH 1/8] style(chips): adjust chips styles --- packages/yoga/src/Chips/native/Chips.jsx | 35 ++++++++++++------- packages/yoga/src/Chips/web/Chips.jsx | 33 ++++++++++++++---- yarn.lock | 44 +++++------------------- 3 files changed, 57 insertions(+), 55 deletions(-) diff --git a/packages/yoga/src/Chips/native/Chips.jsx b/packages/yoga/src/Chips/native/Chips.jsx index dbb4f7416e..b5f5c739fa 100644 --- a/packages/yoga/src/Chips/native/Chips.jsx +++ b/packages/yoga/src/Chips/native/Chips.jsx @@ -2,13 +2,20 @@ import React from 'react'; import { number, arrayOf, bool, func, node } from 'prop-types'; import styled, { css, withTheme } from 'styled-components'; import { TouchableWithoutFeedback } from 'react-native'; +import { hexToRgb } from '@gympass/yoga-common'; import Counter from './Counter'; import { theme } from '../../Theme'; import Text from '../../Text'; import Icon from '../../Icon'; -const Wrapper = styled.View` +const BORDER_OPACITY = 0.4; + +const Wrapper = styled.View.attrs(({ theme: { yoga } }) => { + return { + borderColor: hexToRgb(yoga.colors.secondary, BORDER_OPACITY), + }; +})` height: 32px; max-width: 216px; @@ -17,10 +24,9 @@ const Wrapper = styled.View` justify-content: flex-start; margin-right: ${theme.spacing.xxsmall}px; - padding: ${theme.spacing.xxsmall}px; + padding: ${theme.spacing.xxsmall}px ${theme.spacing.xsmall}px; border-style: solid; - border-color: ${theme.colors.elements.lineAndBorders}; border-radius: ${theme.radii.circle}px; border-width: ${theme.borders.small}px; @@ -32,9 +38,7 @@ const Wrapper = styled.View` disabled ? css` background-color: ${theme.colors.elements.backgroundAndDisabled}; - color: ${theme.colors.elements.selectionAndIcons}; - - border-color: ${theme.colors.elements.lineAndBorders}; + border-color: ${theme.colors.elements.backgroundAndDisabled}; ` : ''} @@ -42,17 +46,23 @@ const Wrapper = styled.View` selected ? css` background-color: ${theme.colors.secondary}; - border-color: transparent; ` : ''} `; const StyledChips = styled(Text)` font-size: ${theme.fontSizes.xsmall}px; - line-height: ${theme.lineHeights.xxsmall}px; + line-height: ${theme.lineHeights.xxxsmall}px; flex-shrink: 1; + ${({ disabled }) => + disabled + ? css` + color: ${theme.colors.text.disabled}; + ` + : ''} + ${({ selected }) => selected ? css` @@ -72,7 +82,7 @@ const Chips = React.forwardRef( onToggle, onPress = onToggle, theme: { - yoga: { spacing }, + yoga: { spacing, colors }, }, ...props }, @@ -91,7 +101,7 @@ const Chips = React.forwardRef( {SecondIcon && ( )} @@ -110,7 +121,7 @@ const Chips = React.forwardRef( {FirstIcon && ( Date: Tue, 20 Feb 2024 13:14:51 -0300 Subject: [PATCH 2/8] test(chips): update snapshots --- .../native/__snapshots__/Chips.test.jsx.snap | 219 ++++++++++-------- .../web/__snapshots__/Chips.test.jsx.snap | 208 ++++++++++++----- 2 files changed, 271 insertions(+), 156 deletions(-) diff --git a/packages/yoga/src/Chips/native/__snapshots__/Chips.test.jsx.snap b/packages/yoga/src/Chips/native/__snapshots__/Chips.test.jsx.snap index 564d7b2d07..cda0a772f8 100644 --- a/packages/yoga/src/Chips/native/__snapshots__/Chips.test.jsx.snap +++ b/packages/yoga/src/Chips/native/__snapshots__/Chips.test.jsx.snap @@ -13,6 +13,7 @@ exports[` Snapshots counter should match snapshot 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -28,7 +29,6 @@ exports[` Snapshots counter should match snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -39,14 +39,15 @@ exports[` Snapshots counter should match snapshot 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots counter should match snapshot 1`] = ` { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -88,6 +89,7 @@ exports[` Snapshots counter should match snapshot with more than one Ch } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -103,7 +105,6 @@ exports[` Snapshots counter should match snapshot with more than one Ch { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -114,14 +115,15 @@ exports[` Snapshots counter should match snapshot with more than one Ch "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots counter should match snapshot with more than one Ch { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -159,6 +161,7 @@ exports[` Snapshots counter should match snapshot with more than one Ch } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -174,7 +177,6 @@ exports[` Snapshots counter should match snapshot with more than one Ch { "alignItems": "center", "backgroundColor": "#231B22", - "borderColor": "transparent", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -185,14 +187,15 @@ exports[` Snapshots counter should match snapshot with more than one Ch "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots counter should match snapshot with more than one Ch "color": "#231B22", "fontFamily": "Rubik", "fontSize": 16, - "fontWeight": "500", + "fontWeight": "700", }, { "color": "#FFFFFF", "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -254,6 +257,7 @@ exports[` Snapshots counter should match snapshot with more than one Ch } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -269,7 +273,6 @@ exports[` Snapshots counter should match snapshot with more than one Ch { "alignItems": "center", "backgroundColor": "#231B22", - "borderColor": "transparent", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -280,14 +283,15 @@ exports[` Snapshots counter should match snapshot with more than one Ch "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots counter should match snapshot with more than one Ch "color": "#231B22", "fontFamily": "Rubik", "fontSize": 16, - "fontWeight": "500", + "fontWeight": "700", }, { "color": "#FFFFFF", "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -354,6 +358,7 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -369,7 +374,6 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -380,14 +384,15 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots icon should match selected snapshot 1`] = ` { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -425,6 +430,7 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -440,7 +446,6 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -451,14 +456,15 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots icon should match selected snapshot 1`] = ` { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -496,6 +502,7 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -511,7 +518,6 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -522,14 +528,15 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots icon should match selected snapshot 1`] = ` { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -567,6 +574,7 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -582,7 +590,6 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -593,14 +600,15 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots icon should match selected snapshot 1`] = ` { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -638,6 +646,7 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -653,7 +662,6 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "#231B22", - "borderColor": "transparent", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -664,14 +672,15 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots icon should match selected snapshot 1`] = ` "color": "#231B22", "fontFamily": "Rubik", "fontSize": 16, - "fontWeight": "500", + "fontWeight": "700", }, { "color": "#FFFFFF", "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -733,6 +742,7 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -748,7 +758,6 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "#231B22", - "borderColor": "transparent", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -759,14 +768,15 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots icon should match selected snapshot 1`] = ` "color": "#231B22", "fontFamily": "Rubik", "fontSize": 16, - "fontWeight": "500", + "fontWeight": "700", }, { "color": "#FFFFFF", "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -828,6 +838,7 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -843,7 +854,6 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "#231B22", - "borderColor": "transparent", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -854,14 +864,15 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots icon should match selected snapshot 1`] = ` "color": "#231B22", "fontFamily": "Rubik", "fontSize": 16, - "fontWeight": "500", + "fontWeight": "700", }, { "color": "#FFFFFF", "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -896,6 +907,7 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -911,7 +923,6 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "#231B22", - "borderColor": "transparent", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -922,14 +933,15 @@ exports[` Snapshots icon should match selected snapshot 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots icon should match selected snapshot 1`] = ` "color": "#231B22", "fontFamily": "Rubik", "fontSize": 16, - "fontWeight": "500", + "fontWeight": "700", }, { "color": "#FFFFFF", "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -968,6 +980,7 @@ exports[` Snapshots selected should match snapshot 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -983,7 +996,6 @@ exports[` Snapshots selected should match snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "#231B22", - "borderColor": "transparent", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -994,14 +1006,15 @@ exports[` Snapshots selected should match snapshot 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots selected should match snapshot 1`] = ` "color": "#231B22", "fontFamily": "Rubik", "fontSize": 16, - "fontWeight": "500", + "fontWeight": "700", }, { "color": "#FFFFFF", "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -1040,6 +1053,7 @@ exports[` Snapshots selected should match snapshot with more than one C } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -1055,7 +1069,6 @@ exports[` Snapshots selected should match snapshot with more than one C { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -1066,14 +1079,15 @@ exports[` Snapshots selected should match snapshot with more than one C "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots selected should match snapshot with more than one C { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -1111,6 +1125,7 @@ exports[` Snapshots selected should match snapshot with more than one C } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -1126,7 +1141,6 @@ exports[` Snapshots selected should match snapshot with more than one C { "alignItems": "center", "backgroundColor": "#231B22", - "borderColor": "transparent", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -1137,14 +1151,15 @@ exports[` Snapshots selected should match snapshot with more than one C "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots selected should match snapshot with more than one C "color": "#231B22", "fontFamily": "Rubik", "fontSize": 16, - "fontWeight": "500", + "fontWeight": "700", }, { "color": "#FFFFFF", "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -1179,6 +1194,7 @@ exports[` Snapshots selected should match snapshot with more than one C } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -1194,7 +1210,6 @@ exports[` Snapshots selected should match snapshot with more than one C { "alignItems": "center", "backgroundColor": "#231B22", - "borderColor": "transparent", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -1205,14 +1220,15 @@ exports[` Snapshots selected should match snapshot with more than one C "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots selected should match snapshot with more than one C "color": "#231B22", "fontFamily": "Rubik", "fontSize": 16, - "fontWeight": "500", + "fontWeight": "700", }, { "color": "#FFFFFF", "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -1251,6 +1267,7 @@ exports[` Snapshots should match snapshot 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -1266,7 +1283,6 @@ exports[` Snapshots should match snapshot 1`] = ` { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -1277,14 +1293,15 @@ exports[` Snapshots should match snapshot 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots should match snapshot 1`] = ` { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -1325,6 +1342,7 @@ exports[` Snapshots should match snapshot with a long text 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -1340,7 +1358,6 @@ exports[` Snapshots should match snapshot with a long text 1`] = ` { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -1351,14 +1368,15 @@ exports[` Snapshots should match snapshot with a long text 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots should match snapshot with a long text 1`] = ` { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -1399,6 +1417,7 @@ exports[` Snapshots should match snapshot with disabled prop 1`] = ` } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={true} focusable={false} onClick={[Function]} @@ -1414,11 +1433,10 @@ exports[` Snapshots should match snapshot with disabled prop 1`] = ` { "alignItems": "center", "backgroundColor": "#F5F5FA", - "borderColor": "#D7D7E0", + "borderColor": "#F5F5FA", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, - "color": "#9898A6", "flexDirection": "row", "height": 32, "justifyContent": "flex-start", @@ -1426,14 +1444,15 @@ exports[` Snapshots should match snapshot with disabled prop 1`] = ` "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots should match snapshot with disabled prop 1`] = ` "lineHeight": 24, }, { + "color": "#D7D7E0", "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -1475,6 +1495,7 @@ exports[` Snapshots should match snapshot with more than one Chip 1`] = } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -1490,7 +1511,6 @@ exports[` Snapshots should match snapshot with more than one Chip 1`] = { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -1501,14 +1521,15 @@ exports[` Snapshots should match snapshot with more than one Chip 1`] = "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots should match snapshot with more than one Chip 1`] = { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -1546,6 +1567,7 @@ exports[` Snapshots should match snapshot with more than one Chip 1`] = } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -1561,7 +1583,6 @@ exports[` Snapshots should match snapshot with more than one Chip 1`] = { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -1572,14 +1593,15 @@ exports[` Snapshots should match snapshot with more than one Chip 1`] = "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots should match snapshot with more than one Chip 1`] = { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } @@ -1617,6 +1639,7 @@ exports[` Snapshots should match snapshot with more than one Chip 1`] = } } accessible={true} + borderColor="rgba(35, 27, 34, 0.4)" disabled={false} focusable={false} onClick={[Function]} @@ -1632,7 +1655,6 @@ exports[` Snapshots should match snapshot with more than one Chip 1`] = { "alignItems": "center", "backgroundColor": "#FFFFFF", - "borderColor": "#D7D7E0", "borderRadius": 9999, "borderStyle": "solid", "borderWidth": 1, @@ -1643,14 +1665,15 @@ exports[` Snapshots should match snapshot with more than one Chip 1`] = "maxWidth": 216, "overflow": "hidden", "paddingBottom": 8, - "paddingLeft": 8, - "paddingRight": 8, + "paddingLeft": 12, + "paddingRight": 12, "paddingTop": 8, }, ] } > Snapshots should match snapshot with more than one Chip 1`] = { "flexShrink": 1, "fontSize": 12, - "lineHeight": 12, + "lineHeight": "px", }, ] } diff --git a/packages/yoga/src/Chips/web/__snapshots__/Chips.test.jsx.snap b/packages/yoga/src/Chips/web/__snapshots__/Chips.test.jsx.snap index 305cdc90e6..54ac03faba 100644 --- a/packages/yoga/src/Chips/web/__snapshots__/Chips.test.jsx.snap +++ b/packages/yoga/src/Chips/web/__snapshots__/Chips.test.jsx.snap @@ -23,13 +23,13 @@ exports[` Snapshots counter should match snapshot 1`] = ` box-sizing: border-box; border-style: solid; cursor: pointer; - padding: 8px; + padding: 8px 12px; border-radius: 9999px; border-width: 1px; font-family: Rubik; font-size: 12px; line-height: 16px; - border-color: #D7D7E0; + border-color: rgba(35,27,34,0.4); background-color: #FFFFFF; color: #231B22; font-weight: 400; @@ -41,11 +41,15 @@ exports[` Snapshots counter should match snapshot 1`] = ` .c0[disabled] { background-color: #F5F5FA; - color: #9898A6; - border-color: #D7D7E0; + color: #D7D7E0; + border-color: #F5F5FA; cursor: not-allowed; } +.c0[disabled] svg { + fill: #D7D7E0; +} + .c0 svg { -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -56,9 +60,13 @@ exports[` Snapshots counter should match snapshot 1`] = ` border-color: #231B22; } -.c0:focus:enabled, .c0:active:enabled { - border-color: rgba(215,215,224,0.75); + border-color: rgba(35,27,34,0.6); + color: rgba(35,27,34,0.6); +} + +.c0:active:enabled svg { + fill: rgba(35,27,34,0.6); }
@@ -127,13 +135,13 @@ exports[` Snapshots counter should match snapshot with more than one Ch box-sizing: border-box; border-style: solid; cursor: pointer; - padding: 8px; + padding: 8px 12px; border-radius: 9999px; border-width: 1px; font-family: Rubik; font-size: 12px; line-height: 16px; - border-color: #D7D7E0; + border-color: rgba(35,27,34,0.4); background-color: #FFFFFF; color: #231B22; font-weight: 400; @@ -145,11 +153,15 @@ exports[` Snapshots counter should match snapshot with more than one Ch .c0[disabled] { background-color: #F5F5FA; - color: #9898A6; - border-color: #D7D7E0; + color: #D7D7E0; + border-color: #F5F5FA; cursor: not-allowed; } +.c0[disabled] svg { + fill: #D7D7E0; +} + .c0 svg { -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -160,9 +172,13 @@ exports[` Snapshots counter should match snapshot with more than one Ch border-color: #231B22; } -.c0:focus:enabled, .c0:active:enabled { - border-color: rgba(215,215,224,0.75); + border-color: rgba(35,27,34,0.6); + color: rgba(35,27,34,0.6); +} + +.c0:active:enabled svg { + fill: rgba(35,27,34,0.6); } .c2 { @@ -179,7 +195,7 @@ exports[` Snapshots counter should match snapshot with more than one Ch box-sizing: border-box; border-style: solid; cursor: pointer; - padding: 8px; + padding: 8px 12px; border-radius: 9999px; border-width: 1px; font-family: Rubik; @@ -188,7 +204,7 @@ exports[` Snapshots counter should match snapshot with more than one Ch background-color: #231B22; color: #FFFFFF; border-color: transparent; - font-weight: 500; + font-weight: 700; } .c2:not(:last-child) { @@ -197,11 +213,15 @@ exports[` Snapshots counter should match snapshot with more than one Ch .c2[disabled] { background-color: #F5F5FA; - color: #9898A6; - border-color: #D7D7E0; + color: #D7D7E0; + border-color: #F5F5FA; cursor: not-allowed; } +.c2[disabled] svg { + fill: #D7D7E0; +} + .c2 svg { -webkit-flex-shrink: 0; -ms-flex-negative: 0; @@ -212,6 +232,11 @@ exports[` Snapshots counter should match snapshot with more than one Ch border-color: #231B22; } +.c2:active:enabled { + background-color: rgba(35,27,34,0.6); + border-color: transparent; +} +