From 19543c8207e9384d9b201d757a97bb9d4b1badc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Mon, 24 Aug 2026 17:37:10 +0200 Subject: [PATCH] fix: don't expose handler-less TouchableRipple as a disabled control --- src/components/IconButton/utils.ts | 10 +- src/components/TextInput/TextInputIcon.tsx | 5 +- .../TouchableRipple.native.tsx | 56 +- .../TouchableRipple/TouchableRipple.tsx | 59 ++- .../Appbar/__snapshots__/Appbar.test.tsx.snap | 55 +- src/components/__tests__/Button.test.tsx | 14 +- .../__snapshots__/Checkbox.test.tsx.snap | 216 ++------ .../__snapshots__/CheckboxItem.test.tsx.snap | 176 +------ src/components/__tests__/Chip.test.tsx | 14 +- src/components/__tests__/IconButton.test.tsx | 15 + src/components/__tests__/MenuItem.test.tsx | 4 +- .../__snapshots__/RadioButton.test.tsx.snap | 8 +- .../RadioButtonGroup.test.tsx.snap | 2 +- .../RadioButtonItem.test.tsx.snap | 16 +- .../__tests__/TouchableRipple.test.tsx | 65 ++- .../__snapshots__/Banner.test.tsx.snap | 8 +- .../__snapshots__/Button.test.tsx.snap | 480 +++-------------- .../__snapshots__/Chip.test.tsx.snap | 192 ++----- .../__snapshots__/DataTable.test.tsx.snap | 95 +--- .../__snapshots__/DrawerItem.test.tsx.snap | 127 +---- .../__tests__/__snapshots__/FAB.test.tsx.snap | 496 ++---------------- .../__snapshots__/FABExtended.test.tsx.snap | 240 ++------- .../__snapshots__/FABMenu.test.tsx.snap | 128 ++--- .../__snapshots__/IconButton.test.tsx.snap | 188 +------ .../__snapshots__/ListAccordion.test.tsx.snap | 52 +- .../__snapshots__/ListItem.test.tsx.snap | 294 ++--------- .../__snapshots__/ListSection.test.tsx.snap | 252 ++------- .../__snapshots__/Menu.test.tsx.snap | 128 +---- .../__snapshots__/MenuItem.test.tsx.snap | 6 +- .../__snapshots__/Searchbar.test.tsx.snap | 151 +----- .../SegmentedButton.test.tsx.snap | 4 +- .../__snapshots__/Snackbar.test.tsx.snap | 2 +- .../__snapshots__/TextInput.test.tsx.snap | 288 ++-------- .../__snapshots__/ToggleButton.test.tsx.snap | 2 +- 34 files changed, 754 insertions(+), 3094 deletions(-) diff --git a/src/components/IconButton/utils.ts b/src/components/IconButton/utils.ts index cbcf5f1051..54e698d1fb 100644 --- a/src/components/IconButton/utils.ts +++ b/src/components/IconButton/utils.ts @@ -61,14 +61,16 @@ const getIconColor = ({ selected, customIconColor, }: BaseProps & { customIconColor?: ColorValue }) => { - if (disabled) { - return theme.colors.onSurface; - } - + // An explicitly passed color is an instruction, so it outranks the disabled + // default. Disabled is still conveyed by the reduced icon opacity. if (typeof customIconColor !== 'undefined') { return customIconColor; } + if (disabled) { + return theme.colors.onSurface; + } + if (isMode('contained')) { if (selected) { return theme.colors.onPrimary; diff --git a/src/components/TextInput/TextInputIcon.tsx b/src/components/TextInput/TextInputIcon.tsx index 4fcd7b6e18..ce8475b33c 100644 --- a/src/components/TextInput/TextInputIcon.tsx +++ b/src/components/TextInput/TextInputIcon.tsx @@ -78,8 +78,6 @@ const TextInputIcon = ({ isDisabled: disabled, }); - const onPressHandler = disabled ? undefined : onPress; - return ( ); diff --git a/src/components/TouchableRipple/TouchableRipple.native.tsx b/src/components/TouchableRipple/TouchableRipple.native.tsx index 513355afa5..de08fa8cc2 100644 --- a/src/components/TouchableRipple/TouchableRipple.native.tsx +++ b/src/components/TouchableRipple/TouchableRipple.native.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Platform, StyleSheet, View } from 'react-native'; +import { Animated, Platform, StyleSheet, View } from 'react-native'; import type { PressableAndroidRippleConfig, StyleProp, @@ -61,7 +61,12 @@ const TouchableRipple = ({ onPressOut, }); - const disabled = disabledProp || !hasPassedTouchHandler; + // With no touch handler and no explicit disabled this is not a control, so it + // renders as a plain View. A Pressable is wrong here either way: keep the old + // disabled flag and it gets announced as a disabled control, drop the flag and + // it starts claiming the touch, swallowing taps meant for whatever wraps it. + const isControl = hasPassedTouchHandler || Boolean(disabledProp); + const isInteractive = hasPassedTouchHandler && !disabledProp; const { calculatedRippleColor, calculatedUnderlayColor } = getTouchableRippleColors({ @@ -78,21 +83,44 @@ const TouchableRipple = ({ const useForeground = Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_PIE; + const containerStyle = TouchableRipple.supported + ? [useForeground && styles.overflowHidden, style] + : [borderless && styles.overflowHidden, style]; + + if (!isControl) { + return ( + , which is tabbable by default. Nothing to activate here. + focusable={rest.focusable ?? false} + style={containerStyle} + > + {React.Children.only(children)} + + ); + } + if (TouchableRipple.supported) { - const androidRipple = rippleEffectEnabled - ? (background ?? { - color: calculatedRippleColor, - borderless, - foreground: useForeground, - }) - : undefined; + const androidRipple = + rippleEffectEnabled && isInteractive + ? (background ?? { + color: calculatedRippleColor, + borderless, + foreground: useForeground, + }) + : undefined; return ( {React.Children.only(children)} @@ -104,12 +132,12 @@ const TouchableRipple = ({ {({ pressed }) => ( <> - {pressed && rippleEffectEnabled && ( + {pressed && rippleEffectEnabled && isInteractive && ( void; /** @@ -129,6 +130,20 @@ const TouchableRipple = ({ const { onPress, onLongPress, onPressIn, onPressOut } = rest; + const hasPassedTouchHandler = hasTouchHandler({ + onPress, + onLongPress, + onPressIn, + onPressOut, + }); + + // With no touch handler and no explicit disabled this is not a control, so it + // renders as a plain View. A Pressable is wrong here either way: keep the old + // disabled flag and it gets announced as a disabled control, drop the flag and + // it starts claiming the touch, swallowing taps meant for whatever wraps it. + const isControl = hasPassedTouchHandler || Boolean(disabledProp); + const isInteractive = hasPassedTouchHandler && !disabledProp; + const handlePressIn = React.useCallback( (e: any) => { onPressIn?.(e); @@ -264,14 +279,32 @@ const TouchableRipple = ({ [onPressOut, rippleEffectEnabled] ); - const hasPassedTouchHandler = hasTouchHandler({ - onPress, - onLongPress, - onPressIn, - onPressOut, - }); - - const disabled = disabledProp || !hasPassedTouchHandler; + if (!isControl) { + const state = { pressed: false, hovered: false, focused: false }; + + return ( + , which is tabbable by default. Nothing to activate here. + focusable={rest.focusable ?? false} + style={[ + styles.touchable, + borderless && styles.borderless, + styles.disabled, + typeof style === 'function' ? style(state) : style, + ]} + > + {React.Children.only( + typeof children === 'function' ? children(state) : children + )} + + ); + } return ( [ styles.touchable, borderless && styles.borderless, // focused state is not ready yet: https://github.com/necolas/react-native-web/issues/1849 // state.focused && { backgroundColor: ___ }, - state.hovered && { backgroundColor: hoverColor }, - disabled && styles.disabled, + state.hovered && isInteractive && { backgroundColor: hoverColor }, + !isInteractive && styles.disabled, typeof style === 'function' ? style(state) : style, ]} > diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap index a5d9d95766..4e88123eae 100644 --- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap +++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap @@ -122,28 +122,11 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` testID="search-bar-icon-container" > @@ -317,7 +284,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -506,7 +473,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -749,7 +716,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx index 4da466837a..2ab8549264 100644 --- a/src/components/__tests__/Button.test.tsx +++ b/src/components/__tests__/Button.test.tsx @@ -91,8 +91,18 @@ it('renders disabled button', async () => { expect(tree).toMatchSnapshot(); }); -it('renders disabled button if there is no touch handler passed', async () => { - await render(); +it('does not mark a button without a touch handler as disabled', async () => { + await render(); + + expect(screen.getByTestId('plain-button')).not.toBeDisabled(); +}); + +it('renders disabled button when the disabled prop is passed', async () => { + await render( + + ); expect(screen.getByTestId('disabled-button')).toBeDisabled(); }); diff --git a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap index 54f2e4f7a4..208b23644d 100644 --- a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -2,55 +2,25 @@ exports[`renders Checkbox with custom testID 1`] = ` @@ -188,55 +158,25 @@ exports[`renders Checkbox with custom testID 1`] = ` exports[`renders checked Checkbox with color 1`] = ` { expect(tree).toMatchSnapshot(); }); -it('renders disabled chip if there is no touch handler passed', async () => { - await render(Disabled chip); +it('does not mark a chip without a touch handler as disabled', async () => { + await render(Plain chip); + + expect(screen.getByTestId('plain-chip')).not.toBeDisabled(); +}); + +it('renders disabled chip when the disabled prop is passed', async () => { + await render( + {}} testID="disabled-chip"> + Disabled chip + + ); expect(screen.getByTestId('disabled-chip')).toBeDisabled(); }); diff --git a/src/components/__tests__/IconButton.test.tsx b/src/components/__tests__/IconButton.test.tsx index b28456c5ce..432f5ef136 100644 --- a/src/components/__tests__/IconButton.test.tsx +++ b/src/components/__tests__/IconButton.test.tsx @@ -97,6 +97,21 @@ describe('getIconButtonColor - icon color', () => { }); }); + it('should keep an explicit icon color when disabled', () => { + expect( + getIconButtonColor({ + theme: getTheme(), + disabled: true, + customIconColor: 'purple', + }) + ).toMatchObject({ + // disabled is still conveyed by the opacity, so it must not silently + // override a color the caller asked for + iconColor: 'purple', + iconOpacity: stateOpacity.disabled, + }); + }); + it('should return correct disabled color, for theme version 3', () => { expect( getIconButtonColor({ diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx index ba66e705a7..6e225276d7 100644 --- a/src/components/__tests__/MenuItem.test.tsx +++ b/src/components/__tests__/MenuItem.test.tsx @@ -54,7 +54,9 @@ describe('Menu Item', () => { }); it('accepts aria-checked prop', async () => { - await render(); + await render( + {}} title="Option 1" /> + ); expect(screen.getByRole('menuitem')).toHaveProp( 'accessibilityState', diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap index c20910f20e..b77c6bc6e0 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap @@ -7,7 +7,7 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -94,7 +94,7 @@ exports[`RadioButton on default platform renders properly 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -180,7 +180,7 @@ exports[`RadioButton on ios platform renders properly 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -266,7 +266,7 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider { "busy": undefined, "checked": true, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap index 1ae7f560be..f04cb343f3 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap @@ -10,7 +10,7 @@ exports[`RadioButtonGroup renders properly 1`] = ` { "busy": undefined, "checked": true, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap index 5867b1408c..e16cb79ab4 100644 --- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap +++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.tsx.snap @@ -7,7 +7,7 @@ exports[`can render leading radio button control 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -61,7 +61,7 @@ exports[`can render leading radio button control 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -185,7 +185,7 @@ exports[`can render the Android radio button on different platforms 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -275,7 +275,7 @@ exports[`can render the Android radio button on different platforms 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -337,7 +337,7 @@ exports[`can render the iOS radio button on different platforms 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -427,7 +427,7 @@ exports[`can render the iOS radio button on different platforms 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -515,7 +515,7 @@ exports[`renders unchecked 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -605,7 +605,7 @@ exports[`renders unchecked 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } diff --git a/src/components/__tests__/TouchableRipple.test.tsx b/src/components/__tests__/TouchableRipple.test.tsx index f3c4cb1168..d264d1cd8a 100644 --- a/src/components/__tests__/TouchableRipple.test.tsx +++ b/src/components/__tests__/TouchableRipple.test.tsx @@ -44,12 +44,69 @@ describe('TouchableRipple', () => { expect(onPress).not.toHaveBeenCalled(); }); + it('is not exposed as a control when no touch handler is passed', async () => { + await render( + + Not a button + + ); + + const plain = screen.getByTestId('plain'); + + expect(plain).not.toBeDisabled(); + // no Pressable underneath, so nothing claims the touch. A responder here + // would swallow taps meant for whatever wraps this, e.g. TextInput's + // press to focus. + expect(plain).not.toHaveProp('onStartShouldSetResponder'); + expect(plain).toHaveProp('focusable', false); + }); + + it('stays a disabled control when the disabled prop is passed', async () => { + await render( + {}}> + Disabled + + ); + + const off = screen.getByTestId('off'); + + expect(off).toBeDisabled(); + expect(off).toHaveProp('focusable', true); + expect(off).toHaveProp('onStartShouldSetResponder'); + }); + + it('does not show press feedback when no touch handler is passed', async () => { + await render( + + Not a button + + ); + + expect( + screen.queryByTestId('touchable-ripple-underlay') + ).not.toBeOnTheScreen(); + }); + + it('does not show press feedback on a disabled control', async () => { + // this one reaches the underlay branch, unlike the handler-less case above + // which returns a plain View before that subtree is ever built + await render( + {}}> + Disabled + + ); + + expect( + screen.queryByTestId('touchable-ripple-underlay') + ).not.toBeOnTheScreen(); + }); + describe('on iOS', () => { Platform.OS = 'ios'; it('displays the underlay when pressed', async () => { await render( - + {}}> Press me! ); @@ -60,7 +117,11 @@ describe('TouchableRipple', () => { it('renders custom underlay color', async () => { await render( - + {}} + > Press me! ); diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap index 4e75db8cc7..9a2862e7f1 100644 --- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap @@ -162,7 +162,7 @@ exports[`render visible banner, with custom theme 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -595,7 +595,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -871,7 +871,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -1023,7 +1023,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap index bbc1fff1be..df4f5278f7 100644 --- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap @@ -42,45 +42,15 @@ exports[`renders button with an accessibility hint 1`] = ` > @@ -195,45 +165,15 @@ exports[`renders button with an accessibility label 1`] = ` testID="button-container" > @@ -347,45 +287,15 @@ exports[`renders button with button color 1`] = ` testID="button-container" > @@ -499,45 +409,15 @@ exports[`renders button with color 1`] = ` testID="button-container" > @@ -651,45 +531,15 @@ exports[`renders button with custom testID 1`] = ` testID="custom:testID-container" > @@ -803,45 +653,15 @@ exports[`renders button with icon 1`] = ` testID="button-container" > @@ -1004,45 +824,15 @@ exports[`renders button with icon in reverse order 1`] = ` testID="button-container" > @@ -1207,45 +997,15 @@ exports[`renders contained contained with mode 1`] = ` testID="button-container" > @@ -1512,45 +1272,15 @@ exports[`renders loading button 1`] = ` testID="button-container" > @@ -1868,45 +1598,15 @@ exports[`renders outlined button with mode 1`] = ` testID="button-container" > @@ -2021,45 +1721,15 @@ exports[`renders text button by default 1`] = ` testID="button-container" > @@ -2173,45 +1843,15 @@ exports[`renders text button with mode 1`] = ` testID="button-container" > diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap index 7bf18dde0e..c3e1c2a0e7 100644 --- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap @@ -41,50 +41,18 @@ exports[`renders chip with close button 1`] = ` testID="chip-container" > @@ -339,50 +307,18 @@ exports[`renders chip with custom close button 1`] = ` testID="chip-container" > @@ -637,50 +573,18 @@ exports[`renders chip with icon 1`] = ` testID="chip-container" > @@ -1162,50 +1066,18 @@ exports[`renders selected chip 1`] = ` testID="chip-container" > diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap index e9bc774f78..075c092386 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap @@ -2,48 +2,15 @@ exports[`DataTable.Cell renders data table cell 1`] = ` @@ -224,46 +194,16 @@ exports[`renders FAB medium size 1`] = ` } > @@ -396,46 +336,16 @@ exports[`renders FAB transitioning to not visible 1`] = ` } > @@ -568,46 +478,16 @@ exports[`renders FAB transitioning to visible 1`] = ` } > @@ -740,47 +620,17 @@ exports[`renders FAB with aria-label 1`] = ` } > @@ -913,46 +763,16 @@ exports[`renders FAB with containerColor and contentColor overrides 1`] = ` } > @@ -1085,46 +905,16 @@ exports[`renders FAB with containerColor override 1`] = ` } > @@ -1257,46 +1047,16 @@ exports[`renders FAB with default props 1`] = ` } > @@ -1429,46 +1189,16 @@ exports[`renders FAB with primary variant 1`] = ` } > @@ -1601,46 +1331,16 @@ exports[`renders FAB with secondary variant 1`] = ` } > @@ -1773,46 +1473,16 @@ exports[`renders FAB with tertiary variant 1`] = ` } > @@ -1945,46 +1615,16 @@ exports[`renders FAB with tonalSecondary variant 1`] = ` } > @@ -2117,46 +1757,16 @@ exports[`renders FAB with tonalTertiary variant 1`] = ` } > diff --git a/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap b/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap index d159f82912..f410fd1ef8 100644 --- a/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FABExtended.test.tsx.snap @@ -53,47 +53,17 @@ exports[`renders extended FAB collapsed 1`] = ` } > @@ -292,47 +262,17 @@ exports[`renders extended FAB expanded 1`] = ` } > @@ -531,47 +471,17 @@ exports[`renders extended FAB large size 1`] = ` } > @@ -770,47 +680,17 @@ exports[`renders extended FAB medium size 1`] = ` } > @@ -1009,47 +889,17 @@ exports[`renders extended FAB not visible 1`] = ` } > @@ -1248,47 +1098,17 @@ exports[`renders extended FAB transitioning to collapsed 1`] = ` } > diff --git a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap index d48d6e3666..b89dfe2f1e 100644 --- a/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/FABMenu.test.tsx.snap @@ -104,7 +104,7 @@ exports[`renders FAB.Menu closed 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -269,7 +269,7 @@ exports[`renders FAB.Menu closed 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -493,48 +493,17 @@ exports[`renders FAB.Menu closed 1`] = ` } /> @@ -789,7 +758,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -954,7 +923,7 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -1178,48 +1147,17 @@ exports[`renders FAB.Menu not expanded when trigger is not visible 1`] = ` } /> @@ -1474,7 +1412,7 @@ exports[`renders FAB.Menu open 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -1639,7 +1577,7 @@ exports[`renders FAB.Menu open 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -1867,7 +1805,7 @@ exports[`renders FAB.Menu open 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -2159,7 +2097,7 @@ exports[`renders FAB.Menu with 6 items 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -2324,7 +2262,7 @@ exports[`renders FAB.Menu with 6 items 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -2489,7 +2427,7 @@ exports[`renders FAB.Menu with 6 items 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -2654,7 +2592,7 @@ exports[`renders FAB.Menu with 6 items 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -2819,7 +2757,7 @@ exports[`renders FAB.Menu with 6 items 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -2984,7 +2922,7 @@ exports[`renders FAB.Menu with 6 items 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -3212,7 +3150,7 @@ exports[`renders FAB.Menu with 6 items 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -3505,7 +3443,7 @@ exports[`renders FAB.Menu with center alignment 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -3670,7 +3608,7 @@ exports[`renders FAB.Menu with center alignment 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -3898,7 +3836,7 @@ exports[`renders FAB.Menu with center alignment 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -4190,7 +4128,7 @@ exports[`renders FAB.Menu with items having icons 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -4384,7 +4322,7 @@ exports[`renders FAB.Menu with items having icons 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -4641,7 +4579,7 @@ exports[`renders FAB.Menu with items having icons 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -4933,7 +4871,7 @@ exports[`renders FAB.Menu with start alignment 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -5098,7 +5036,7 @@ exports[`renders FAB.Menu with start alignment 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -5326,7 +5264,7 @@ exports[`renders FAB.Menu with start alignment 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } diff --git a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap index 731830ff73..1931a0ce2f 100644 --- a/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/IconButton.test.tsx.snap @@ -186,27 +186,10 @@ exports[`renders icon button by default 1`] = ` testID="icon-button-container" > @@ -328,27 +295,10 @@ exports[`renders icon button with color 1`] = ` testID="icon-button-container" > @@ -470,27 +404,10 @@ exports[`renders icon button with size 1`] = ` testID="icon-button-container" > @@ -612,27 +513,10 @@ exports[`renders icon change animated 1`] = ` testID="icon-button-container" > diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap index 66fa6d11e8..580dafa7d5 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.tsx.snap @@ -14,7 +14,7 @@ exports[`renders expanded accordion 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": true, "selected": undefined, } @@ -158,46 +158,14 @@ exports[`renders expanded accordion 1`] = ` @@ -328,46 +296,14 @@ exports[`renders list item with custom description 1`] = ` exports[`renders list item with custom title and description styles 1`] = ` @@ -473,46 +409,14 @@ exports[`renders list item with custom title and description styles 1`] = ` exports[`renders list item with left and right items 1`] = ` @@ -663,46 +567,14 @@ exports[`renders list item with left and right items 1`] = ` exports[`renders list item with left item 1`] = ` @@ -819,46 +691,14 @@ exports[`renders list item with left item 1`] = ` exports[`renders list item with right item 1`] = ` @@ -931,46 +771,14 @@ exports[`renders list item with right item 1`] = ` exports[`renders list item with title and description 1`] = ` @@ -1072,46 +880,14 @@ exports[`renders list item with title and description 1`] = ` exports[`renders with a description with typeof number 1`] = ` diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap index 7e7dcc158c..e4b4168bae 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap @@ -454,46 +454,14 @@ exports[`renders list section with custom title style 1`] = ` Some title @@ -607,46 +575,14 @@ exports[`renders list section with custom title style 1`] = ` @@ -1214,46 +1150,14 @@ exports[`renders list section with subheader 1`] = ` Some title @@ -1367,46 +1271,14 @@ exports[`renders list section with subheader 1`] = ` @@ -1934,46 +1806,14 @@ exports[`renders list section without subheader 1`] = ` } > @@ -2087,46 +1927,14 @@ exports[`renders list section without subheader 1`] = ` diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap index 3e027106ae..1abdb1c261 100644 --- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap @@ -54,45 +54,15 @@ exports[`renders menu with content styles 1`] = ` testID="button-container" > @@ -313,7 +283,7 @@ exports[`renders menu with content styles 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -437,7 +407,7 @@ exports[`renders menu with content styles 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -617,45 +587,15 @@ exports[`renders not visible menu 1`] = ` testID="button-container" > @@ -785,45 +725,15 @@ exports[`renders visible menu 1`] = ` testID="button-container" > @@ -1040,7 +950,7 @@ exports[`renders visible menu 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -1164,7 +1074,7 @@ exports[`renders visible menu 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap index 6977abf932..4f62c2db48 100644 --- a/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/MenuItem.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Menu Item renders menu item 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -171,7 +171,7 @@ exports[`Menu Item renders menu item 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -663,7 +663,7 @@ exports[`Menu Item renders menu item 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap index 29b660cbd9..3bb895a5a1 100644 --- a/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Searchbar.test.tsx.snap @@ -81,28 +81,11 @@ exports[`activity indicator snapshot test 1`] = ` testID="search-bar-icon-container" > @@ -493,28 +460,11 @@ exports[`renders with placeholder 1`] = ` testID="search-bar-icon-container" > @@ -688,7 +622,7 @@ exports[`renders with placeholder 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -866,28 +800,11 @@ exports[`renders with text 1`] = ` testID="search-bar-icon-container" > @@ -1057,7 +958,7 @@ exports[`renders with text 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } diff --git a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap index 4de6f40b6f..b367544b49 100644 --- a/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/SegmentedButton.test.tsx.snap @@ -40,7 +40,7 @@ exports[`renders segmented button 1`] = ` { "busy": undefined, "checked": true, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } @@ -167,7 +167,7 @@ exports[`renders segmented button 1`] = ` { "busy": undefined, "checked": false, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap index 76d4857c89..bf3e8feee8 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap @@ -364,7 +364,7 @@ exports[`renders snackbar with action button 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": undefined, } diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap index c955c943e2..468fc65805 100644 --- a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -188,27 +188,11 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = ` testID="icon-button-container" > @@ -393,27 +361,11 @@ exports[`renders filled TextInput with TextInput.Icon accessories 1`] = ` testID="icon-button-container" > @@ -690,27 +626,11 @@ exports[`renders filled TextInput with TextInput.Icon accessories when error is testID="icon-button-container" > @@ -1369,27 +1273,11 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = ` testID="icon-button-container" > @@ -1574,27 +1446,11 @@ exports[`renders outlined TextInput with TextInput.Icon accessories 1`] = ` testID="icon-button-container" > @@ -1852,27 +1692,11 @@ exports[`renders outlined TextInput with TextInput.Icon accessories when error i testID="icon-button-container" > diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap index 63257435ed..7098347d6a 100644 --- a/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap @@ -188,7 +188,7 @@ exports[`renders toggle button 1`] = ` { "busy": undefined, "checked": undefined, - "disabled": false, + "disabled": undefined, "expanded": undefined, "selected": true, }