@ornikar/bumper 3.7.1 → 3.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/dist/definitions/system/actions/Button/Button.d.ts.map +1 -1
- package/dist/index-metro.es.android.js +1 -2
- package/dist/index-metro.es.android.js.map +1 -1
- package/dist/index-metro.es.ios.js +1 -2
- package/dist/index-metro.es.ios.js.map +1 -1
- package/dist/index-node-22.22.cjs.js +1 -2
- package/dist/index-node-22.22.cjs.js.map +1 -1
- package/dist/index-node-22.22.cjs.web.js +1 -2
- package/dist/index-node-22.22.cjs.web.js.map +1 -1
- package/dist/index-node-22.22.es.mjs +1 -2
- package/dist/index-node-22.22.es.mjs.map +1 -1
- package/dist/index-node-22.22.es.web.mjs +1 -2
- package/dist/index-node-22.22.es.web.mjs.map +1 -1
- package/dist/index.es.js +1 -2
- package/dist/index.es.js.map +1 -1
- package/dist/index.es.web.js +1 -2
- package/dist/index.es.web.js.map +1 -1
- package/dist/tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/system/actions/Button/Button.features.stories.tsx +24 -7
- package/src/system/actions/Button/Button.mdx +1 -1
- package/src/system/actions/Button/Button.tsx +1 -2
- package/src/system/actions/Button/__snapshots__/Button.features.stories.tsx.snap +270 -98
- package/src/system/actions/Button/__snapshots_web__/Button.features.stories.tsx.snap +61 -21
package/package.json
CHANGED
|
@@ -127,13 +127,30 @@ export const Loading: Story = {
|
|
|
127
127
|
|
|
128
128
|
export const Stretch: Story = {
|
|
129
129
|
render: () => (
|
|
130
|
-
<VStack gap="$space.
|
|
131
|
-
<
|
|
132
|
-
<Button
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
<Button
|
|
136
|
-
|
|
130
|
+
<VStack gap="$space.32">
|
|
131
|
+
<VStack gap="$space.16">
|
|
132
|
+
<Button stretch type="primary">
|
|
133
|
+
<Button.Text>Stretched primary</Button.Text>
|
|
134
|
+
</Button>
|
|
135
|
+
<Button stretch type="secondary">
|
|
136
|
+
<Button.Text>Stretched secondary</Button.Text>
|
|
137
|
+
</Button>
|
|
138
|
+
</VStack>
|
|
139
|
+
<VStack
|
|
140
|
+
gap="$space.16"
|
|
141
|
+
height={200}
|
|
142
|
+
borderWidth={1}
|
|
143
|
+
borderColor="$border.base.low"
|
|
144
|
+
borderRadius="$radius.m"
|
|
145
|
+
padding="$space.16"
|
|
146
|
+
>
|
|
147
|
+
<Button stretch type="primary">
|
|
148
|
+
<Button.Text>Stretched primary</Button.Text>
|
|
149
|
+
</Button>
|
|
150
|
+
<Button stretch type="secondary">
|
|
151
|
+
<Button.Text>Stretched secondary</Button.Text>
|
|
152
|
+
</Button>
|
|
153
|
+
</VStack>
|
|
137
154
|
</VStack>
|
|
138
155
|
),
|
|
139
156
|
};
|
|
@@ -51,7 +51,7 @@ Set `isLoading` to replace the button content with a `Loader` spinner. The butto
|
|
|
51
51
|
|
|
52
52
|
## Stretch
|
|
53
53
|
|
|
54
|
-
Set `stretch` to make the button fill the width of its container. The button switches from `align-self: flex-start` to `
|
|
54
|
+
Set `stretch` to make the button fill the width of its container. The button switches from `align-self: flex-start` to `align-self: stretch`.
|
|
55
55
|
|
|
56
56
|
<Canvas of={ButtonFeatures.Stretch} />
|
|
57
57
|
|
|
@@ -1683,7 +1683,7 @@ exports[`Bumper/Actions/Button/Features Responsive 1`] = `
|
|
|
1683
1683
|
style={
|
|
1684
1684
|
{
|
|
1685
1685
|
"alignItems": "center",
|
|
1686
|
-
"alignSelf": "
|
|
1686
|
+
"alignSelf": "stretch",
|
|
1687
1687
|
"backgroundColor": "transparent",
|
|
1688
1688
|
"borderBottomColor": "#563B56",
|
|
1689
1689
|
"borderBottomLeftRadius": 4,
|
|
@@ -1699,7 +1699,6 @@ exports[`Bumper/Actions/Button/Features Responsive 1`] = `
|
|
|
1699
1699
|
"borderTopRightRadius": 4,
|
|
1700
1700
|
"borderTopWidth": 1,
|
|
1701
1701
|
"flexDirection": "row",
|
|
1702
|
-
"flexGrow": 1,
|
|
1703
1702
|
"gap": 8,
|
|
1704
1703
|
"height": 36,
|
|
1705
1704
|
"justifyContent": "center",
|
|
@@ -1754,7 +1753,7 @@ exports[`Bumper/Actions/Button/Features Responsive 1`] = `
|
|
|
1754
1753
|
style={
|
|
1755
1754
|
{
|
|
1756
1755
|
"alignItems": "center",
|
|
1757
|
-
"alignSelf": "
|
|
1756
|
+
"alignSelf": "stretch",
|
|
1758
1757
|
"backgroundColor": "transparent",
|
|
1759
1758
|
"borderBottomColor": "#563B56",
|
|
1760
1759
|
"borderBottomLeftRadius": 4,
|
|
@@ -1770,7 +1769,6 @@ exports[`Bumper/Actions/Button/Features Responsive 1`] = `
|
|
|
1770
1769
|
"borderTopRightRadius": 4,
|
|
1771
1770
|
"borderTopWidth": 1,
|
|
1772
1771
|
"flexDirection": "row",
|
|
1773
|
-
"flexGrow": 1,
|
|
1774
1772
|
"gap": 8,
|
|
1775
1773
|
"height": 36,
|
|
1776
1774
|
"justifyContent": "center",
|
|
@@ -2934,150 +2932,324 @@ exports[`Bumper/Actions/Button/Features Stretch 1`] = `
|
|
|
2934
2932
|
style={
|
|
2935
2933
|
{
|
|
2936
2934
|
"flexDirection": "column",
|
|
2937
|
-
"gap":
|
|
2935
|
+
"gap": 32,
|
|
2938
2936
|
}
|
|
2939
2937
|
}
|
|
2940
2938
|
>
|
|
2941
2939
|
<View
|
|
2942
|
-
focusVisibleStyle={
|
|
2943
|
-
{
|
|
2944
|
-
"outlineColor": "$border.focus",
|
|
2945
|
-
"outlineStyle": "solid",
|
|
2946
|
-
"outlineWidth": 3,
|
|
2947
|
-
}
|
|
2948
|
-
}
|
|
2949
|
-
onBlur={[Function]}
|
|
2950
|
-
onClick={[Function]}
|
|
2951
|
-
onFocus={[Function]}
|
|
2952
|
-
onResponderGrant={[Function]}
|
|
2953
|
-
onResponderMove={[Function]}
|
|
2954
|
-
onResponderRelease={[Function]}
|
|
2955
|
-
onResponderTerminate={[Function]}
|
|
2956
|
-
onResponderTerminationRequest={[Function]}
|
|
2957
|
-
onStartShouldSetResponder={[Function]}
|
|
2958
|
-
role="button"
|
|
2959
2940
|
style={
|
|
2960
2941
|
{
|
|
2961
|
-
"
|
|
2962
|
-
"
|
|
2963
|
-
"backgroundColor": "#563B56",
|
|
2964
|
-
"borderBottomColor": "transparent",
|
|
2965
|
-
"borderBottomLeftRadius": 4,
|
|
2966
|
-
"borderBottomRightRadius": 4,
|
|
2967
|
-
"borderBottomWidth": 1,
|
|
2968
|
-
"borderLeftColor": "transparent",
|
|
2969
|
-
"borderLeftWidth": 1,
|
|
2970
|
-
"borderRightColor": "transparent",
|
|
2971
|
-
"borderRightWidth": 1,
|
|
2972
|
-
"borderStyle": "solid",
|
|
2973
|
-
"borderTopColor": "transparent",
|
|
2974
|
-
"borderTopLeftRadius": 4,
|
|
2975
|
-
"borderTopRightRadius": 4,
|
|
2976
|
-
"borderTopWidth": 1,
|
|
2977
|
-
"flexDirection": "row",
|
|
2978
|
-
"flexGrow": 1,
|
|
2979
|
-
"gap": 8,
|
|
2980
|
-
"height": 48,
|
|
2981
|
-
"justifyContent": "center",
|
|
2982
|
-
"paddingBottom": 14,
|
|
2983
|
-
"paddingLeft": 16,
|
|
2984
|
-
"paddingRight": 16,
|
|
2985
|
-
"paddingTop": 14,
|
|
2942
|
+
"flexDirection": "column",
|
|
2943
|
+
"gap": 16,
|
|
2986
2944
|
}
|
|
2987
2945
|
}
|
|
2988
2946
|
>
|
|
2989
2947
|
<View
|
|
2948
|
+
focusVisibleStyle={
|
|
2949
|
+
{
|
|
2950
|
+
"outlineColor": "$border.focus",
|
|
2951
|
+
"outlineStyle": "solid",
|
|
2952
|
+
"outlineWidth": 3,
|
|
2953
|
+
}
|
|
2954
|
+
}
|
|
2955
|
+
onBlur={[Function]}
|
|
2956
|
+
onClick={[Function]}
|
|
2957
|
+
onFocus={[Function]}
|
|
2958
|
+
onResponderGrant={[Function]}
|
|
2959
|
+
onResponderMove={[Function]}
|
|
2960
|
+
onResponderRelease={[Function]}
|
|
2961
|
+
onResponderTerminate={[Function]}
|
|
2962
|
+
onResponderTerminationRequest={[Function]}
|
|
2963
|
+
onStartShouldSetResponder={[Function]}
|
|
2964
|
+
role="button"
|
|
2990
2965
|
style={
|
|
2991
2966
|
{
|
|
2992
|
-
"
|
|
2967
|
+
"alignItems": "center",
|
|
2968
|
+
"alignSelf": "stretch",
|
|
2969
|
+
"backgroundColor": "#563B56",
|
|
2970
|
+
"borderBottomColor": "transparent",
|
|
2971
|
+
"borderBottomLeftRadius": 4,
|
|
2972
|
+
"borderBottomRightRadius": 4,
|
|
2973
|
+
"borderBottomWidth": 1,
|
|
2974
|
+
"borderLeftColor": "transparent",
|
|
2975
|
+
"borderLeftWidth": 1,
|
|
2976
|
+
"borderRightColor": "transparent",
|
|
2977
|
+
"borderRightWidth": 1,
|
|
2978
|
+
"borderStyle": "solid",
|
|
2979
|
+
"borderTopColor": "transparent",
|
|
2980
|
+
"borderTopLeftRadius": 4,
|
|
2981
|
+
"borderTopRightRadius": 4,
|
|
2982
|
+
"borderTopWidth": 1,
|
|
2983
|
+
"flexDirection": "row",
|
|
2984
|
+
"gap": 8,
|
|
2985
|
+
"height": 48,
|
|
2986
|
+
"justifyContent": "center",
|
|
2987
|
+
"paddingBottom": 14,
|
|
2988
|
+
"paddingLeft": 16,
|
|
2989
|
+
"paddingRight": 16,
|
|
2990
|
+
"paddingTop": 14,
|
|
2993
2991
|
}
|
|
2994
2992
|
}
|
|
2995
2993
|
>
|
|
2996
|
-
<
|
|
2994
|
+
<View
|
|
2997
2995
|
style={
|
|
2998
2996
|
{
|
|
2999
|
-
"
|
|
3000
|
-
"fontFamily": "GTStandardSemibold",
|
|
3001
|
-
"fontSize": 16,
|
|
3002
|
-
"letterSpacing": 0,
|
|
3003
|
-
"lineHeight": 20,
|
|
2997
|
+
"flexDirection": "column",
|
|
3004
2998
|
}
|
|
3005
2999
|
}
|
|
3006
|
-
suppressHighlighting={true}
|
|
3007
3000
|
>
|
|
3008
|
-
|
|
3009
|
-
|
|
3001
|
+
<Text
|
|
3002
|
+
style={
|
|
3003
|
+
{
|
|
3004
|
+
"color": "#ffffff",
|
|
3005
|
+
"fontFamily": "GTStandardSemibold",
|
|
3006
|
+
"fontSize": 16,
|
|
3007
|
+
"letterSpacing": 0,
|
|
3008
|
+
"lineHeight": 20,
|
|
3009
|
+
}
|
|
3010
|
+
}
|
|
3011
|
+
suppressHighlighting={true}
|
|
3012
|
+
>
|
|
3013
|
+
Stretched primary
|
|
3014
|
+
</Text>
|
|
3015
|
+
</View>
|
|
3016
|
+
</View>
|
|
3017
|
+
<View
|
|
3018
|
+
focusVisibleStyle={
|
|
3019
|
+
{
|
|
3020
|
+
"outlineColor": "$border.focus",
|
|
3021
|
+
"outlineStyle": "solid",
|
|
3022
|
+
"outlineWidth": 3,
|
|
3023
|
+
}
|
|
3024
|
+
}
|
|
3025
|
+
onBlur={[Function]}
|
|
3026
|
+
onClick={[Function]}
|
|
3027
|
+
onFocus={[Function]}
|
|
3028
|
+
onResponderGrant={[Function]}
|
|
3029
|
+
onResponderMove={[Function]}
|
|
3030
|
+
onResponderRelease={[Function]}
|
|
3031
|
+
onResponderTerminate={[Function]}
|
|
3032
|
+
onResponderTerminationRequest={[Function]}
|
|
3033
|
+
onStartShouldSetResponder={[Function]}
|
|
3034
|
+
role="button"
|
|
3035
|
+
style={
|
|
3036
|
+
{
|
|
3037
|
+
"alignItems": "center",
|
|
3038
|
+
"alignSelf": "stretch",
|
|
3039
|
+
"backgroundColor": "transparent",
|
|
3040
|
+
"borderBottomColor": "#563B56",
|
|
3041
|
+
"borderBottomLeftRadius": 4,
|
|
3042
|
+
"borderBottomRightRadius": 4,
|
|
3043
|
+
"borderBottomWidth": 1,
|
|
3044
|
+
"borderLeftColor": "#563B56",
|
|
3045
|
+
"borderLeftWidth": 1,
|
|
3046
|
+
"borderRightColor": "#563B56",
|
|
3047
|
+
"borderRightWidth": 1,
|
|
3048
|
+
"borderStyle": "solid",
|
|
3049
|
+
"borderTopColor": "#563B56",
|
|
3050
|
+
"borderTopLeftRadius": 4,
|
|
3051
|
+
"borderTopRightRadius": 4,
|
|
3052
|
+
"borderTopWidth": 1,
|
|
3053
|
+
"flexDirection": "row",
|
|
3054
|
+
"gap": 8,
|
|
3055
|
+
"height": 48,
|
|
3056
|
+
"justifyContent": "center",
|
|
3057
|
+
"paddingBottom": 14,
|
|
3058
|
+
"paddingLeft": 16,
|
|
3059
|
+
"paddingRight": 16,
|
|
3060
|
+
"paddingTop": 14,
|
|
3061
|
+
}
|
|
3062
|
+
}
|
|
3063
|
+
>
|
|
3064
|
+
<View
|
|
3065
|
+
style={
|
|
3066
|
+
{
|
|
3067
|
+
"flexDirection": "column",
|
|
3068
|
+
}
|
|
3069
|
+
}
|
|
3070
|
+
>
|
|
3071
|
+
<Text
|
|
3072
|
+
style={
|
|
3073
|
+
{
|
|
3074
|
+
"color": "#563B56",
|
|
3075
|
+
"fontFamily": "GTStandardSemibold",
|
|
3076
|
+
"fontSize": 16,
|
|
3077
|
+
"letterSpacing": 0,
|
|
3078
|
+
"lineHeight": 20,
|
|
3079
|
+
}
|
|
3080
|
+
}
|
|
3081
|
+
suppressHighlighting={true}
|
|
3082
|
+
>
|
|
3083
|
+
Stretched secondary
|
|
3084
|
+
</Text>
|
|
3085
|
+
</View>
|
|
3010
3086
|
</View>
|
|
3011
3087
|
</View>
|
|
3012
3088
|
<View
|
|
3013
|
-
focusVisibleStyle={
|
|
3014
|
-
{
|
|
3015
|
-
"outlineColor": "$border.focus",
|
|
3016
|
-
"outlineStyle": "solid",
|
|
3017
|
-
"outlineWidth": 3,
|
|
3018
|
-
}
|
|
3019
|
-
}
|
|
3020
|
-
onBlur={[Function]}
|
|
3021
|
-
onClick={[Function]}
|
|
3022
|
-
onFocus={[Function]}
|
|
3023
|
-
onResponderGrant={[Function]}
|
|
3024
|
-
onResponderMove={[Function]}
|
|
3025
|
-
onResponderRelease={[Function]}
|
|
3026
|
-
onResponderTerminate={[Function]}
|
|
3027
|
-
onResponderTerminationRequest={[Function]}
|
|
3028
|
-
onStartShouldSetResponder={[Function]}
|
|
3029
|
-
role="button"
|
|
3030
3089
|
style={
|
|
3031
3090
|
{
|
|
3032
|
-
"
|
|
3033
|
-
"alignSelf": "unset",
|
|
3034
|
-
"backgroundColor": "transparent",
|
|
3035
|
-
"borderBottomColor": "#563B56",
|
|
3091
|
+
"borderBottomColor": "#F1ECE4",
|
|
3036
3092
|
"borderBottomLeftRadius": 4,
|
|
3037
3093
|
"borderBottomRightRadius": 4,
|
|
3038
3094
|
"borderBottomWidth": 1,
|
|
3039
|
-
"borderLeftColor": "#
|
|
3095
|
+
"borderLeftColor": "#F1ECE4",
|
|
3040
3096
|
"borderLeftWidth": 1,
|
|
3041
|
-
"borderRightColor": "#
|
|
3097
|
+
"borderRightColor": "#F1ECE4",
|
|
3042
3098
|
"borderRightWidth": 1,
|
|
3043
3099
|
"borderStyle": "solid",
|
|
3044
|
-
"borderTopColor": "#
|
|
3100
|
+
"borderTopColor": "#F1ECE4",
|
|
3045
3101
|
"borderTopLeftRadius": 4,
|
|
3046
3102
|
"borderTopRightRadius": 4,
|
|
3047
3103
|
"borderTopWidth": 1,
|
|
3048
|
-
"flexDirection": "
|
|
3049
|
-
"
|
|
3050
|
-
"
|
|
3051
|
-
"
|
|
3052
|
-
"justifyContent": "center",
|
|
3053
|
-
"paddingBottom": 14,
|
|
3104
|
+
"flexDirection": "column",
|
|
3105
|
+
"gap": 16,
|
|
3106
|
+
"height": 200,
|
|
3107
|
+
"paddingBottom": 16,
|
|
3054
3108
|
"paddingLeft": 16,
|
|
3055
3109
|
"paddingRight": 16,
|
|
3056
|
-
"paddingTop":
|
|
3110
|
+
"paddingTop": 16,
|
|
3057
3111
|
}
|
|
3058
3112
|
}
|
|
3059
3113
|
>
|
|
3060
3114
|
<View
|
|
3115
|
+
focusVisibleStyle={
|
|
3116
|
+
{
|
|
3117
|
+
"outlineColor": "$border.focus",
|
|
3118
|
+
"outlineStyle": "solid",
|
|
3119
|
+
"outlineWidth": 3,
|
|
3120
|
+
}
|
|
3121
|
+
}
|
|
3122
|
+
onBlur={[Function]}
|
|
3123
|
+
onClick={[Function]}
|
|
3124
|
+
onFocus={[Function]}
|
|
3125
|
+
onResponderGrant={[Function]}
|
|
3126
|
+
onResponderMove={[Function]}
|
|
3127
|
+
onResponderRelease={[Function]}
|
|
3128
|
+
onResponderTerminate={[Function]}
|
|
3129
|
+
onResponderTerminationRequest={[Function]}
|
|
3130
|
+
onStartShouldSetResponder={[Function]}
|
|
3131
|
+
role="button"
|
|
3061
3132
|
style={
|
|
3062
3133
|
{
|
|
3063
|
-
"
|
|
3134
|
+
"alignItems": "center",
|
|
3135
|
+
"alignSelf": "stretch",
|
|
3136
|
+
"backgroundColor": "#563B56",
|
|
3137
|
+
"borderBottomColor": "transparent",
|
|
3138
|
+
"borderBottomLeftRadius": 4,
|
|
3139
|
+
"borderBottomRightRadius": 4,
|
|
3140
|
+
"borderBottomWidth": 1,
|
|
3141
|
+
"borderLeftColor": "transparent",
|
|
3142
|
+
"borderLeftWidth": 1,
|
|
3143
|
+
"borderRightColor": "transparent",
|
|
3144
|
+
"borderRightWidth": 1,
|
|
3145
|
+
"borderStyle": "solid",
|
|
3146
|
+
"borderTopColor": "transparent",
|
|
3147
|
+
"borderTopLeftRadius": 4,
|
|
3148
|
+
"borderTopRightRadius": 4,
|
|
3149
|
+
"borderTopWidth": 1,
|
|
3150
|
+
"flexDirection": "row",
|
|
3151
|
+
"gap": 8,
|
|
3152
|
+
"height": 48,
|
|
3153
|
+
"justifyContent": "center",
|
|
3154
|
+
"paddingBottom": 14,
|
|
3155
|
+
"paddingLeft": 16,
|
|
3156
|
+
"paddingRight": 16,
|
|
3157
|
+
"paddingTop": 14,
|
|
3064
3158
|
}
|
|
3065
3159
|
}
|
|
3066
3160
|
>
|
|
3067
|
-
<
|
|
3161
|
+
<View
|
|
3068
3162
|
style={
|
|
3069
3163
|
{
|
|
3070
|
-
"
|
|
3071
|
-
"fontFamily": "GTStandardSemibold",
|
|
3072
|
-
"fontSize": 16,
|
|
3073
|
-
"letterSpacing": 0,
|
|
3074
|
-
"lineHeight": 20,
|
|
3164
|
+
"flexDirection": "column",
|
|
3075
3165
|
}
|
|
3076
3166
|
}
|
|
3077
|
-
suppressHighlighting={true}
|
|
3078
3167
|
>
|
|
3079
|
-
|
|
3080
|
-
|
|
3168
|
+
<Text
|
|
3169
|
+
style={
|
|
3170
|
+
{
|
|
3171
|
+
"color": "#ffffff",
|
|
3172
|
+
"fontFamily": "GTStandardSemibold",
|
|
3173
|
+
"fontSize": 16,
|
|
3174
|
+
"letterSpacing": 0,
|
|
3175
|
+
"lineHeight": 20,
|
|
3176
|
+
}
|
|
3177
|
+
}
|
|
3178
|
+
suppressHighlighting={true}
|
|
3179
|
+
>
|
|
3180
|
+
Stretched primary
|
|
3181
|
+
</Text>
|
|
3182
|
+
</View>
|
|
3183
|
+
</View>
|
|
3184
|
+
<View
|
|
3185
|
+
focusVisibleStyle={
|
|
3186
|
+
{
|
|
3187
|
+
"outlineColor": "$border.focus",
|
|
3188
|
+
"outlineStyle": "solid",
|
|
3189
|
+
"outlineWidth": 3,
|
|
3190
|
+
}
|
|
3191
|
+
}
|
|
3192
|
+
onBlur={[Function]}
|
|
3193
|
+
onClick={[Function]}
|
|
3194
|
+
onFocus={[Function]}
|
|
3195
|
+
onResponderGrant={[Function]}
|
|
3196
|
+
onResponderMove={[Function]}
|
|
3197
|
+
onResponderRelease={[Function]}
|
|
3198
|
+
onResponderTerminate={[Function]}
|
|
3199
|
+
onResponderTerminationRequest={[Function]}
|
|
3200
|
+
onStartShouldSetResponder={[Function]}
|
|
3201
|
+
role="button"
|
|
3202
|
+
style={
|
|
3203
|
+
{
|
|
3204
|
+
"alignItems": "center",
|
|
3205
|
+
"alignSelf": "stretch",
|
|
3206
|
+
"backgroundColor": "transparent",
|
|
3207
|
+
"borderBottomColor": "#563B56",
|
|
3208
|
+
"borderBottomLeftRadius": 4,
|
|
3209
|
+
"borderBottomRightRadius": 4,
|
|
3210
|
+
"borderBottomWidth": 1,
|
|
3211
|
+
"borderLeftColor": "#563B56",
|
|
3212
|
+
"borderLeftWidth": 1,
|
|
3213
|
+
"borderRightColor": "#563B56",
|
|
3214
|
+
"borderRightWidth": 1,
|
|
3215
|
+
"borderStyle": "solid",
|
|
3216
|
+
"borderTopColor": "#563B56",
|
|
3217
|
+
"borderTopLeftRadius": 4,
|
|
3218
|
+
"borderTopRightRadius": 4,
|
|
3219
|
+
"borderTopWidth": 1,
|
|
3220
|
+
"flexDirection": "row",
|
|
3221
|
+
"gap": 8,
|
|
3222
|
+
"height": 48,
|
|
3223
|
+
"justifyContent": "center",
|
|
3224
|
+
"paddingBottom": 14,
|
|
3225
|
+
"paddingLeft": 16,
|
|
3226
|
+
"paddingRight": 16,
|
|
3227
|
+
"paddingTop": 14,
|
|
3228
|
+
}
|
|
3229
|
+
}
|
|
3230
|
+
>
|
|
3231
|
+
<View
|
|
3232
|
+
style={
|
|
3233
|
+
{
|
|
3234
|
+
"flexDirection": "column",
|
|
3235
|
+
}
|
|
3236
|
+
}
|
|
3237
|
+
>
|
|
3238
|
+
<Text
|
|
3239
|
+
style={
|
|
3240
|
+
{
|
|
3241
|
+
"color": "#563B56",
|
|
3242
|
+
"fontFamily": "GTStandardSemibold",
|
|
3243
|
+
"fontSize": 16,
|
|
3244
|
+
"letterSpacing": 0,
|
|
3245
|
+
"lineHeight": 20,
|
|
3246
|
+
}
|
|
3247
|
+
}
|
|
3248
|
+
suppressHighlighting={true}
|
|
3249
|
+
>
|
|
3250
|
+
Stretched secondary
|
|
3251
|
+
</Text>
|
|
3252
|
+
</View>
|
|
3081
3253
|
</View>
|
|
3082
3254
|
</View>
|
|
3083
3255
|
</View>
|
|
@@ -515,7 +515,7 @@ exports[`Bumper/Actions/Button/Features Responsive 1`] = `
|
|
|
515
515
|
class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020313"
|
|
516
516
|
>
|
|
517
517
|
<div
|
|
518
|
-
class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-1610009989 _backgroundColor-0active-button--bg-1610009989 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-
|
|
518
|
+
class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-1610009989 _backgroundColor-0active-button--bg-1610009989 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-stretch _gap-t-space-spa94482166 _cur-pointer _btc-border--bas1187721777 _brc-border--bas1187721777 _borderBottomColor-border--bas1187721777 _borderLeftColor-border--bas1187721777 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _backgroundColor-button--bg-253058202 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid _height-36px _paddingRight-12px _paddingLeft-12px _paddingTop-8px _paddingBottom-8px"
|
|
519
519
|
data-disable-theme="true"
|
|
520
520
|
role="button"
|
|
521
521
|
tabindex="0"
|
|
@@ -531,7 +531,7 @@ exports[`Bumper/Actions/Button/Features Responsive 1`] = `
|
|
|
531
531
|
</div>
|
|
532
532
|
</div>
|
|
533
533
|
<div
|
|
534
|
-
class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-1610009989 _backgroundColor-0active-button--bg-1610009989 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-
|
|
534
|
+
class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-1610009989 _backgroundColor-0active-button--bg-1610009989 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-stretch _gap-t-space-spa94482166 _cur-pointer _btc-border--bas1187721777 _brc-border--bas1187721777 _borderBottomColor-border--bas1187721777 _borderLeftColor-border--bas1187721777 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _backgroundColor-button--bg-253058202 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid _height-36px _paddingRight-12px _paddingLeft-12px _paddingTop-8px _paddingBottom-8px"
|
|
535
535
|
data-disable-theme="true"
|
|
536
536
|
role="button"
|
|
537
537
|
tabindex="0"
|
|
@@ -917,38 +917,78 @@ exports[`Bumper/Actions/Button/Features Stretch 1`] = `
|
|
|
917
917
|
style="display: contents;"
|
|
918
918
|
>
|
|
919
919
|
<div
|
|
920
|
-
class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-
|
|
920
|
+
class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020255"
|
|
921
921
|
>
|
|
922
922
|
<div
|
|
923
|
-
class="
|
|
924
|
-
data-disable-theme="true"
|
|
925
|
-
role="button"
|
|
926
|
-
tabindex="0"
|
|
923
|
+
class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020313"
|
|
927
924
|
>
|
|
928
925
|
<div
|
|
929
|
-
class="
|
|
926
|
+
class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-27634925 _backgroundColor-0active-button--bg-27634925 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-stretch _gap-t-space-spa94482166 _cur-pointer _btc-border--tra718859951 _brc-border--tra718859951 _borderBottomColor-border--tra718859951 _borderLeftColor-border--tra718859951 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _height-48px _paddingRight-16px _paddingLeft-16px _paddingTop-14px _paddingBottom-14px _backgroundColor-button--bg-1890703116 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
|
|
927
|
+
data-disable-theme="true"
|
|
928
|
+
role="button"
|
|
929
|
+
tabindex="0"
|
|
930
930
|
>
|
|
931
|
-
<
|
|
932
|
-
class="
|
|
931
|
+
<div
|
|
932
|
+
class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column"
|
|
933
933
|
>
|
|
934
|
-
|
|
935
|
-
|
|
934
|
+
<span
|
|
935
|
+
class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ba254712717"
|
|
936
|
+
>
|
|
937
|
+
Stretched primary
|
|
938
|
+
</span>
|
|
939
|
+
</div>
|
|
940
|
+
</div>
|
|
941
|
+
<div
|
|
942
|
+
class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-1610009989 _backgroundColor-0active-button--bg-1610009989 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-stretch _gap-t-space-spa94482166 _cur-pointer _btc-border--bas1187721777 _brc-border--bas1187721777 _borderBottomColor-border--bas1187721777 _borderLeftColor-border--bas1187721777 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _height-48px _paddingRight-16px _paddingLeft-16px _paddingTop-14px _paddingBottom-14px _backgroundColor-button--bg-253058202 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
|
|
943
|
+
data-disable-theme="true"
|
|
944
|
+
role="button"
|
|
945
|
+
tabindex="0"
|
|
946
|
+
>
|
|
947
|
+
<div
|
|
948
|
+
class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column"
|
|
949
|
+
>
|
|
950
|
+
<span
|
|
951
|
+
class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896"
|
|
952
|
+
>
|
|
953
|
+
Stretched secondary
|
|
954
|
+
</span>
|
|
955
|
+
</div>
|
|
936
956
|
</div>
|
|
937
957
|
</div>
|
|
938
958
|
<div
|
|
939
|
-
class="
|
|
940
|
-
data-disable-theme="true"
|
|
941
|
-
role="button"
|
|
942
|
-
tabindex="0"
|
|
959
|
+
class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020313 _height-200px _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _paddingTop-t-space-spa1366020313 _paddingRight-t-space-spa1366020313 _paddingBottom-t-space-spa1366020313 _paddingLeft-t-space-spa1366020313 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
|
|
943
960
|
>
|
|
944
961
|
<div
|
|
945
|
-
class="
|
|
962
|
+
class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-27634925 _backgroundColor-0active-button--bg-27634925 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-stretch _gap-t-space-spa94482166 _cur-pointer _btc-border--tra718859951 _brc-border--tra718859951 _borderBottomColor-border--tra718859951 _borderLeftColor-border--tra718859951 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _height-48px _paddingRight-16px _paddingLeft-16px _paddingTop-14px _paddingBottom-14px _backgroundColor-button--bg-1890703116 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
|
|
963
|
+
data-disable-theme="true"
|
|
964
|
+
role="button"
|
|
965
|
+
tabindex="0"
|
|
946
966
|
>
|
|
947
|
-
<
|
|
948
|
-
class="
|
|
967
|
+
<div
|
|
968
|
+
class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column"
|
|
949
969
|
>
|
|
950
|
-
|
|
951
|
-
|
|
970
|
+
<span
|
|
971
|
+
class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ba254712717"
|
|
972
|
+
>
|
|
973
|
+
Stretched primary
|
|
974
|
+
</span>
|
|
975
|
+
</div>
|
|
976
|
+
</div>
|
|
977
|
+
<div
|
|
978
|
+
class="is_Button _outlineWidth-0focus-visible-3px _outlineColor-0focus-visible-border--foc3742 _outlineStyle-0focus-visible-solid _backgroundColor-0hover-button--bg-1610009989 _backgroundColor-0active-button--bg-1610009989 _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _alignItems-center _justifyContent-center _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _alignSelf-stretch _gap-t-space-spa94482166 _cur-pointer _btc-border--bas1187721777 _brc-border--bas1187721777 _borderBottomColor-border--bas1187721777 _borderLeftColor-border--bas1187721777 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _height-48px _paddingRight-16px _paddingLeft-16px _paddingTop-14px _paddingBottom-14px _backgroundColor-button--bg-253058202 _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
|
|
979
|
+
data-disable-theme="true"
|
|
980
|
+
role="button"
|
|
981
|
+
tabindex="0"
|
|
982
|
+
>
|
|
983
|
+
<div
|
|
984
|
+
class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column"
|
|
985
|
+
>
|
|
986
|
+
<span
|
|
987
|
+
class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-labe105291 _lh-f-lineHeigh1842530170 _ls-f-letterSpa379059035 _fw-f-weight-se1074390495 _col-content--ac3049896"
|
|
988
|
+
>
|
|
989
|
+
Stretched secondary
|
|
990
|
+
</span>
|
|
991
|
+
</div>
|
|
952
992
|
</div>
|
|
953
993
|
</div>
|
|
954
994
|
</div>
|