From 17b2c71daa36017318b63e663c7e832efbbb2169 Mon Sep 17 00:00:00 2001 From: Chaitanya Deorukhkar Date: Wed, 3 Aug 2022 17:12:32 +0530 Subject: [PATCH] fix: button styling for native (#604) --- .changeset/silly-spies-grin.md | 5 + .../Button/BaseButton/BaseButton.tsx | 4 +- .../BaseButton/StyledBaseButton.native.tsx | 5 +- .../BaseButton.native.test.tsx.snap | 247 +++++++++++++----- .../BaseButton.web.test.tsx.snap | 211 ++++++++------- .../__snapshots__/Button.native.test.tsx.snap | 91 +++++-- .../__snapshots__/Button.web.test.tsx.snap | 78 +++--- 7 files changed, 395 insertions(+), 246 deletions(-) create mode 100644 .changeset/silly-spies-grin.md diff --git a/.changeset/silly-spies-grin.md b/.changeset/silly-spies-grin.md new file mode 100644 index 00000000000..215f09c6590 --- /dev/null +++ b/.changeset/silly-spies-grin.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +fix: button styling for native diff --git a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx index e21210432fb..5cded89aa53 100644 --- a/packages/blade/src/components/Button/BaseButton/BaseButton.tsx +++ b/packages/blade/src/components/Button/BaseButton/BaseButton.tsx @@ -144,7 +144,7 @@ const getProps = ({ fontSize: buttonTypographyTokens.fonts.size[size], lineHeight: buttonTypographyTokens.lineHeights[size], minHeight: makeSize(buttonMinHeight[size]), - iconPadding: hasIcon ? `spacing.${textPadding[size]}` : undefined, + iconPadding: hasIcon && children?.trim() ? `spacing.${textPadding[size]}` : undefined, iconColor: getColorToken({ property: 'icon', variant, @@ -354,7 +354,7 @@ const BaseButton = ({ flexDirection="row" alignItems="center" justifyContent="center" - alignSelf="center" + flex={1} isHidden={isLoading} > {Icon && iconPosition == 'left' ? ( diff --git a/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx b/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx index 105e56d6e53..6adb2fd5c6f 100644 --- a/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx +++ b/packages/blade/src/components/Button/BaseButton/StyledBaseButton.native.tsx @@ -8,7 +8,10 @@ import { useTheme } from '~components/BladeProvider'; const StyledPressable = styled(Animated.createAnimatedComponent(Pressable))< Omit ->((props) => getStyledBaseButtonStyles(props)); +>((props) => ({ + ...getStyledBaseButtonStyles(props), + alignSelf: 'center', +})); const StyledBaseButton = ({ onClick, diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap index 398f3c4fc9e..1282e7b43af 100644 --- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap +++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.native.test.tsx.snap @@ -43,6 +43,7 @@ exports[` should render button with default properties 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(213, 89%, 56%, 1)", "borderColor": "hsla(213, 89%, 56%, 1)", "borderRadius": 2, @@ -65,8 +66,8 @@ exports[` should render button with default properties 1`] = ` > should render button with default properties 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -164,6 +167,7 @@ exports[` should render button with full width 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(213, 89%, 56%, 1)", "borderColor": "hsla(213, 89%, 56%, 1)", "borderRadius": 2, @@ -186,8 +190,8 @@ exports[` should render button with full width 1`] = ` > should render button with full width 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -285,6 +291,7 @@ exports[` should render button with icon with default iconPosition style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(213, 89%, 56%, 1)", "borderColor": "hsla(213, 89%, 56%, 1)", "borderRadius": 2, @@ -307,8 +314,8 @@ exports[` should render button with icon with default iconPosition > should render button with icon with default iconPosition Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -474,6 +483,7 @@ exports[` should render button with icon with left iconPosition 1` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(213, 89%, 56%, 1)", "borderColor": "hsla(213, 89%, 56%, 1)", "borderRadius": 2, @@ -496,8 +506,8 @@ exports[` should render button with icon with left iconPosition 1` > should render button with icon with left iconPosition 1` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -663,6 +675,7 @@ exports[` should render button with icon with right iconPosition 1 style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(213, 89%, 56%, 1)", "borderColor": "hsla(213, 89%, 56%, 1)", "borderRadius": 2, @@ -685,8 +698,8 @@ exports[` should render button with icon with right iconPosition 1 > should render button with icon with right iconPosition 1 Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -846,6 +861,7 @@ exports[` should render button with icon without text 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(213, 89%, 56%, 1)", "borderColor": "hsla(213, 89%, 56%, 1)", "borderRadius": 2, @@ -868,8 +884,8 @@ exports[` should render button with icon without text 1`] = ` > should render button with icon without text 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -890,14 +908,12 @@ exports[` should render button with icon without text 1`] = ` alignItems="center" display="flex" justifyContent="center" - paddingRight="spacing.2" style={ Array [ Object { "alignItems": "center", "display": "flex", "justifyContent": "center", - "paddingRight": 8, }, ] } @@ -1001,6 +1017,7 @@ exports[` should render disabled button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(216, 19%, 89%, 1)", "borderColor": "hsla(216, 19%, 89%, 1)", "borderRadius": 2, @@ -1023,8 +1040,8 @@ exports[` should render disabled button 1`] = ` > should render disabled button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -1122,6 +1141,7 @@ exports[` should render disabled information intent high contrast style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(193, 100%, 35%, 1)", "borderColor": "hsla(187, 68%, 52%, 1)", "borderRadius": 2, @@ -1144,8 +1164,8 @@ exports[` should render disabled information intent high contrast > should render disabled information intent high contrast Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -1243,6 +1265,7 @@ exports[` should render disabled information intent low contrast b style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(193, 100%, 35%, 0.09)", "borderColor": "hsla(193, 100%, 35%, 0.32)", "borderRadius": 2, @@ -1265,8 +1288,8 @@ exports[` should render disabled information intent low contrast b > should render disabled information intent low contrast b Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -1364,6 +1389,7 @@ exports[` should render disabled negative intent high contrast but style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(8, 73%, 47%, 1)", "borderColor": "hsla(8, 99%, 65%, 1)", "borderRadius": 2, @@ -1386,8 +1412,8 @@ exports[` should render disabled negative intent high contrast but > should render disabled negative intent high contrast but Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -1485,6 +1513,7 @@ exports[` should render disabled negative intent low contrast butt style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(9, 91%, 56%, 0.09)", "borderColor": "hsla(9, 91%, 56%, 0.32)", "borderRadius": 2, @@ -1507,8 +1536,8 @@ exports[` should render disabled negative intent low contrast butt > should render disabled negative intent low contrast butt Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -1606,6 +1637,7 @@ exports[` should render disabled neutral intent high contrast butt style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(216, 33%, 29%, 1)", "borderColor": "hsla(216, 15%, 54%, 1)", "borderRadius": 2, @@ -1628,8 +1660,8 @@ exports[` should render disabled neutral intent high contrast butt > should render disabled neutral intent high contrast butt Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -1727,6 +1761,7 @@ exports[` should render disabled neutral intent low contrast butto style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(216, 44%, 23%, 0.09)", "borderColor": "hsla(216, 44%, 23%, 0.32)", "borderRadius": 2, @@ -1749,8 +1784,8 @@ exports[` should render disabled neutral intent low contrast butto > should render disabled neutral intent low contrast butto Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -1848,6 +1885,7 @@ exports[` should render disabled notice intent high contrast butto style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(38, 97%, 38%, 1)", "borderColor": "hsla(35, 84%, 54%, 1)", "borderRadius": 2, @@ -1870,8 +1908,8 @@ exports[` should render disabled notice intent high contrast butto > should render disabled notice intent high contrast butto Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -1969,6 +2009,7 @@ exports[` should render disabled notice intent low contrast button style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(36, 100%, 44%, 0.09)", "borderColor": "hsla(36, 100%, 44%, 0.32)", "borderRadius": 2, @@ -1991,8 +2032,8 @@ exports[` should render disabled notice intent low contrast button > should render disabled notice intent low contrast button Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -2090,6 +2133,7 @@ exports[` should render disabled positive intent high contrast but style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(160, 100%, 26%, 1)", "borderColor": "hsla(149, 99%, 35%, 1)", "borderRadius": 2, @@ -2112,8 +2156,8 @@ exports[` should render disabled positive intent high contrast but > should render disabled positive intent high contrast but Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -2211,6 +2257,7 @@ exports[` should render disabled positive intent low contrast butt style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(155, 100%, 31%, 0.09)", "borderColor": "hsla(155, 100%, 31%, 0.32)", "borderRadius": 2, @@ -2233,8 +2280,8 @@ exports[` should render disabled positive intent low contrast butt > should render disabled positive intent low contrast butt Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -2332,6 +2381,7 @@ exports[` should render disabled secondary variant button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(216, 44%, 23%, 0)", "borderColor": "hsla(218, 19%, 81%, 1)", "borderRadius": 2, @@ -2354,8 +2404,8 @@ exports[` should render disabled secondary variant button 1`] = ` > should render disabled secondary variant button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -2453,6 +2505,7 @@ exports[` should render disabled tertiary variant button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", "borderColor": "hsla(216, 19%, 89%, 1)", "borderRadius": 2, @@ -2475,8 +2528,8 @@ exports[` should render disabled tertiary variant button 1`] = ` > should render disabled tertiary variant button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -2574,6 +2629,7 @@ exports[` should render information intent high contrast button 1` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(193, 100%, 35%, 1)", "borderColor": "hsla(180, 100%, 97%, 1)", "borderRadius": 2, @@ -2596,8 +2652,8 @@ exports[` should render information intent high contrast button 1` > should render information intent high contrast button 1` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -2695,6 +2753,7 @@ exports[` should render information intent low contrast button 1`] style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(193, 100%, 35%, 0.09)", "borderColor": "hsla(193, 100%, 35%, 0.32)", "borderRadius": 2, @@ -2717,8 +2776,8 @@ exports[` should render information intent low contrast button 1`] > should render information intent low contrast button 1`] Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -2816,6 +2877,7 @@ exports[` should render large size button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(213, 89%, 56%, 1)", "borderColor": "hsla(213, 89%, 56%, 1)", "borderRadius": 2, @@ -2838,8 +2900,8 @@ exports[` should render large size button 1`] = ` > should render large size button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -2937,6 +3001,7 @@ exports[` should render medium size button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(213, 89%, 56%, 1)", "borderColor": "hsla(213, 89%, 56%, 1)", "borderRadius": 2, @@ -2959,8 +3024,8 @@ exports[` should render medium size button 1`] = ` > should render medium size button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -3058,6 +3125,7 @@ exports[` should render negative intent high contrast button 1`] = style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(8, 73%, 47%, 1)", "borderColor": "hsla(0, 100%, 97%, 1)", "borderRadius": 2, @@ -3080,8 +3148,8 @@ exports[` should render negative intent high contrast button 1`] = > should render negative intent high contrast button 1`] = Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -3179,6 +3249,7 @@ exports[` should render negative intent low contrast button 1`] = style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(9, 91%, 56%, 0.09)", "borderColor": "hsla(9, 91%, 56%, 0.32)", "borderRadius": 2, @@ -3201,8 +3272,8 @@ exports[` should render negative intent low contrast button 1`] = > should render negative intent low contrast button 1`] = Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -3300,6 +3373,7 @@ exports[` should render neutral intent high contrast button 1`] = style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(216, 33%, 29%, 1)", "borderColor": "hsla(214, 18%, 69%, 1)", "borderRadius": 2, @@ -3322,8 +3396,8 @@ exports[` should render neutral intent high contrast button 1`] = > should render neutral intent high contrast button 1`] = Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -3421,6 +3497,7 @@ exports[` should render neutral intent low contrast button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(216, 44%, 23%, 0.09)", "borderColor": "hsla(216, 44%, 23%, 0.32)", "borderRadius": 2, @@ -3443,8 +3520,8 @@ exports[` should render neutral intent low contrast button 1`] = ` > should render neutral intent low contrast button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -3542,6 +3621,7 @@ exports[` should render notice intent high contrast button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(38, 97%, 38%, 1)", "borderColor": "hsla(32, 100%, 94%, 1)", "borderRadius": 2, @@ -3564,8 +3644,8 @@ exports[` should render notice intent high contrast button 1`] = ` > should render notice intent high contrast button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -3663,6 +3745,7 @@ exports[` should render notice intent low contrast button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(36, 100%, 44%, 0.09)", "borderColor": "hsla(36, 100%, 44%, 0.32)", "borderRadius": 2, @@ -3685,8 +3768,8 @@ exports[` should render notice intent low contrast button 1`] = ` > should render notice intent low contrast button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -3784,6 +3869,7 @@ exports[` should render positive intent high contrast button 1`] = style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(160, 100%, 26%, 1)", "borderColor": "hsla(107, 100%, 96%, 1)", "borderRadius": 2, @@ -3806,8 +3892,8 @@ exports[` should render positive intent high contrast button 1`] = > should render positive intent high contrast button 1`] = Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -3905,6 +3993,7 @@ exports[` should render positive intent low contrast button 1`] = style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(155, 100%, 31%, 0.09)", "borderColor": "hsla(155, 100%, 31%, 0.32)", "borderRadius": 2, @@ -3927,8 +4016,8 @@ exports[` should render positive intent low contrast button 1`] = > should render positive intent low contrast button 1`] = Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -4026,6 +4117,7 @@ exports[` should render secondary variant button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(218, 89%, 51%, 0)", "borderColor": "hsla(213, 89%, 56%, 1)", "borderRadius": 2, @@ -4048,8 +4140,8 @@ exports[` should render secondary variant button 1`] = ` > should render secondary variant button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -4147,6 +4241,7 @@ exports[` should render small size button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(213, 89%, 56%, 1)", "borderColor": "hsla(213, 89%, 56%, 1)", "borderRadius": 2, @@ -4169,8 +4264,8 @@ exports[` should render small size button 1`] = ` > should render small size button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -4268,6 +4365,7 @@ exports[` should render tertiary variant button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(0, 0%, 100%, 1)", "borderColor": "hsla(216, 19%, 89%, 1)", "borderRadius": 2, @@ -4290,8 +4388,8 @@ exports[` should render tertiary variant button 1`] = ` > should render tertiary variant button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, @@ -4389,6 +4489,7 @@ exports[` should render xsmall size button 1`] = ` style={ Array [ Object { + "alignSelf": "center", "backgroundColor": "hsla(213, 89%, 56%, 1)", "borderColor": "hsla(213, 89%, 56%, 1)", "borderRadius": 2, @@ -4411,8 +4512,8 @@ exports[` should render xsmall size button 1`] = ` > should render xsmall size button 1`] = ` Array [ Object { "alignItems": "center", - "alignSelf": "center", "display": "flex", + "flexBasis": 0, "flexDirection": "row", + "flexGrow": 1, + "flexShrink": 1, "justifyContent": "center", "opacity": 1, }, diff --git a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap index 4ff57ecd080..f93975b9491 100644 --- a/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap +++ b/packages/blade/src/components/Button/BaseButton/__tests__/__snapshots__/BaseButton.web.test.tsx.snap @@ -67,6 +67,9 @@ exports[` should render button with default properties 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -78,9 +81,6 @@ exports[` should render button with default properties 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -179,6 +179,9 @@ exports[` should render button with full width 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -190,9 +193,6 @@ exports[` should render button with full width 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -291,6 +291,9 @@ exports[` should render button with icon with default iconPosition display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -302,9 +305,6 @@ exports[` should render button with icon with default iconPosition -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c3 { @@ -438,6 +438,9 @@ exports[` should render button with icon with left iconPosition 1` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -449,9 +452,6 @@ exports[` should render button with icon with left iconPosition 1` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c3 { @@ -585,6 +585,9 @@ exports[` should render button with icon with right iconPosition 1 display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -596,9 +599,6 @@ exports[` should render button with icon with right iconPosition 1 -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c4 { @@ -705,6 +705,9 @@ exports[` should render button with icon without text 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -716,9 +719,6 @@ exports[` should render button with icon without text 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c3 { @@ -734,7 +734,6 @@ exports[` should render button with icon without text 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - padding-right: 8px; } .c2 { @@ -842,6 +841,9 @@ exports[` should render disabled button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -853,9 +855,6 @@ exports[` should render disabled button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -955,6 +954,9 @@ exports[` should render disabled information intent high contrast display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -966,9 +968,6 @@ exports[` should render disabled information intent high contrast -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -1068,6 +1067,9 @@ exports[` should render disabled information intent low contrast b display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1079,9 +1081,6 @@ exports[` should render disabled information intent low contrast b -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -1181,6 +1180,9 @@ exports[` should render disabled negative intent high contrast but display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1192,9 +1194,6 @@ exports[` should render disabled negative intent high contrast but -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -1294,6 +1293,9 @@ exports[` should render disabled negative intent low contrast butt display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1305,9 +1307,6 @@ exports[` should render disabled negative intent low contrast butt -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -1407,6 +1406,9 @@ exports[` should render disabled neutral intent high contrast butt display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1418,9 +1420,6 @@ exports[` should render disabled neutral intent high contrast butt -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -1520,6 +1519,9 @@ exports[` should render disabled neutral intent low contrast butto display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1531,9 +1533,6 @@ exports[` should render disabled neutral intent low contrast butto -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -1633,6 +1632,9 @@ exports[` should render disabled notice intent high contrast butto display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1644,9 +1646,6 @@ exports[` should render disabled notice intent high contrast butto -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -1746,6 +1745,9 @@ exports[` should render disabled notice intent low contrast button display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1757,9 +1759,6 @@ exports[` should render disabled notice intent low contrast button -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -1859,6 +1858,9 @@ exports[` should render disabled positive intent high contrast but display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1870,9 +1872,6 @@ exports[` should render disabled positive intent high contrast but -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -1972,6 +1971,9 @@ exports[` should render disabled positive intent low contrast butt display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -1983,9 +1985,6 @@ exports[` should render disabled positive intent low contrast butt -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -2085,6 +2084,9 @@ exports[` should render disabled secondary variant button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -2096,9 +2098,6 @@ exports[` should render disabled secondary variant button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -2198,6 +2197,9 @@ exports[` should render disabled tertiary variant button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -2209,9 +2211,6 @@ exports[` should render disabled tertiary variant button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -2311,6 +2310,9 @@ exports[` should render information intent high contrast button 1` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -2322,9 +2324,6 @@ exports[` should render information intent high contrast button 1` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -2423,6 +2422,9 @@ exports[` should render information intent low contrast button 1`] display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -2434,9 +2436,6 @@ exports[` should render information intent low contrast button 1`] -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -2535,6 +2534,9 @@ exports[` should render large size button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -2546,9 +2548,6 @@ exports[` should render large size button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -2647,6 +2646,9 @@ exports[` should render medium size button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -2658,9 +2660,6 @@ exports[` should render medium size button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -2759,6 +2758,9 @@ exports[` should render negative intent high contrast button 1`] = display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -2770,9 +2772,6 @@ exports[` should render negative intent high contrast button 1`] = -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -2871,6 +2870,9 @@ exports[` should render negative intent low contrast button 1`] = display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -2882,9 +2884,6 @@ exports[` should render negative intent low contrast button 1`] = -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -2983,6 +2982,9 @@ exports[` should render neutral intent high contrast button 1`] = display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -2994,9 +2996,6 @@ exports[` should render neutral intent high contrast button 1`] = -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -3095,6 +3094,9 @@ exports[` should render neutral intent low contrast button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -3106,9 +3108,6 @@ exports[` should render neutral intent low contrast button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -3207,6 +3206,9 @@ exports[` should render notice intent high contrast button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -3218,9 +3220,6 @@ exports[` should render notice intent high contrast button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -3319,6 +3318,9 @@ exports[` should render notice intent low contrast button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -3330,9 +3332,6 @@ exports[` should render notice intent low contrast button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -3431,6 +3430,9 @@ exports[` should render positive intent high contrast button 1`] = display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -3442,9 +3444,6 @@ exports[` should render positive intent high contrast button 1`] = -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -3543,6 +3542,9 @@ exports[` should render positive intent low contrast button 1`] = display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -3554,9 +3556,6 @@ exports[` should render positive intent low contrast button 1`] = -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -3655,6 +3654,9 @@ exports[` should render secondary variant button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -3666,9 +3668,6 @@ exports[` should render secondary variant button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -3767,6 +3766,9 @@ exports[` should render small size button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -3778,9 +3780,6 @@ exports[` should render small size button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -3879,6 +3878,9 @@ exports[` should render tertiary variant button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -3890,9 +3892,6 @@ exports[` should render tertiary variant button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { @@ -3991,6 +3990,9 @@ exports[` should render xsmall size button 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; @@ -4002,9 +4004,6 @@ exports[` should render xsmall size button 1`] = ` -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } .c2 { diff --git a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap index c59f3a0fa84..375e976e0fa 100644 --- a/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap +++ b/packages/blade/src/components/Button/Button/__tests__/__snapshots__/Button.native.test.tsx.snap @@ -43,6 +43,7 @@ exports[`