Fix async toggle style issue & BpkButton -> BpkButtonV2 in README fil…

…es (#3070) * 1. fix the button toggle issue when is async with reject 2. fix the typo in README.md since the BpkButton has been deprecated * fix lint * remove duplicate code * remove duplicate code
Skyscanner · Nov 7, 2023 · 4040603 · 4040603
1 parent c4479e9
commit 4040603
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 20 deletions.
diff --git a/examples/bpk-component-card-button/examples.tsx b/examples/bpk-component-card-button/examples.tsx
@@ -33,19 +33,34 @@ type Props = {
   checked?: boolean;
   size?: SizeType;
   style?: StyleType;
+  asyncWithError?: boolean;
 };
-const SaveButtonContainer = ({ checked = false, size, style }: Props) => {
+const SaveButtonContainer = ({
+  asyncWithError = false,
+  checked = false,
+  size,
+  style,
+}: Props) => {
   const [checkedStatus, setCheckedStatus] = useState(checked);
 
   const onCheckedChange = () => {
     setCheckedStatus(!checkedStatus);
   };
 
+  const onSyncCheckedChange = async () => {
+    try {
+      await Promise.reject(new Error('mocked example error'));
+      setCheckedStatus(!checkedStatus);
+    } catch (e) {
+      console.log('save button async error: ', e); // eslint-disable-line no-console
+    }
+  };
+
   return (
     <BpkSaveButton
       checked={checkedStatus}
       accessibilityLabel={`Click to ${checkedStatus ? 'remove save' : 'save'}`}
-      onCheckedChange={onCheckedChange}
+      onCheckedChange={asyncWithError ? onSyncCheckedChange : onCheckedChange}
       size={size}
       style={style}
     />
@@ -67,6 +82,10 @@ const OnDarkExample = () => (
 
 const CheckedExample = () => <SaveButtonContainer checked />;
 
+const AsyncWithErrorCheckedExample = () => (
+  <SaveButtonContainer checked asyncWithError />
+);
+
 const SmallDefaultExample = () => (
   <SaveButtonContainer size={SIZE_TYPES.small} />
 );
@@ -114,4 +133,5 @@ export {
   SmallOnDarkExample,
   VisualTestExample,
   SmallCheckedExample,
+  AsyncWithErrorCheckedExample,
 };
diff --git a/examples/bpk-component-card-button/stories.ts b/examples/bpk-component-card-button/stories.ts
@@ -28,6 +28,7 @@ import {
   SmallOnDarkExample,
   VisualTestExample,
   SmallCheckedExample,
+  AsyncWithErrorCheckedExample,
 } from './examples';
 
 export default {
@@ -39,6 +40,7 @@ export const Default = DefaultExample;
 export const Contained = ContainedExample;
 export const OnDark = OnDarkExample;
 export const Checked = CheckedExample;
+export const AsyncWithErrorChecked = AsyncWithErrorCheckedExample;
 export const SmallDefault = SmallDefaultExample;
 export const SmallContained = SmallContainedExample;
 export const SmallOnDark = SmallOnDarkExample;
@@ -47,4 +49,4 @@ export const VisualTest = VisualTestExample;
 export const VisualTestWithZoom = VisualTest.bind({});
 VisualTestWithZoom.args = {
   zoomEnabled: true
-};
+};
diff --git a/packages/bpk-component-button/README.md b/packages/bpk-component-button/README.md
@@ -17,18 +17,18 @@ const AlignedArrowIcon = withButtonAlignment(withRtlSupport(ArrowIcon));
 
 export default () => (
   <div>
-    <BpkButton>Primary</BpkButton>
-    <BpkButton size={SIZE_TYPES.large}>Large primary</BpkButton>
-    <BpkButton type={BUTTON_TYPES.secondary}>Secondary</BpkButton>
-    <BpkButton type={BUTTON_TYPES.secondaryOnDark}>SecondaryOnDark</BpkButton>
-    <BpkButton type={BUTTON_TYPES.link}>Link</BpkButton>
-    <BpkButton type={BUTTON_TYPES.linkOnDark}>LinkOnDark</BpkButton>
-    <BpkButton type={BUTTON_TYPES.primaryOnDark}>PrimaryOnDark</BpkButton>
-    <BpkButton type={BUTTON_TYPES.primaryOnLight}>PrimaryOnLight</BpkButton>
-    <BpkButton iconOnly>
+    <BpkButtonV2>Primary</BpkButtonV2>
+    <BpkButtonV2 size={SIZE_TYPES.large}>Large primary</BpkButtonV2>
+    <BpkButtonV2 type={BUTTON_TYPES.secondary}>Secondary</BpkButtonV2>
+    <BpkButtonV2 type={BUTTON_TYPES.secondaryOnDark}>SecondaryOnDark</BpkButtonV2>
+    <BpkButtonV2 type={BUTTON_TYPES.link}>Link</BpkButtonV2>
+    <BpkButtonV2 type={BUTTON_TYPES.linkOnDark}>LinkOnDark</BpkButtonV2>
+    <BpkButtonV2 type={BUTTON_TYPES.primaryOnDark}>PrimaryOnDark</BpkButtonV2>
+    <BpkButtonV2 type={BUTTON_TYPES.primaryOnLight}>PrimaryOnLight</BpkButtonV2>
+    <BpkButtonV2 iconOnly>
       <AlignedArrowIcon />
       <span className="visually-hidden">Search</span>
-    </BpkButton>
+    </BpkButtonV2>
   </div>
 );
 ```

diff --git a/packages/bpk-component-card-button/src/BpkSaveButton.tsx b/packages/bpk-component-card-button/src/BpkSaveButton.tsx
@@ -19,7 +19,7 @@
 import type { MouseEvent } from 'react';
 import { useState } from 'react';
 
-import { BpkButtonV2 } from '../../bpk-component-button/src/BpkButtonV2/BpkButton';
+import { BpkButtonV2 } from '../../bpk-component-button';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkHeartIcon from '../../bpk-component-icon/lg/heart';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -87,8 +87,10 @@ const BpkSaveButton = ({
         `bpk-save-button__${style}`,
       )}
       onClick={(e: MouseEvent) => {
-        setToggle(true);
         onCheckedChange(e);
+        if (!checked) {
+          setToggle(true);
+        }
       }}
       iconOnly
     >

diff --git a/packages/bpk-component-icon/README.md b/packages/bpk-component-icon/README.md
@@ -38,7 +38,7 @@ export default () => (
 ### Aligning to BpkButton components
 
 ```js
-import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
+import { BpkButtonV2, SIZE_TYPES } from '@skyscanner/backpack-web/bpk-component-button';
 import BpkSmallFlightIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/flight';
 import BpkLargeAccessibilityIcon from '@skyscanner/backpack-web/bpk-component-icon/lg/accessibility';
 import { withButtonAlignment, withLargeButtonAlignment } from '@skyscanner/backpack-web/bpk-component-icon';
@@ -48,12 +48,12 @@ const AlignedBpkLargeAccessibilityIcon = withLargeButtonAlignment(BpkLargeAccess
 
 export default () => (
   <div>
-    <BpkButton>
+    <BpkButtonV2>
       <AlignedBpkSmallFlightIcon />
-    </BpkButton>
-    <BpkButton large>
+    </BpkButtonV2>
+    <BpkButtonV2 size={SIZE_TYPES.large}>
       <AlignedBpkLargeAccessibilityIcon />
-    </BpkButton>
+    </BpkButtonV2>
   </div>
 );
 ```