Refactor Checkbox state props name

maurobender · maurobender · commit 722675abdc47 · 2022-09-20T17:05:26.000+02:00
- Change isSelected prop name to selected.
- Change isIndeterminated prop name to indeterminated.
diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md
@@ -27,7 +27,7 @@ const App = () => {
 	const [ isSelected, setSelected ] = useState( false );
 	return (
 		<Checkbox
-			isSelected={ isSelected }
+			selected={ isSelected }
 			onPress={ () => { setSelected( !isSelected ); } }
 		/>
 	);
@@ -36,7 +36,7 @@ const App = () => {
 
 ## Props
 
-### isSelected
+### selected
 If the checkbox is selected or not.
 
 | TYPE | REQUIRED | DEFAULT |
@@ -46,19 +46,19 @@ If the checkbox is selected or not.
 <CodePreview>
     <HStack>
         <Checkbox />
-        <Checkbox isSelected />
+        <Checkbox selected />
     </HStack>
 </CodePreview>
 
-### isIndeterminated
+### indeterminated
 If the checkbox is indeterminated or not. This is usually used for lists of checkboxes when some of their children are checked but not all of them. This is only a visual state, it only changes the checkbox icon.
 
 | TYPE | REQUIRED | DEFAULT |
 | ---- | -------- | ------- |
 | bool | No       | false   |
 
 <CodePreview>
-    <Checkbox isIndeterminated/>
+    <Checkbox indeterminated/>
 </CodePreview>
 
 ### disabled
@@ -71,8 +71,8 @@ If the checkbox is disabled or not.
 <CodePreview>
     <HStack>
         <Checkbox disabled />
-        <Checkbox disabled isSelected />
-        <Checkbox disabled isIndeterminated />
+        <Checkbox disabled selected />
+        <Checkbox disabled indeterminated />
     </HStack>
 </CodePreview>
 
@@ -101,4 +101,4 @@ Sets the component to an accessibility element. It is set by default to `true`.
 Communicates the purpose of the component. It is set by default to `"checkbox"`.
 
 ### accessibilityState
-Describes the current state of the element. By default, indicates if the `Checkbox` is `disabled`, `isSelected` and `isIndeterminated`.
+Describes the current state of the element. By default, indicates if the `Checkbox` is `disabled`, `selected` and `indeterminated`.
diff --git a/docs/src/components/ExampleCheckbox/index.tsx b/docs/src/components/ExampleCheckbox/index.tsx
@@ -5,7 +5,7 @@ const ExampleCheckbox = () => {
 	const [ isSelected, setSelected ] = useState( false );
 	return (
 		<Checkbox
-			isSelected={ isSelected }
+			selected={ isSelected }
 			onPress={ () => { setSelected( !isSelected ); } }
 		/>
 	);
diff --git a/example/src/components/CheckboxExamples.tsx b/example/src/components/CheckboxExamples.tsx
@@ -48,8 +48,8 @@ const CheckboxExamples = () => {
 
 			<HStack>
 				<Checkbox />
-				<Checkbox isSelected />
-				<Checkbox isIndeterminated />
+				<Checkbox selected />
+				<Checkbox indeterminated />
 			</HStack>
 
 			<View style={styles.vspace} />
@@ -58,16 +58,16 @@ const CheckboxExamples = () => {
 
 			<HStack>
 				<Checkbox disabled />
-				<Checkbox disabled isSelected />
-				<Checkbox disabled isIndeterminated />
+				<Checkbox disabled selected />
+				<Checkbox disabled indeterminated />
 			</HStack>
 
 			<View style={styles.vspace} />
 			<Text variant="sh1" color="primary.800">On Change</Text>
 			<View style={styles.separator} />
 
 			<HStack>
-				<Checkbox isSelected={isSelected} isIndeterminated={isIndeterminated} onPress={onPressed}/>
+				<Checkbox selected={isSelected} indeterminated={isIndeterminated} onPress={onPressed}/>
 			</HStack>
 
 			<View style={styles.vspace} />
@@ -77,10 +77,10 @@ const CheckboxExamples = () => {
 
 			<VStack alignItems="flex-start" justifyContent="flex-start" alignContent="flex-start" space="0">
 				<Checkbox label="Unselected" />
-				<Checkbox label="Selected" isSelected />
-				<Checkbox label="Indeterminated" isIndeterminated />
+				<Checkbox label="Selected" selected />
+				<Checkbox label="Indeterminated" indeterminated />
 				<Checkbox label="Disabled" disabled />
-				<Checkbox label="Controlled" isSelected={isSelected} isIndeterminated={isIndeterminated} onPress={onPressed}/>
+				<Checkbox label="Controlled" selected={isSelected} indeterminated={isIndeterminated} onPress={onPressed}/>
 			</VStack>
 
 			<View style={styles.vspace} />
diff --git a/src/components/main/Checkbox/hooks.ts b/src/components/main/Checkbox/hooks.ts
@@ -16,8 +16,8 @@ interface IUseCheckboxPropsResolverReturnType {
 }
 
 export const useCheckboxPropsResolver = ( {
-	isSelected = false,
-	isIndeterminated = false,
+	selected = false,
+	indeterminated = false,
 	...props
 } : ICheckboxProps
 ): IUseCheckboxPropsResolverReturnType => {
@@ -27,13 +27,13 @@ export const useCheckboxPropsResolver = ( {
 	const { isFocused, onFocus, onBlur } = useIsFocused( props );
 
 	const state = useMemo( () => ( {
-		isSelected,
-		isIndeterminated,
+		isSelected: selected,
+		isIndeterminated: indeterminated,
 		isDisabled: disabled || false,
 		isPressed,
 		isHovered,
 		isFocused
-	} ), [ isSelected, isIndeterminated, disabled, isPressed, isHovered, isFocused ] );
+	} ), [ selected, indeterminated, disabled, isPressed, isHovered, isFocused ] );
 
 	const {
 		__icon: iconProps,
diff --git a/src/components/main/Checkbox/index.tsx b/src/components/main/Checkbox/index.tsx
@@ -14,17 +14,17 @@ const defaultUncheckedIcon = <Icon as={UIKitIcon} name="box-unchecked" />;
 
 const defaultIndeterminatedIcon = <Icon as={UIKitIcon} name="box-indeterminated" />;
 
-const selectIcon = ( isSelected: boolean, isIndeterminated: boolean, checkedIcon: JSX.Element,
+const selectIcon = ( selected: boolean, indeterminated: boolean, checkedIcon: JSX.Element,
 	uncheckedIcon: JSX.Element, indeterminatedIcon: JSX.Element ) => {
-	if ( isIndeterminated ) return indeterminatedIcon;
-	if ( isSelected ) return checkedIcon;
+	if ( indeterminated ) return indeterminatedIcon;
+	if ( selected ) return checkedIcon;
 	return uncheckedIcon;
 };
 
 const Checkbox = ( {
 	label,
-	isSelected = false,
-	isIndeterminated = false,
+	selected = false,
+	indeterminated = false,
 	checkedIcon = defaultCheckedIcon,
 	uncheckedIcon = defaultUncheckedIcon,
 	indeterminatedIcon = defaultIndeterminatedIcon,
@@ -37,12 +37,12 @@ const Checkbox = ( {
 		labelProps,
 		containerProps
 	} = useCheckboxPropsResolver( {
-		isIndeterminated, isSelected, ...props
+		indeterminated, selected, ...props
 	} );
 
 	const icon = selectIcon(
-		isSelected,
-		isIndeterminated,
+		selected,
+		indeterminated,
 		checkedIcon,
 		uncheckedIcon,
 		indeterminatedIcon );
@@ -53,7 +53,7 @@ const Checkbox = ( {
 			accessibilityRole='checkbox'
 			accessibilityLabel={label}
 			accessibilityState={{
-				checked: isIndeterminated ? 'mixed' : isSelected,
+				checked: indeterminated ? 'mixed' : selected,
 				disabled: props.disabled || false
 			}}
 			testID={testID}
diff --git a/src/components/main/Checkbox/types.ts b/src/components/main/Checkbox/types.ts
@@ -5,18 +5,22 @@ export interface ICheckboxProps extends Omit<PressableProps, 'children'>,
 	ComponentStyledProps<'Checkbox'>
 {
 	label?: string,
+
+	selected?: boolean,
+	indeterminated?: boolean,
+	disabled?: boolean,
+
+	checkedIcon?: JSX.Element,
+	uncheckedIcon?: JSX.Element,
+	indeterminatedIcon?: JSX.Element
+
+	outlineStyle?: string,
+
 	onPress?: PressableProps['onPress'],
 	onPressOut?: PressableProps['onPressOut'],
 	onPressIn?: PressableProps['onPressIn'],
 	onFocus?: PressableProps['onFocus'],
 	onBlur?: PressableProps['onBlur'],
 	onHoverIn?: ( ( event: GestureResponderEvent ) => void ),
 	onHoverOut?: ( ( event: GestureResponderEvent ) => void ),
-	outlineStyle?: string,
-	disabled?: boolean,
-	isSelected?: boolean,
-	isIndeterminated?: boolean,
-	checkedIcon?: JSX.Element,
-	uncheckedIcon?: JSX.Element,
-	indeterminatedIcon?: JSX.Element
 }
diff --git a/tests/components/main/Checkbox.test.js b/tests/components/main/Checkbox.test.js
@@ -54,13 +54,13 @@ describe( 'Checkbox', () => {
 	} );
 
 	it( 'applies the __selected styles when it is selected', () => {
-		const { getByTestId, debug } = renderComponent( { isSelected: true } );
+		const { getByTestId } = renderComponent( { selected: true } );
 		expect( getByTestId( 'test-checkbox-icon' ) ).toHaveStyle( { borderColor: '#4F80FF' } );
 		accessibilityTest( { getByTestId, checked: true } );
 	} );
 
 	it( 'applies the __indeterminated styles when it is indeterminated', () => {
-		const { getByTestId } = renderComponent( { isIndeterminated: true } );
+		const { getByTestId } = renderComponent( { indeterminated: true } );
 		expect( getByTestId( 'test-checkbox-icon' ) ).toHaveStyle( { borderColor: '#4F80FF' } );
 		accessibilityTest( { getByTestId, checked: 'mixed' } );
 	} );
diff --git a/web_example/src/components/CheckboxExamples.tsx b/web_example/src/components/CheckboxExamples.tsx
@@ -47,8 +47,8 @@ const CheckboxExamples = () => {
 
 			<HStack>
 				<Checkbox />
-				<Checkbox isSelected />
-				<Checkbox isIndeterminated />
+				<Checkbox selected />
+				<Checkbox indeterminated />
 			</HStack>
 
 			<View style={styles.vspace} />
@@ -57,16 +57,16 @@ const CheckboxExamples = () => {
 
 			<HStack>
 				<Checkbox disabled />
-				<Checkbox disabled isSelected />
-				<Checkbox disabled isIndeterminated />
+				<Checkbox disabled selected />
+				<Checkbox disabled indeterminated />
 			</HStack>
 
 			<View style={styles.vspace} />
 			<Text variant="sh1" color="primary.800">On Focus</Text>
 			<View style={styles.separator} />
 
 			<HStack>
-				<Checkbox isSelected
+				<Checkbox selected
 					__focused={{
 						bg: 'secondary.10',
 						borderWidth: '1'
@@ -78,9 +78,9 @@ const CheckboxExamples = () => {
 			<View style={styles.separator} />
 
 			<HStack alignItems="center" space="3">
-				<Checkbox isSelected={isSelected} isIndeterminated={isIndeterminated} onPress={onPressed}/>
+				<Checkbox selected={isSelected} indeterminated={isIndeterminated} onPress={onPressed}/>
 				<Text>|</Text>
-				<Checkbox isSelected={isSelected} isIndeterminated={isIndeterminated} onPress={onPressed} label="With label" />
+				<Checkbox selected={isSelected} indeterminated={isIndeterminated} onPress={onPressed} label="With label" />
 			</HStack>
 
 			<View style={styles.vspace} />
@@ -91,14 +91,14 @@ const CheckboxExamples = () => {
 			<VStack alignItems="flex-start" space="2">
 				<HStack justifyContent="space-between" width="100%">
 					<Checkbox label="Unselected" />
-					<Checkbox label="Selected" isSelected />
-					<Checkbox label="Indeterminated" isIndeterminated />
+					<Checkbox label="Selected" selected />
+					<Checkbox label="Indeterminated" indeterminated />
 				</HStack>
 
 				<HStack justifyContent="space-between" width="100%">
 					<Checkbox disabled label="Unselected" />
-					<Checkbox disabled label="Selected" isSelected />
-					<Checkbox disabled label="Indeterminated" isIndeterminated />
+					<Checkbox disabled label="Selected" selected />
+					<Checkbox disabled label="Indeterminated" indeterminated />
 				</HStack>
 			</VStack>
 
