@pagopa/io-app-design-system 5.6.4 → 5.6.5
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/lib/commonjs/components/buttons/IOButton/IOButton.js +10 -7
- package/lib/commonjs/components/buttons/IOButton/IOButton.js.map +1 -1
- package/lib/commonjs/components/buttons/IOButton/__test__/__snapshots__/IOButton.test.tsx.snap +31 -28
- package/lib/module/components/buttons/IOButton/IOButton.js +10 -7
- package/lib/module/components/buttons/IOButton/IOButton.js.map +1 -1
- package/lib/module/components/buttons/IOButton/__test__/__snapshots__/IOButton.test.tsx.snap +31 -28
- package/lib/typescript/components/buttons/IOButton/IOButton.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/buttons/IOButton/IOButton.tsx +12 -7
- package/src/components/buttons/IOButton/__test__/__snapshots__/IOButton.test.tsx.snap +31 -28
|
@@ -85,6 +85,9 @@ const IOButton = exports.IOButton = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
85
85
|
const ICON_MARGIN = 8;
|
|
86
86
|
const DISABLED_OPACITY = 0.5;
|
|
87
87
|
|
|
88
|
+
// Background color
|
|
89
|
+
const backgroundColor = disabled ? mapColorStates[color].background.disabled : mapColorStates[color].background.default;
|
|
90
|
+
|
|
88
91
|
// Label & Icons colors
|
|
89
92
|
const foregroundColor = disabled ? mapColorStates[color]?.foreground?.disabled : mapColorStates[color]?.foreground?.default;
|
|
90
93
|
|
|
@@ -188,20 +191,20 @@ const IOButton = exports.IOButton = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
188
191
|
},
|
|
189
192
|
testID: testID,
|
|
190
193
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
191
|
-
style: [styles.button,
|
|
194
|
+
style: [styles.button,
|
|
195
|
+
/* Prevent Reanimated from overriding background colors
|
|
196
|
+
if button is disabled */
|
|
197
|
+
!disabled && !reducedMotion && scaleAnimatedStyle, !disabled && buttonAnimatedStyle, {
|
|
192
198
|
paddingHorizontal: isLinkButton ? btnPaddingHorizontalMap.link : fullWidth ? btnPaddingHorizontalMap.fullWidth : btnPaddingHorizontalMap.default
|
|
193
199
|
}, {
|
|
194
200
|
height: isLinkButton ? undefined : btnSizeDefault,
|
|
201
|
+
backgroundColor,
|
|
195
202
|
borderWidth: btnBorderWidth,
|
|
196
203
|
borderRadius: btnBorderRadius,
|
|
197
204
|
borderColor: foregroundColor
|
|
198
205
|
}, disabled ? {
|
|
199
|
-
opacity: DISABLED_OPACITY
|
|
200
|
-
|
|
201
|
-
} : {},
|
|
202
|
-
/* Prevent Reanimated from overriding background colors
|
|
203
|
-
if button is disabled */
|
|
204
|
-
!disabled && !reducedMotion && scaleAnimatedStyle, !disabled && buttonAnimatedStyle],
|
|
206
|
+
opacity: DISABLED_OPACITY
|
|
207
|
+
} : {}],
|
|
205
208
|
children: renderButtonContent()
|
|
206
209
|
})
|
|
207
210
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeHapticFeedback","_interopRequireDefault","_reactNativeReanimated","_core","_hooks","_icons","_loadingSpinner","_typography","_ButtonText","_styles","_jsxRuntime","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","IOButton","exports","forwardRef","variant","color","label","fullWidth","disabled","loading","numberOfLines","textAlign","icon","iconPosition","onPress","accessibilityLabel","accessibilityHint","accessibilityRole","testID","ref","mapColorStates","useButtonColorMap","progress","onPressIn","onPressOut","scaleAnimatedStyle","useScaleAnimation","buttonAnimatedStyle","labelAnimatedStyle","iconColorAnimatedStyle","useButtonAnimatedStyles","reducedMotion","useReducedMotion","newTypefaceEnabled","useIONewTypeface","isLinkButton","btnIconSizeMap","solid","outline","link","btnBorderWidthMap","btnPaddingHorizontalMap","btnLinkHitSlop","top","right","bottom","left","btnIconSize","btnBorderWidth","btnBorderRadius","btnSizeDefault","ICON_MARGIN","DISABLED_OPACITY","foregroundColor","foreground","isMounted","useRef","useEffect","current","handleOnPress","useCallback","event","ReactNativeHapticFeedback","trigger","renderButtonContent","jsxs","Fragment","children","jsx","View","style","styles","buttonInner","entering","enterTransitionInnerContentSmall","undefined","exiting","exitTransitionInnerContent","LoadingSpinner","columnGap","flexDirection","enterTransitionInnerContent","AnimatedIconWithColorTransition","allowFontScaling","name","animatedProps","size","AnimatedIcon","AnimatedIOText","font","weight","buttonTextFontSize","lineHeight","buttonTextLineHeight","accessible","accessibilityElementsHidden","importantForAccessibility","ellipsizeMode","Pressable","accessibilityState","busy","hitSlop","alignSelf","flexShrink","button","paddingHorizontal","height","borderWidth","borderRadius","borderColor","opacity","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeHapticFeedback","_interopRequireDefault","_reactNativeReanimated","_core","_hooks","_icons","_loadingSpinner","_typography","_ButtonText","_styles","_jsxRuntime","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","IOButton","exports","forwardRef","variant","color","label","fullWidth","disabled","loading","numberOfLines","textAlign","icon","iconPosition","onPress","accessibilityLabel","accessibilityHint","accessibilityRole","testID","ref","mapColorStates","useButtonColorMap","progress","onPressIn","onPressOut","scaleAnimatedStyle","useScaleAnimation","buttonAnimatedStyle","labelAnimatedStyle","iconColorAnimatedStyle","useButtonAnimatedStyles","reducedMotion","useReducedMotion","newTypefaceEnabled","useIONewTypeface","isLinkButton","btnIconSizeMap","solid","outline","link","btnBorderWidthMap","btnPaddingHorizontalMap","btnLinkHitSlop","top","right","bottom","left","btnIconSize","btnBorderWidth","btnBorderRadius","btnSizeDefault","ICON_MARGIN","DISABLED_OPACITY","backgroundColor","background","foregroundColor","foreground","isMounted","useRef","useEffect","current","handleOnPress","useCallback","event","ReactNativeHapticFeedback","trigger","renderButtonContent","jsxs","Fragment","children","jsx","View","style","styles","buttonInner","entering","enterTransitionInnerContentSmall","undefined","exiting","exitTransitionInnerContent","LoadingSpinner","columnGap","flexDirection","enterTransitionInnerContent","AnimatedIconWithColorTransition","allowFontScaling","name","animatedProps","size","AnimatedIcon","AnimatedIOText","font","weight","buttonTextFontSize","lineHeight","buttonTextLineHeight","accessible","accessibilityElementsHidden","importantForAccessibility","ellipsizeMode","Pressable","accessibilityState","busy","hitSlop","alignSelf","flexShrink","button","paddingHorizontal","height","borderWidth","borderRadius","borderColor","opacity","StyleSheet","create","alignItems","justifyContent","textAlignVertical","borderCurve","overflow","elevation","_default"],"sourceRoot":"../../../../../src","sources":["components/buttons/IOButton/IOButton.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAOA,IAAAC,YAAA,GAAAD,OAAA;AAYA,IAAAE,0BAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,sBAAA,GAAAL,uBAAA,CAAAC,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAMA,IAAAM,MAAA,GAAAN,OAAA;AAEA,IAAAO,MAAA,GAAAP,OAAA;AAMA,IAAAQ,eAAA,GAAAR,OAAA;AACA,IAAAS,WAAA,GAAAT,OAAA;AACA,IAAAU,WAAA,GAAAV,OAAA;AAIA,IAAAW,OAAA,GAAAX,OAAA;AAAsE,IAAAY,WAAA,GAAAZ,OAAA;AAAA,SAAAG,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAd,wBAAAc,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAsE/D,MAAMW,QAAQ,GAAAC,OAAA,CAAAD,QAAA,gBAAG,IAAAE,iBAAU,EAChC,CACE;EACEC,OAAO,GAAG,OAAO;EACjBC,KAAK,GAAG,SAAS;EACjBC,KAAK;EACLC,SAAS,GAAG,KAAK;EACjBC,QAAQ,GAAG,KAAK;EAChBC,OAAO,GAAG,KAAK;EACfC,aAAa,GAAG,CAAC;EACjBC,SAAS,GAAG,MAAM;EAClBC,IAAI;EACJC,YAAY,GAAG,OAAO;EACtBC,OAAO;EACPC,kBAAkB;EAClBC,iBAAiB;EACjBC,iBAAiB,GAAG,QAAQ;EAC5BC;AACF,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,cAAc,GAAG,IAAAC,yBAAiB,EAACjB,OAAO,CAAC;EACjD,MAAM;IAAEkB,QAAQ;IAAEC,SAAS;IAAEC,UAAU;IAAEC;EAAmB,CAAC,GAC3D,IAAAC,wBAAiB,EAAC,CAAC;EACrB,MAAM;IAAEC,mBAAmB;IAAEC,kBAAkB;IAAEC;EAAuB,CAAC,GACvE,IAAAC,+BAAuB,EAAC1B,OAAO,EAAEC,KAAK,EAAEiB,QAAQ,CAAC;EACnD,MAAMS,aAAa,GAAG,IAAAC,uCAAgB,EAAC,CAAC;EACxC,MAAM;IAAEC;EAAmB,CAAC,GAAG,IAAAC,sBAAgB,EAAC,CAAC;EAEjD,MAAMC,YAAY,GAAG/B,OAAO,KAAK,MAAM;;EAEvC;EACA;EACA;EACA,MAAMgC,cAAwD,GAAG;IAC/DC,KAAK,EAAE,EAAE;IACTC,OAAO,EAAE,EAAE;IACXC,IAAI,EAAE;EACR,CAAC;EAED,MAAMC,iBAAoE,GACxE;IACEH,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE,CAAC;IACVC,IAAI,EAAE;EACR,CAAC;EAEH,MAAME,uBAGL,GAAG;IACF1D,OAAO,EAAE,EAAE;IACXwB,SAAS,EAAE,EAAE;IACbgC,IAAI,EAAE;EACR,CAAC;EAED,MAAMG,cAAyC,GAAG;IAChDC,GAAG,EAAE,EAAE;IACPC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,IAAI,EAAE;EACR,CAAC;EAED,MAAMC,WAAW,GAAGX,cAAc,CAAChC,OAAO,CAAC;EAC3C,MAAM4C,cAAc,GAAGR,iBAAiB,CAACpC,OAAO,CAAC;EACjD,MAAM6C,eAAe,GAAG,CAAC;EACzB,MAAMC,cAAc,GAAG,EAAE;EAEzB,MAAMC,WAAW,GAAG,CAAC;EACrB,MAAMC,gBAAgB,GAAG,GAAG;;EAE5B;EACA,MAAMC,eAA2B,GAAG7C,QAAQ,GACxCY,cAAc,CAACf,KAAK,CAAC,CAACiD,UAAU,CAAC9C,QAAQ,GACzCY,cAAc,CAACf,KAAK,CAAC,CAACiD,UAAU,CAACvE,OAAO;;EAE5C;EACA,MAAMwE,eAA2B,GAAG/C,QAAQ,GACxCY,cAAc,CAACf,KAAK,CAAC,EAAEmD,UAAU,EAAEhD,QAAQ,GAC3CY,cAAc,CAACf,KAAK,CAAC,EAAEmD,UAAU,EAAEzE,OAAO;;EAE9C;EACA;EACA;;EAEA;AACJ;AACA;AACA;EACI,MAAM0E,SAAS,GAAG,IAAAC,aAAM,EAAU,KAAK,CAAC;EAExC,IAAAC,gBAAS,EAAC,MAAM;IACd;IACAF,SAAS,CAACG,OAAO,GAAG,IAAI;EAC1B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,aAAa,GAAG,IAAAC,kBAAW,EAC9BC,KAA4B,IAAK;IAChC;AACR;IACQ,IAAItD,OAAO,EAAE;MACX;IACF;IACAuD,kCAAyB,CAACC,OAAO,CAAC,aAAa,CAAC;IAChDnD,OAAO,CAACiD,KAAK,CAAC;EAChB,CAAC,EACD,CAACtD,OAAO,EAAEK,OAAO,CACnB,CAAC;;EAED;EACA;EACA;EACA,MAAMoD,mBAAmB,GAAGA,CAAA,kBAC1B,IAAAtF,WAAA,CAAAuF,IAAA,EAAAvF,WAAA,CAAAwF,QAAA;IAAAC,QAAA,GACG5D,OAAO,iBACN,IAAA7B,WAAA,CAAA0F,GAAA,EAAClG,sBAAA,CAAAW,OAAQ,CAACwF,IAAI;MACZC,KAAK,EAAEC,MAAM,CAACC,WAAY;MAC1BC,QAAQ,EACNlB,SAAS,CAACG,OAAO,GAAGgB,sCAAgC,GAAGC,SACxD;MACDC,OAAO,EAAEC,gCAA2B;MAAAV,QAAA,eAEpC,IAAAzF,WAAA,CAAA0F,GAAA,EAAC9F,eAAA,CAAAwG,cAAc;QAAC3E,KAAK,EAAEkD;MAAgB,CAAE;IAAC,CAC7B,CAChB,EAEA,CAAC9C,OAAO,iBACP,IAAA7B,WAAA,CAAAuF,IAAA,EAAC/F,sBAAA,CAAAW,OAAQ,CAACwF,IAAI;MACZC,KAAK,EAAE,CACLC,MAAM,CAACC,WAAW,EAClB;QAAEO,SAAS,EAAE9B;MAAY,CAAC,EAC1BtC,YAAY,KAAK,KAAK,IAAI;QAAEqE,aAAa,EAAE;MAAc,CAAC,CAC1D;MACFP,QAAQ,EACNlB,SAAS,CAACG,OAAO,GAAGuB,iCAA2B,GAAGN,SACnD;MAAAR,QAAA,GAEAzD,IAAI,KACF,CAACJ,QAAQ,gBACR,IAAA5B,WAAA,CAAA0F,GAAA,EAAC/F,MAAA,CAAA6G,+BAA+B;QAC9BC,gBAAgB;QAChBC,IAAI,EAAE1E,IAAK;QACX2E,aAAa,EAAE1D,sBAAuB;QACtC2D,IAAI,EAAEzC;MAAY,CACnB,CAAC,gBAEF,IAAAnE,WAAA,CAAA0F,GAAA,EAAC/F,MAAA,CAAAkH,YAAY;QACXJ,gBAAgB;QAChBC,IAAI,EAAE1E,IAAK;QACXP,KAAK,EAAEe,cAAc,CAACf,KAAK,CAAC,EAAEmD,UAAU,EAAEhD,QAAS;QACnDgF,IAAI,EAAEzC;MAAY,CACnB,CACF,CAAC,eACJ,IAAAnE,WAAA,CAAA0F,GAAA,EAAC7F,WAAA,CAAAiH,cAAc;QACbC,IAAI,EAAE1D,kBAAkB,GAAG,UAAU,GAAG,kBAAmB;QAC3D2D,MAAM,EAAE,UAAW;QACnBJ,IAAI,EAAEK,8BAAmB;QACzBC,UAAU,EAAE3D,YAAY,GAAG4D,gCAAoB,GAAGlB,SAAU;QAC5DmB,UAAU,EAAE,KAAM;QAClBC,2BAA2B;QAC3BC,yBAAyB,EAAC,qBAAqB;QAC/CxF,aAAa,EAAEA,aAAc;QAC7ByF,aAAa,EAAC,MAAM;QACpB3B,KAAK,EAAE,CACL;UAAE7D;QAAU,CAAC,EACbH,QAAQ,GACJ;UAAEH,KAAK,EAAEe,cAAc,CAACf,KAAK,CAAC,EAAEmD,UAAU,EAAEhD;QAAS,CAAC,GACtD;UAAEH,KAAK,EAAEe,cAAc,CAACf,KAAK,CAAC,EAAEmD,UAAU,EAAEzE;QAAQ,CAAC,EACzD,CAACyB,QAAQ,IAAIoB,kBAAkB,CAC/B;QAAAyC,QAAA,EAED/D;MAAK,CACQ,CAAC;IAAA,CACJ,CAChB;EAAA,CACD,CACH;EAED,oBACE,IAAA1B,WAAA,CAAA0F,GAAA,EAACrG,YAAA,CAAAmI,SAAS;IACRjF,GAAG,EAAEA,GAAI;IACT6E,UAAU,EAAE;IACZ;IAAA;IACAjF,kBAAkB,EAAEA,kBAAkB,IAAIT,KAAM;IAChDU,iBAAiB,EAAEA,iBAAkB;IACrCC,iBAAiB,EAAEA,iBAAkB;IACrCoF,kBAAkB,EAAE;MAClBC,IAAI,EAAE7F,OAAO;MACbD,QAAQ,EAAEA,QAAQ,IAAI;IACxB,CAAE;IACFM,OAAO,EAAE+C,aAAc;IACvBtC,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBhB,QAAQ,EAAEA,QAAS;IACnB+F,OAAO,EAAEpE,YAAY,GAAGO,cAAc,GAAGmC,SAAU;IACnDL,KAAK,EACHrC,YAAY,GACR;MAAEqE,SAAS,EAAE;IAAa,CAAC,GAC3BjG,SAAS,GACT;MAAEkG,UAAU,EAAE,CAAC;MAAED,SAAS,EAAE;IAAU,CAAC,GACvC;MAAEC,UAAU,EAAE,CAAC;MAAED,SAAS,EAAE;IAAO,CACxC;IACDtF,MAAM,EAAEA,MAAO;IAAAmD,QAAA,eAEf,IAAAzF,WAAA,CAAA0F,GAAA,EAAClG,sBAAA,CAAAW,OAAQ,CAACwF,IAAI;MACZC,KAAK,EAAE,CACLC,MAAM,CAACiC,MAAM;MACb;AACZ;MACY,CAAClG,QAAQ,IAAI,CAACuB,aAAa,IAAIN,kBAAkB,EACjD,CAACjB,QAAQ,IAAImB,mBAAmB,EAChC;QACEgF,iBAAiB,EAAExE,YAAY,GAC3BM,uBAAuB,CAACF,IAAI,GAC5BhC,SAAS,GACTkC,uBAAuB,CAAClC,SAAS,GACjCkC,uBAAuB,CAAC1D;MAC9B,CAAC,EACD;QACE6H,MAAM,EAAEzE,YAAY,GAAG0C,SAAS,GAAG3B,cAAc;QACjDG,eAAe;QACfwD,WAAW,EAAE7D,cAAc;QAC3B8D,YAAY,EAAE7D,eAAe;QAC7B8D,WAAW,EAAExD;MACf,CAAC,EACD/C,QAAQ,GACJ;QACEwG,OAAO,EAAE5D;MACX,CAAC,GACD,CAAC,CAAC,CACN;MAAAiB,QAAA,EAEDH,mBAAmB,CAAC;IAAC,CACT;EAAC,CACP,CAAC;AAEhB,CACF,CAAC;AAED,MAAMO,MAAM,GAAGwC,uBAAU,CAACC,MAAM,CAAC;EAC/BR,MAAM,EAAE;IACNxB,aAAa,EAAE,KAAK;IACpBiC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBC,iBAAiB,EAAE,QAAQ;IAAE;IAC7BC,WAAW,EAAE,YAAY;IACzBC,QAAQ,EAAE,QAAQ;IAClBC,SAAS,EAAE;EACb,CAAC;EACD9C,WAAW,EAAE;IACXQ,aAAa,EAAE,KAAK;IACpBiC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAAC,IAAAK,QAAA,GAAAvH,OAAA,CAAAnB,OAAA,GAEYkB,QAAQ","ignoreList":[]}
|
package/lib/commonjs/components/buttons/IOButton/__test__/__snapshots__/IOButton.test.tsx.snap
CHANGED
|
@@ -59,24 +59,25 @@ exports[`Test Buttons Components IOButton Snapshot · Link variant 1`] = `
|
|
|
59
59
|
"overflow": "hidden",
|
|
60
60
|
"textAlignVertical": "center",
|
|
61
61
|
},
|
|
62
|
+
{
|
|
63
|
+
"transform": [
|
|
64
|
+
{
|
|
65
|
+
"scale": undefined,
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
{},
|
|
62
70
|
{
|
|
63
71
|
"paddingHorizontal": 0,
|
|
64
72
|
},
|
|
65
73
|
{
|
|
74
|
+
"backgroundColor": "transparent",
|
|
66
75
|
"borderColor": "#0B3EE3",
|
|
67
76
|
"borderRadius": 8,
|
|
68
77
|
"borderWidth": 0,
|
|
69
78
|
"height": undefined,
|
|
70
79
|
},
|
|
71
80
|
{},
|
|
72
|
-
{
|
|
73
|
-
"transform": [
|
|
74
|
-
{
|
|
75
|
-
"scale": undefined,
|
|
76
|
-
},
|
|
77
|
-
],
|
|
78
|
-
},
|
|
79
|
-
{},
|
|
80
81
|
]
|
|
81
82
|
}
|
|
82
83
|
>
|
|
@@ -187,16 +188,6 @@ exports[`Test Buttons Components IOButton Snapshot · Outline variant 1`] = `
|
|
|
187
188
|
"overflow": "hidden",
|
|
188
189
|
"textAlignVertical": "center",
|
|
189
190
|
},
|
|
190
|
-
{
|
|
191
|
-
"paddingHorizontal": 24,
|
|
192
|
-
},
|
|
193
|
-
{
|
|
194
|
-
"borderColor": "#0B3EE3",
|
|
195
|
-
"borderRadius": 8,
|
|
196
|
-
"borderWidth": 2,
|
|
197
|
-
"height": 48,
|
|
198
|
-
},
|
|
199
|
-
{},
|
|
200
191
|
{
|
|
201
192
|
"transform": [
|
|
202
193
|
{
|
|
@@ -208,6 +199,17 @@ exports[`Test Buttons Components IOButton Snapshot · Outline variant 1`] = `
|
|
|
208
199
|
"backgroundColor": undefined,
|
|
209
200
|
"borderColor": undefined,
|
|
210
201
|
},
|
|
202
|
+
{
|
|
203
|
+
"paddingHorizontal": 24,
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"backgroundColor": "rgba(9,50,182,0)",
|
|
207
|
+
"borderColor": "#0B3EE3",
|
|
208
|
+
"borderRadius": 8,
|
|
209
|
+
"borderWidth": 2,
|
|
210
|
+
"height": 48,
|
|
211
|
+
},
|
|
212
|
+
{},
|
|
211
213
|
]
|
|
212
214
|
}
|
|
213
215
|
>
|
|
@@ -318,16 +320,6 @@ exports[`Test Buttons Components IOButton Snapshot · Solid variant 1`] = `
|
|
|
318
320
|
"overflow": "hidden",
|
|
319
321
|
"textAlignVertical": "center",
|
|
320
322
|
},
|
|
321
|
-
{
|
|
322
|
-
"paddingHorizontal": 24,
|
|
323
|
-
},
|
|
324
|
-
{
|
|
325
|
-
"borderColor": "#FFFFFF",
|
|
326
|
-
"borderRadius": 8,
|
|
327
|
-
"borderWidth": 0,
|
|
328
|
-
"height": 48,
|
|
329
|
-
},
|
|
330
|
-
{},
|
|
331
323
|
{
|
|
332
324
|
"transform": [
|
|
333
325
|
{
|
|
@@ -338,6 +330,17 @@ exports[`Test Buttons Components IOButton Snapshot · Solid variant 1`] = `
|
|
|
338
330
|
{
|
|
339
331
|
"backgroundColor": undefined,
|
|
340
332
|
},
|
|
333
|
+
{
|
|
334
|
+
"paddingHorizontal": 24,
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
"backgroundColor": "#0B3EE3",
|
|
338
|
+
"borderColor": "#FFFFFF",
|
|
339
|
+
"borderRadius": 8,
|
|
340
|
+
"borderWidth": 0,
|
|
341
|
+
"height": 48,
|
|
342
|
+
},
|
|
343
|
+
{},
|
|
341
344
|
]
|
|
342
345
|
}
|
|
343
346
|
>
|
|
@@ -78,6 +78,9 @@ export const IOButton = /*#__PURE__*/forwardRef(({
|
|
|
78
78
|
const ICON_MARGIN = 8;
|
|
79
79
|
const DISABLED_OPACITY = 0.5;
|
|
80
80
|
|
|
81
|
+
// Background color
|
|
82
|
+
const backgroundColor = disabled ? mapColorStates[color].background.disabled : mapColorStates[color].background.default;
|
|
83
|
+
|
|
81
84
|
// Label & Icons colors
|
|
82
85
|
const foregroundColor = disabled ? mapColorStates[color]?.foreground?.disabled : mapColorStates[color]?.foreground?.default;
|
|
83
86
|
|
|
@@ -181,20 +184,20 @@ export const IOButton = /*#__PURE__*/forwardRef(({
|
|
|
181
184
|
},
|
|
182
185
|
testID: testID,
|
|
183
186
|
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
184
|
-
style: [styles.button,
|
|
187
|
+
style: [styles.button,
|
|
188
|
+
/* Prevent Reanimated from overriding background colors
|
|
189
|
+
if button is disabled */
|
|
190
|
+
!disabled && !reducedMotion && scaleAnimatedStyle, !disabled && buttonAnimatedStyle, {
|
|
185
191
|
paddingHorizontal: isLinkButton ? btnPaddingHorizontalMap.link : fullWidth ? btnPaddingHorizontalMap.fullWidth : btnPaddingHorizontalMap.default
|
|
186
192
|
}, {
|
|
187
193
|
height: isLinkButton ? undefined : btnSizeDefault,
|
|
194
|
+
backgroundColor,
|
|
188
195
|
borderWidth: btnBorderWidth,
|
|
189
196
|
borderRadius: btnBorderRadius,
|
|
190
197
|
borderColor: foregroundColor
|
|
191
198
|
}, disabled ? {
|
|
192
|
-
opacity: DISABLED_OPACITY
|
|
193
|
-
|
|
194
|
-
} : {},
|
|
195
|
-
/* Prevent Reanimated from overriding background colors
|
|
196
|
-
if button is disabled */
|
|
197
|
-
!disabled && !reducedMotion && scaleAnimatedStyle, !disabled && buttonAnimatedStyle],
|
|
199
|
+
opacity: DISABLED_OPACITY
|
|
200
|
+
} : {}],
|
|
198
201
|
children: renderButtonContent()
|
|
199
202
|
})
|
|
200
203
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","useCallback","useEffect","useRef","Pressable","StyleSheet","ReactNativeHapticFeedback","Animated","useReducedMotion","enterTransitionInnerContent","enterTransitionInnerContentSmall","exitTransitionInnerContent","useIONewTypeface","useScaleAnimation","AnimatedIcon","AnimatedIconWithColorTransition","LoadingSpinner","AnimatedIOText","buttonTextFontSize","buttonTextLineHeight","useButtonAnimatedStyles","useButtonColorMap","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","IOButton","variant","color","label","fullWidth","disabled","loading","numberOfLines","textAlign","icon","iconPosition","onPress","accessibilityLabel","accessibilityHint","accessibilityRole","testID","ref","mapColorStates","progress","onPressIn","onPressOut","scaleAnimatedStyle","buttonAnimatedStyle","labelAnimatedStyle","iconColorAnimatedStyle","reducedMotion","newTypefaceEnabled","isLinkButton","btnIconSizeMap","solid","outline","link","btnBorderWidthMap","btnPaddingHorizontalMap","default","btnLinkHitSlop","top","right","bottom","left","btnIconSize","btnBorderWidth","btnBorderRadius","btnSizeDefault","ICON_MARGIN","DISABLED_OPACITY","foregroundColor","foreground","isMounted","current","handleOnPress","event","trigger","renderButtonContent","children","View","style","styles","buttonInner","entering","undefined","exiting","columnGap","flexDirection","allowFontScaling","name","animatedProps","size","font","weight","lineHeight","accessible","accessibilityElementsHidden","importantForAccessibility","ellipsizeMode","accessibilityState","busy","hitSlop","alignSelf","flexShrink","button","paddingHorizontal","height","borderWidth","borderRadius","borderColor","opacity","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useCallback","useEffect","useRef","Pressable","StyleSheet","ReactNativeHapticFeedback","Animated","useReducedMotion","enterTransitionInnerContent","enterTransitionInnerContentSmall","exitTransitionInnerContent","useIONewTypeface","useScaleAnimation","AnimatedIcon","AnimatedIconWithColorTransition","LoadingSpinner","AnimatedIOText","buttonTextFontSize","buttonTextLineHeight","useButtonAnimatedStyles","useButtonColorMap","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","IOButton","variant","color","label","fullWidth","disabled","loading","numberOfLines","textAlign","icon","iconPosition","onPress","accessibilityLabel","accessibilityHint","accessibilityRole","testID","ref","mapColorStates","progress","onPressIn","onPressOut","scaleAnimatedStyle","buttonAnimatedStyle","labelAnimatedStyle","iconColorAnimatedStyle","reducedMotion","newTypefaceEnabled","isLinkButton","btnIconSizeMap","solid","outline","link","btnBorderWidthMap","btnPaddingHorizontalMap","default","btnLinkHitSlop","top","right","bottom","left","btnIconSize","btnBorderWidth","btnBorderRadius","btnSizeDefault","ICON_MARGIN","DISABLED_OPACITY","backgroundColor","background","foregroundColor","foreground","isMounted","current","handleOnPress","event","trigger","renderButtonContent","children","View","style","styles","buttonInner","entering","undefined","exiting","columnGap","flexDirection","allowFontScaling","name","animatedProps","size","font","weight","lineHeight","accessible","accessibilityElementsHidden","importantForAccessibility","ellipsizeMode","accessibilityState","busy","hitSlop","alignSelf","flexShrink","button","paddingHorizontal","height","borderWidth","borderRadius","borderColor","opacity","create","alignItems","justifyContent","textAlignVertical","borderCurve","overflow","elevation"],"sourceRoot":"../../../../../src","sources":["components/buttons/IOButton/IOButton.tsx"],"mappings":"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","ignoreList":[]}
|
package/lib/module/components/buttons/IOButton/__test__/__snapshots__/IOButton.test.tsx.snap
CHANGED
|
@@ -59,24 +59,25 @@ exports[`Test Buttons Components IOButton Snapshot · Link variant 1`] = `
|
|
|
59
59
|
"overflow": "hidden",
|
|
60
60
|
"textAlignVertical": "center",
|
|
61
61
|
},
|
|
62
|
+
{
|
|
63
|
+
"transform": [
|
|
64
|
+
{
|
|
65
|
+
"scale": undefined,
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
{},
|
|
62
70
|
{
|
|
63
71
|
"paddingHorizontal": 0,
|
|
64
72
|
},
|
|
65
73
|
{
|
|
74
|
+
"backgroundColor": "transparent",
|
|
66
75
|
"borderColor": "#0B3EE3",
|
|
67
76
|
"borderRadius": 8,
|
|
68
77
|
"borderWidth": 0,
|
|
69
78
|
"height": undefined,
|
|
70
79
|
},
|
|
71
80
|
{},
|
|
72
|
-
{
|
|
73
|
-
"transform": [
|
|
74
|
-
{
|
|
75
|
-
"scale": undefined,
|
|
76
|
-
},
|
|
77
|
-
],
|
|
78
|
-
},
|
|
79
|
-
{},
|
|
80
81
|
]
|
|
81
82
|
}
|
|
82
83
|
>
|
|
@@ -187,16 +188,6 @@ exports[`Test Buttons Components IOButton Snapshot · Outline variant 1`] = `
|
|
|
187
188
|
"overflow": "hidden",
|
|
188
189
|
"textAlignVertical": "center",
|
|
189
190
|
},
|
|
190
|
-
{
|
|
191
|
-
"paddingHorizontal": 24,
|
|
192
|
-
},
|
|
193
|
-
{
|
|
194
|
-
"borderColor": "#0B3EE3",
|
|
195
|
-
"borderRadius": 8,
|
|
196
|
-
"borderWidth": 2,
|
|
197
|
-
"height": 48,
|
|
198
|
-
},
|
|
199
|
-
{},
|
|
200
191
|
{
|
|
201
192
|
"transform": [
|
|
202
193
|
{
|
|
@@ -208,6 +199,17 @@ exports[`Test Buttons Components IOButton Snapshot · Outline variant 1`] = `
|
|
|
208
199
|
"backgroundColor": undefined,
|
|
209
200
|
"borderColor": undefined,
|
|
210
201
|
},
|
|
202
|
+
{
|
|
203
|
+
"paddingHorizontal": 24,
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"backgroundColor": "rgba(9,50,182,0)",
|
|
207
|
+
"borderColor": "#0B3EE3",
|
|
208
|
+
"borderRadius": 8,
|
|
209
|
+
"borderWidth": 2,
|
|
210
|
+
"height": 48,
|
|
211
|
+
},
|
|
212
|
+
{},
|
|
211
213
|
]
|
|
212
214
|
}
|
|
213
215
|
>
|
|
@@ -318,16 +320,6 @@ exports[`Test Buttons Components IOButton Snapshot · Solid variant 1`] = `
|
|
|
318
320
|
"overflow": "hidden",
|
|
319
321
|
"textAlignVertical": "center",
|
|
320
322
|
},
|
|
321
|
-
{
|
|
322
|
-
"paddingHorizontal": 24,
|
|
323
|
-
},
|
|
324
|
-
{
|
|
325
|
-
"borderColor": "#FFFFFF",
|
|
326
|
-
"borderRadius": 8,
|
|
327
|
-
"borderWidth": 0,
|
|
328
|
-
"height": 48,
|
|
329
|
-
},
|
|
330
|
-
{},
|
|
331
323
|
{
|
|
332
324
|
"transform": [
|
|
333
325
|
{
|
|
@@ -338,6 +330,17 @@ exports[`Test Buttons Components IOButton Snapshot · Solid variant 1`] = `
|
|
|
338
330
|
{
|
|
339
331
|
"backgroundColor": undefined,
|
|
340
332
|
},
|
|
333
|
+
{
|
|
334
|
+
"paddingHorizontal": 24,
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
"backgroundColor": "#0B3EE3",
|
|
338
|
+
"borderColor": "#FFFFFF",
|
|
339
|
+
"borderRadius": 8,
|
|
340
|
+
"borderWidth": 0,
|
|
341
|
+
"height": 48,
|
|
342
|
+
},
|
|
343
|
+
{},
|
|
341
344
|
]
|
|
342
345
|
}
|
|
343
346
|
>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IOButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/buttons/IOButton/IOButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,iBAAiB,EAEjB,qBAAqB,EACrB,SAAS,EAGT,SAAS,EACT,SAAS,EACT,IAAI,EAEL,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAIL,OAAO,EACR,MAAM,aAAa,CAAC;AASrB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAE3D,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,cAAc,CAAC,OAAO,QAAQ,CAAC,EAC/B,eAAe,GAAG,WAAW,CAC9B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,cAAc,CAAC,OAAO,QAAQ,CAAC,EAC/B,WAAW,GAAG,SAAS,CACxB,CAAC;AAEF,KAAK,qBAAqB,GACtB;IACE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,GACD;IACE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC;AAEN,MAAM,MAAM,aAAa,GAAG,UAAU,CACpC,qBAAqB,GAAG;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,EAAE,QAAQ,GAAG,MAAM,CAAC,CAAC;CACnE,GAAG,IAAI,CACJ,cAAc,CAAC,OAAO,SAAS,CAAC,EAChC,UAAU,GAAG,oBAAoB,GAAG,mBAAmB,CACxD,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"IOButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/buttons/IOButton/IOButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,iBAAiB,EAEjB,qBAAqB,EACrB,SAAS,EAGT,SAAS,EACT,SAAS,EACT,IAAI,EAEL,MAAM,cAAc,CAAC;AAUtB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAIL,OAAO,EACR,MAAM,aAAa,CAAC;AASrB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAE3D,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,cAAc,CAAC,OAAO,QAAQ,CAAC,EAC/B,eAAe,GAAG,WAAW,CAC9B,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,cAAc,CAAC,OAAO,QAAQ,CAAC,EAC/B,WAAW,GAAG,SAAS,CACxB,CAAC;AAEF,KAAK,qBAAqB,GACtB;IACE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,GACD;IACE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC;AAEN,MAAM,MAAM,aAAa,GAAG,UAAU,CACpC,qBAAqB,GAAG;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC/B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAChD;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC,iBAAiB,EAAE,QAAQ,GAAG,MAAM,CAAC,CAAC;CACnE,GAAG,IAAI,CACJ,cAAc,CAAC,OAAO,SAAS,CAAC,EAChC,UAAU,GAAG,oBAAoB,GAAG,mBAAmB,CACxD,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,4EA6OpB,CAAC;AAmBF,eAAe,QAAQ,CAAC"}
|
package/package.json
CHANGED
|
@@ -180,6 +180,11 @@ export const IOButton = forwardRef<View, IOButtonProps>(
|
|
|
180
180
|
const ICON_MARGIN = 8;
|
|
181
181
|
const DISABLED_OPACITY = 0.5;
|
|
182
182
|
|
|
183
|
+
// Background color
|
|
184
|
+
const backgroundColor: ColorValue = disabled
|
|
185
|
+
? mapColorStates[color].background.disabled
|
|
186
|
+
: mapColorStates[color].background.default;
|
|
187
|
+
|
|
183
188
|
// Label & Icons colors
|
|
184
189
|
const foregroundColor: ColorValue = disabled
|
|
185
190
|
? mapColorStates[color]?.foreground?.disabled
|
|
@@ -311,6 +316,10 @@ export const IOButton = forwardRef<View, IOButtonProps>(
|
|
|
311
316
|
<Animated.View
|
|
312
317
|
style={[
|
|
313
318
|
styles.button,
|
|
319
|
+
/* Prevent Reanimated from overriding background colors
|
|
320
|
+
if button is disabled */
|
|
321
|
+
!disabled && !reducedMotion && scaleAnimatedStyle,
|
|
322
|
+
!disabled && buttonAnimatedStyle,
|
|
314
323
|
{
|
|
315
324
|
paddingHorizontal: isLinkButton
|
|
316
325
|
? btnPaddingHorizontalMap.link
|
|
@@ -320,20 +329,16 @@ export const IOButton = forwardRef<View, IOButtonProps>(
|
|
|
320
329
|
},
|
|
321
330
|
{
|
|
322
331
|
height: isLinkButton ? undefined : btnSizeDefault,
|
|
332
|
+
backgroundColor,
|
|
323
333
|
borderWidth: btnBorderWidth,
|
|
324
334
|
borderRadius: btnBorderRadius,
|
|
325
335
|
borderColor: foregroundColor
|
|
326
336
|
},
|
|
327
337
|
disabled
|
|
328
338
|
? {
|
|
329
|
-
opacity: DISABLED_OPACITY
|
|
330
|
-
backgroundColor: mapColorStates[color].background.disabled
|
|
339
|
+
opacity: DISABLED_OPACITY
|
|
331
340
|
}
|
|
332
|
-
: {}
|
|
333
|
-
/* Prevent Reanimated from overriding background colors
|
|
334
|
-
if button is disabled */
|
|
335
|
-
!disabled && !reducedMotion && scaleAnimatedStyle,
|
|
336
|
-
!disabled && buttonAnimatedStyle
|
|
341
|
+
: {}
|
|
337
342
|
]}
|
|
338
343
|
>
|
|
339
344
|
{renderButtonContent()}
|
|
@@ -59,24 +59,25 @@ exports[`Test Buttons Components IOButton Snapshot · Link variant 1`] = `
|
|
|
59
59
|
"overflow": "hidden",
|
|
60
60
|
"textAlignVertical": "center",
|
|
61
61
|
},
|
|
62
|
+
{
|
|
63
|
+
"transform": [
|
|
64
|
+
{
|
|
65
|
+
"scale": undefined,
|
|
66
|
+
},
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
{},
|
|
62
70
|
{
|
|
63
71
|
"paddingHorizontal": 0,
|
|
64
72
|
},
|
|
65
73
|
{
|
|
74
|
+
"backgroundColor": "transparent",
|
|
66
75
|
"borderColor": "#0B3EE3",
|
|
67
76
|
"borderRadius": 8,
|
|
68
77
|
"borderWidth": 0,
|
|
69
78
|
"height": undefined,
|
|
70
79
|
},
|
|
71
80
|
{},
|
|
72
|
-
{
|
|
73
|
-
"transform": [
|
|
74
|
-
{
|
|
75
|
-
"scale": undefined,
|
|
76
|
-
},
|
|
77
|
-
],
|
|
78
|
-
},
|
|
79
|
-
{},
|
|
80
81
|
]
|
|
81
82
|
}
|
|
82
83
|
>
|
|
@@ -187,16 +188,6 @@ exports[`Test Buttons Components IOButton Snapshot · Outline variant 1`] = `
|
|
|
187
188
|
"overflow": "hidden",
|
|
188
189
|
"textAlignVertical": "center",
|
|
189
190
|
},
|
|
190
|
-
{
|
|
191
|
-
"paddingHorizontal": 24,
|
|
192
|
-
},
|
|
193
|
-
{
|
|
194
|
-
"borderColor": "#0B3EE3",
|
|
195
|
-
"borderRadius": 8,
|
|
196
|
-
"borderWidth": 2,
|
|
197
|
-
"height": 48,
|
|
198
|
-
},
|
|
199
|
-
{},
|
|
200
191
|
{
|
|
201
192
|
"transform": [
|
|
202
193
|
{
|
|
@@ -208,6 +199,17 @@ exports[`Test Buttons Components IOButton Snapshot · Outline variant 1`] = `
|
|
|
208
199
|
"backgroundColor": undefined,
|
|
209
200
|
"borderColor": undefined,
|
|
210
201
|
},
|
|
202
|
+
{
|
|
203
|
+
"paddingHorizontal": 24,
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
"backgroundColor": "rgba(9,50,182,0)",
|
|
207
|
+
"borderColor": "#0B3EE3",
|
|
208
|
+
"borderRadius": 8,
|
|
209
|
+
"borderWidth": 2,
|
|
210
|
+
"height": 48,
|
|
211
|
+
},
|
|
212
|
+
{},
|
|
211
213
|
]
|
|
212
214
|
}
|
|
213
215
|
>
|
|
@@ -318,16 +320,6 @@ exports[`Test Buttons Components IOButton Snapshot · Solid variant 1`] = `
|
|
|
318
320
|
"overflow": "hidden",
|
|
319
321
|
"textAlignVertical": "center",
|
|
320
322
|
},
|
|
321
|
-
{
|
|
322
|
-
"paddingHorizontal": 24,
|
|
323
|
-
},
|
|
324
|
-
{
|
|
325
|
-
"borderColor": "#FFFFFF",
|
|
326
|
-
"borderRadius": 8,
|
|
327
|
-
"borderWidth": 0,
|
|
328
|
-
"height": 48,
|
|
329
|
-
},
|
|
330
|
-
{},
|
|
331
323
|
{
|
|
332
324
|
"transform": [
|
|
333
325
|
{
|
|
@@ -338,6 +330,17 @@ exports[`Test Buttons Components IOButton Snapshot · Solid variant 1`] = `
|
|
|
338
330
|
{
|
|
339
331
|
"backgroundColor": undefined,
|
|
340
332
|
},
|
|
333
|
+
{
|
|
334
|
+
"paddingHorizontal": 24,
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
"backgroundColor": "#0B3EE3",
|
|
338
|
+
"borderColor": "#FFFFFF",
|
|
339
|
+
"borderRadius": 8,
|
|
340
|
+
"borderWidth": 0,
|
|
341
|
+
"height": 48,
|
|
342
|
+
},
|
|
343
|
+
{},
|
|
341
344
|
]
|
|
342
345
|
}
|
|
343
346
|
>
|