From 9955f117aff20002b84822c1e7d97d116d37d428 Mon Sep 17 00:00:00 2001 From: Jimmy Cook Date: Wed, 8 Oct 2025 16:13:23 +0100 Subject: [PATCH 01/42] fix issue with carousel alignment --- .../BpkCardListCarousel.module.scss | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss index 4895f264f0..290cbfb541 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss @@ -62,17 +62,16 @@ @include breakpoints.bpk-breakpoint-mobile { // On mobile, if there is more than one card in the viewport, the last card only shows partially, so subtract 0.8 when do the calculation - flex: 0 0 - calc( - ( - 100% - - ( - tokens.bpk-spacing-md() * - (var(--initially-shown-cards, 3) - 1) - ) - ) / - max(1, (var(--initially-shown-cards, 3) - 0.8)) - ); + flex-basis: calc( + ( + 100% - + ( + tokens.bpk-spacing-md() * + (var(--initially-shown-cards, 3) - 1) + ) + ) / + max(1, (var(--initially-shown-cards, 3) - 0.8)) + ); &:first-child { padding-left: tokens.bpk-spacing-sm(); @@ -86,6 +85,20 @@ } } + &__row { + margin-inline: -1 * tokens.bpk-spacing-md(); + + &__card { + flex-basis: calc( + ( + 100% - + (tokens.bpk-spacing-sm() * (var(--initially-shown-cards, 3) - 1)) + ) / + var(--initially-shown-cards, 3) + ); + } + } + &__rail { -webkit-overflow-scrolling: touch; } From 83a293f8872747e3cf2ced77db3c7c1b8849d031 Mon Sep 17 00:00:00 2001 From: Vincent Liu Date: Sat, 11 Oct 2025 18:10:10 +0800 Subject: [PATCH 02/42] Fix issue with carousel alignment on mobile --- .../BpkCardListCarousel.module.scss | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss index 290cbfb541..2306aba72a 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss @@ -29,6 +29,7 @@ overflow-x: hidden; box-sizing: border-box; gap: tokens.bpk-spacing-sm(); + margin-inline: -1 * tokens.bpk-spacing-md(); scroll-snap-stop: always; scroll-snap-type: x mandatory; scrollbar-width: none; @@ -72,22 +73,11 @@ ) / max(1, (var(--initially-shown-cards, 3) - 0.8)) ); - - &:first-child { - padding-left: tokens.bpk-spacing-sm(); - - @include utils.bpk-rtl { - padding-right: tokens.bpk-spacing-sm(); - padding-left: tokens.bpk-spacing-md(); - } - } } } } &__row { - margin-inline: -1 * tokens.bpk-spacing-md(); - &__card { flex-basis: calc( ( From eaf2cbe9175ca8019ea76f643f71a3450185754c Mon Sep 17 00:00:00 2001 From: Vincent Liu Date: Mon, 13 Oct 2025 18:32:57 +0800 Subject: [PATCH 03/42] optimize mobile left space and the code itself --- .../BpkCardListCarousel.module.scss | 32 ++++++------------- 1 file changed, 9 insertions(+), 23 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss index 2306aba72a..a8f42abf9d 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss @@ -37,6 +37,7 @@ @include breakpoints.bpk-breakpoint-mobile { padding-bottom: tokens.bpk-spacing-base(); overflow-x: scroll; + margin-inline-end: 0; } &::-webkit-scrollbar { @@ -46,17 +47,14 @@ &__card { position: relative; padding: 0 tokens.bpk-spacing-md(); - flex: 0 0 - calc( - ( - 100% - - ( - tokens.bpk-spacing-md() * - (var(--initially-shown-cards, 3) - 1) - ) - ) / - var(--initially-shown-cards, 3) - ); + flex-shrink: 0; + flex-basis: calc( + ( + 100% - + (tokens.bpk-spacing-sm() * (var(--initially-shown-cards, 3) - 1)) + ) / + var(--initially-shown-cards, 3) + ); overflow: visible; box-sizing: border-box; scroll-snap-align: start; @@ -77,18 +75,6 @@ } } - &__row { - &__card { - flex-basis: calc( - ( - 100% - - (tokens.bpk-spacing-sm() * (var(--initially-shown-cards, 3) - 1)) - ) / - var(--initially-shown-cards, 3) - ); - } - } - &__rail { -webkit-overflow-scrolling: touch; } From 411c6f98751634f53fc50f3c36f5e2f9faaab9ef Mon Sep 17 00:00:00 2001 From: Irina-Wei Date: Mon, 10 Nov 2025 13:41:10 +0800 Subject: [PATCH 04/42] Revert "optimize mobile left space and the code itself" This reverts commit eaf2cbe9175ca8019ea76f643f71a3450185754c. --- .../BpkCardListCarousel.module.scss | 32 +++++++++++++------ 1 file changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss index a8f42abf9d..2306aba72a 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss @@ -37,7 +37,6 @@ @include breakpoints.bpk-breakpoint-mobile { padding-bottom: tokens.bpk-spacing-base(); overflow-x: scroll; - margin-inline-end: 0; } &::-webkit-scrollbar { @@ -47,14 +46,17 @@ &__card { position: relative; padding: 0 tokens.bpk-spacing-md(); - flex-shrink: 0; - flex-basis: calc( - ( - 100% - - (tokens.bpk-spacing-sm() * (var(--initially-shown-cards, 3) - 1)) - ) / - var(--initially-shown-cards, 3) - ); + flex: 0 0 + calc( + ( + 100% - + ( + tokens.bpk-spacing-md() * + (var(--initially-shown-cards, 3) - 1) + ) + ) / + var(--initially-shown-cards, 3) + ); overflow: visible; box-sizing: border-box; scroll-snap-align: start; @@ -75,6 +77,18 @@ } } + &__row { + &__card { + flex-basis: calc( + ( + 100% - + (tokens.bpk-spacing-sm() * (var(--initially-shown-cards, 3) - 1)) + ) / + var(--initially-shown-cards, 3) + ); + } + } + &__rail { -webkit-overflow-scrolling: touch; } From 1b6a74dacb57dbdb015aee11970ba46089f78ba2 Mon Sep 17 00:00:00 2001 From: Irina-Wei Date: Mon, 10 Nov 2025 13:41:29 +0800 Subject: [PATCH 05/42] Revert "Fix issue with carousel alignment on mobile" This reverts commit 83a293f8872747e3cf2ced77db3c7c1b8849d031. --- .../BpkCardListCarousel.module.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss index 2306aba72a..290cbfb541 100644 --- a/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss +++ b/packages/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.scss @@ -29,7 +29,6 @@ overflow-x: hidden; box-sizing: border-box; gap: tokens.bpk-spacing-sm(); - margin-inline: -1 * tokens.bpk-spacing-md(); scroll-snap-stop: always; scroll-snap-type: x mandatory; scrollbar-width: none; @@ -73,11 +72,22 @@ ) / max(1, (var(--initially-shown-cards, 3) - 0.8)) ); + + &:first-child { + padding-left: tokens.bpk-spacing-sm(); + + @include utils.bpk-rtl { + padding-right: tokens.bpk-spacing-sm(); + padding-left: tokens.bpk-spacing-md(); + } + } } } } &__row { + margin-inline: -1 * tokens.bpk-spacing-md(); + &__card { flex-basis: calc( ( From 5faabb5b6b5e8ebada04de8e5d15ffa1b0a17ce3 Mon Sep 17 00:00:00 2001 From: Ezreal Yang Date: Tue, 11 Nov 2025 16:38:19 +0800 Subject: [PATCH 06/42] [CLOV-951][BpkButton] Mark BpkButton v1 as deprecated (#4039) --- packages/bpk-component-button/BpkButtonDestructive.tsx | 5 +++++ packages/bpk-component-button/BpkButtonFeatured.tsx | 5 +++++ packages/bpk-component-button/BpkButtonLink.tsx | 5 +++++ packages/bpk-component-button/BpkButtonLinkOnDark.tsx | 5 +++++ packages/bpk-component-button/BpkButtonPrimary.tsx | 5 +++++ packages/bpk-component-button/BpkButtonPrimaryOnDark.tsx | 5 +++++ packages/bpk-component-button/BpkButtonPrimaryOnLight.tsx | 5 +++++ packages/bpk-component-button/BpkButtonSecondary.tsx | 5 +++++ packages/bpk-component-button/BpkButtonSecondaryOnDark.tsx | 5 +++++ packages/bpk-component-button/README.md | 4 ++++ packages/bpk-component-button/src/BpkButton.tsx | 5 +++++ 11 files changed, 54 insertions(+) diff --git a/packages/bpk-component-button/BpkButtonDestructive.tsx b/packages/bpk-component-button/BpkButtonDestructive.tsx index a6266c941a..baf6e45c58 100644 --- a/packages/bpk-component-button/BpkButtonDestructive.tsx +++ b/packages/bpk-component-button/BpkButtonDestructive.tsx @@ -18,5 +18,10 @@ import BpkButton, {type Props} from './src/BpkButton'; +/** + * @deprecated BpkButtonDestructive is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.destructive} instead. + * @param {Props} props - Component props + * @returns {JSX.Element} Destructive button component + */ const BpkButtonDestructive = (props: Props) => export default BpkButtonDestructive; diff --git a/packages/bpk-component-button/BpkButtonFeatured.tsx b/packages/bpk-component-button/BpkButtonFeatured.tsx index bab23ac7ce..70505f2946 100644 --- a/packages/bpk-component-button/BpkButtonFeatured.tsx +++ b/packages/bpk-component-button/BpkButtonFeatured.tsx @@ -18,5 +18,10 @@ import BpkButton, {type Props} from './src/BpkButton'; +/** + * @deprecated BpkButtonFeatured is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.featured} instead. + * @param {Props} props - Component props + * @returns {JSX.Element} Featured button component + */ const BpkButtonFeatured = (props: Props) => export default BpkButtonFeatured; diff --git a/packages/bpk-component-button/BpkButtonLink.tsx b/packages/bpk-component-button/BpkButtonLink.tsx index b60e1cb930..dce4f74c23 100644 --- a/packages/bpk-component-button/BpkButtonLink.tsx +++ b/packages/bpk-component-button/BpkButtonLink.tsx @@ -18,5 +18,10 @@ import BpkButton, {type Props} from './src/BpkButton'; +/** + * @deprecated BpkButtonLink is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.link} instead. + * @param {Props} props - Component props + * @returns {JSX.Element} Link button component + */ const BpkButtonLink = (props: Props) => export default BpkButtonLink; diff --git a/packages/bpk-component-button/BpkButtonLinkOnDark.tsx b/packages/bpk-component-button/BpkButtonLinkOnDark.tsx index 781b6056b4..e097b0938c 100644 --- a/packages/bpk-component-button/BpkButtonLinkOnDark.tsx +++ b/packages/bpk-component-button/BpkButtonLinkOnDark.tsx @@ -17,5 +17,10 @@ */ import BpkButton, {type Props} from './src/BpkButton'; +/** + * @deprecated BpkButtonLinkOnDark is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.linkOnDark} instead. + * @param {Props} props - Component props + * @returns {JSX.Element} Link on dark button component + */ const BpkButtonLinkOnDark = (props: Props) => export default BpkButtonLinkOnDark; diff --git a/packages/bpk-component-button/BpkButtonPrimary.tsx b/packages/bpk-component-button/BpkButtonPrimary.tsx index 060dfc4282..253a7ec663 100644 --- a/packages/bpk-component-button/BpkButtonPrimary.tsx +++ b/packages/bpk-component-button/BpkButtonPrimary.tsx @@ -18,5 +18,10 @@ import BpkButton, {type Props} from './src/BpkButton'; +/** + * @deprecated BpkButtonPrimary is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.primary} instead. + * @param {Props} props - Component props + * @returns {JSX.Element} Primary button component + */ const BpkButtonPrimary = (props: Props) => export default BpkButtonPrimary; diff --git a/packages/bpk-component-button/BpkButtonPrimaryOnDark.tsx b/packages/bpk-component-button/BpkButtonPrimaryOnDark.tsx index 0ecb4b6d07..3ec6e76477 100644 --- a/packages/bpk-component-button/BpkButtonPrimaryOnDark.tsx +++ b/packages/bpk-component-button/BpkButtonPrimaryOnDark.tsx @@ -18,5 +18,10 @@ import BpkButton, {type Props} from './src/BpkButton'; +/** + * @deprecated BpkButtonPrimaryOnDark is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.primaryOnDark} instead. + * @param {Props} props - Component props + * @returns {JSX.Element} Primary on dark button component + */ const BpkButtonPrimaryOnDark = (props: Props) => export default BpkButtonPrimaryOnDark; diff --git a/packages/bpk-component-button/BpkButtonPrimaryOnLight.tsx b/packages/bpk-component-button/BpkButtonPrimaryOnLight.tsx index 2c7f10a0f8..8be2eb1bd9 100644 --- a/packages/bpk-component-button/BpkButtonPrimaryOnLight.tsx +++ b/packages/bpk-component-button/BpkButtonPrimaryOnLight.tsx @@ -18,5 +18,10 @@ import BpkButton, {type Props} from './src/BpkButton'; +/** + * @deprecated BpkButtonPrimaryOnLight is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.primaryOnLight} instead. + * @param {Props} props - Component props + * @returns {JSX.Element} Primary on light button component + */ const BpkButtonPrimaryOnLight = (props: Props) => export default BpkButtonPrimaryOnLight; diff --git a/packages/bpk-component-button/BpkButtonSecondary.tsx b/packages/bpk-component-button/BpkButtonSecondary.tsx index 3b8027ead5..faaf6f73d1 100644 --- a/packages/bpk-component-button/BpkButtonSecondary.tsx +++ b/packages/bpk-component-button/BpkButtonSecondary.tsx @@ -18,5 +18,10 @@ import BpkButton, {type Props} from './src/BpkButton'; +/** + * @deprecated BpkButtonSecondary is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.secondary} instead. + * @param {Props} props - Component props + * @returns {JSX.Element} Secondary button component + */ const BpkButtonSecondary = (props: Props) => export default BpkButtonSecondary; diff --git a/packages/bpk-component-button/BpkButtonSecondaryOnDark.tsx b/packages/bpk-component-button/BpkButtonSecondaryOnDark.tsx index cd504e0dd0..4f8762560c 100644 --- a/packages/bpk-component-button/BpkButtonSecondaryOnDark.tsx +++ b/packages/bpk-component-button/BpkButtonSecondaryOnDark.tsx @@ -18,5 +18,10 @@ import BpkButton, {type Props} from './src/BpkButton'; +/** + * @deprecated BpkButtonSecondaryOnDark is deprecated and will be removed in a future major version. Please use BpkButtonV2 with type={BUTTON_TYPES.secondaryOnDark} instead. + * @param {Props} props - Component props + * @returns {JSX.Element} Secondary on dark button component + */ const BpkButtonSecondaryOnDark = (props: Props) => export default BpkButtonSecondaryOnDark; diff --git a/packages/bpk-component-button/README.md b/packages/bpk-component-button/README.md index 0e4f2ff552..a5138ed541 100644 --- a/packages/bpk-component-button/README.md +++ b/packages/bpk-component-button/README.md @@ -2,6 +2,10 @@ > Backpack button component. +# 👻 BpkButton (V1) has been deprecated, and usages should be replaced with BpkButtonV2 + +The legacy `BpkButton` component and all its variants (`BpkButtonPrimary`, `BpkButtonSecondary`, etc.) are deprecated and will be removed in a future major version. Please migrate to `BpkButtonV2` using the migration guide. + ## Installation Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide. diff --git a/packages/bpk-component-button/src/BpkButton.tsx b/packages/bpk-component-button/src/BpkButton.tsx index 7633896e94..7641bb2524 100644 --- a/packages/bpk-component-button/src/BpkButton.tsx +++ b/packages/bpk-component-button/src/BpkButton.tsx @@ -34,6 +34,11 @@ export type Props = CommonProps & { linkOnDark?: boolean; }; +/** + * @deprecated BpkButton is deprecated and will be removed in a future major version. Please use BpkButtonV2 instead. + * @param {Props} props - Component props + * @returns {JSX.Element} Button component + */ const BpkButton = ({ destructive = false, featured = false, From d82cb992cb09562574f972f21292bb98659d7895 Mon Sep 17 00:00:00 2001 From: Ezreal Yang Date: Mon, 17 Nov 2025 14:26:14 +0800 Subject: [PATCH 07/42] [CLOV-964][BpkButton] Export legacy props and types (#4044) * [CLOV-964] Export legacy props and types * lint --- packages/bpk-component-button/index.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/bpk-component-button/index.ts b/packages/bpk-component-button/index.ts index 332c2fa37a..fe22b9e3e6 100644 --- a/packages/bpk-component-button/index.ts +++ b/packages/bpk-component-button/index.ts @@ -28,7 +28,13 @@ import BpkButtonSecondaryOnDark from './BpkButtonSecondaryOnDark'; import BpkButton from './src/BpkButton'; import { BpkButtonV2 } from './src/BpkButtonV2/BpkButton'; -export { BUTTON_TYPES, SIZE_TYPES } from './src/BpkButtonV2/common-types'; +export { + BUTTON_TYPES, + SIZE_TYPES, + type ButtonType, + type SizeType, + type Props, +} from './src/BpkButtonV2/common-types'; export { buttonThemeAttributes, From 9af966d05fe9cdbf676d9167098b8042e6c7d1dd Mon Sep 17 00:00:00 2001 From: IrinaWei Date: Wed, 19 Nov 2025 11:24:23 +0800 Subject: [PATCH 08/42] [CLOV-30][BpkCheckbox] TS migration for BpkCheckbox (#4040) * BpkCheckbox is migrated to Typescirpt now and export type BpkCheckboxProps --- examples/bpk-component-accordion/examples.tsx | 1 - .../{examples.js => examples.tsx} | 30 ++++----- .../{stories.js => stories.tsx} | 13 ++-- .../{index.js => index.ts} | 7 +- ...kCheckbox-test.js => BpkCheckbox-test.tsx} | 4 +- .../src/{BpkCheckbox.js => BpkCheckbox.tsx} | 66 +++++++------------ ...test.js.snap => BpkCheckbox-test.tsx.snap} | 0 ...ibility-test.js => accessibility-test.tsx} | 4 +- .../src/{form-test.js => form-test.tsx} | 11 ++-- ...ibutes-test.js => themeAttributes-test.ts} | 4 +- ...{themeAttributes.js => themeAttributes.ts} | 4 +- 11 files changed, 64 insertions(+), 80 deletions(-) rename examples/bpk-component-checkbox/{examples.js => examples.tsx} (90%) rename examples/bpk-component-checkbox/{stories.js => stories.tsx} (92%) rename packages/bpk-component-checkbox/{index.js => index.ts} (86%) rename packages/bpk-component-checkbox/src/{BpkCheckbox-test.js => BpkCheckbox-test.tsx} (99%) rename packages/bpk-component-checkbox/src/{BpkCheckbox.js => BpkCheckbox.tsx} (73%) rename packages/bpk-component-checkbox/src/__snapshots__/{BpkCheckbox-test.js.snap => BpkCheckbox-test.tsx.snap} (100%) rename packages/bpk-component-checkbox/src/{accessibility-test.js => accessibility-test.tsx} (98%) rename packages/bpk-component-checkbox/src/{form-test.js => form-test.tsx} (91%) rename packages/bpk-component-checkbox/src/{themeAttributes-test.js => themeAttributes-test.ts} (97%) rename packages/bpk-component-checkbox/src/{themeAttributes.js => themeAttributes.ts} (97%) diff --git a/examples/bpk-component-accordion/examples.tsx b/examples/bpk-component-accordion/examples.tsx index f7f787a1ae..cff4f4f953 100644 --- a/examples/bpk-component-accordion/examples.tsx +++ b/examples/bpk-component-accordion/examples.tsx @@ -30,7 +30,6 @@ import { BpkAccordionItem, withAccordionItemState, } from '../../packages/bpk-component-accordion'; -// @ts-expect-error Untyped import - see `decisions/imports-ts-suppressions.md`. import BpkCheckbox from '../../packages/bpk-component-checkbox'; import { withAlignment } from '../../packages/bpk-component-icon'; import StopsIcon from '../../packages/bpk-component-icon/sm/stops'; diff --git a/examples/bpk-component-checkbox/examples.js b/examples/bpk-component-checkbox/examples.tsx similarity index 90% rename from examples/bpk-component-checkbox/examples.js rename to examples/bpk-component-checkbox/examples.tsx index 6869e8f427..7f25337fb3 100644 --- a/examples/bpk-component-checkbox/examples.js +++ b/examples/bpk-component-checkbox/examples.tsx @@ -16,37 +16,32 @@ * limitations under the License. */ -/* @flow strict */ - import { Component } from 'react'; +import type { ComponentProps } from 'react'; import BpkCheckbox from '../../packages/bpk-component-checkbox'; -import { - action, - BpkDarkExampleWrapper, -} from '../bpk-storybook-utils'; +// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`. +import { action, BpkDarkExampleWrapper } from '../bpk-storybook-utils'; const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem dolores doloremque, expedita quaerat temporibus ipsam, ut, ipsa, velit sed assumenda suscipit dolore quod similique delectus numquam neque! Nesciunt, voluptate, illo.`; -type Props = { - isChecked: boolean, +type CheckboxProps = ComponentProps; + +type Props = CheckboxProps & { + isChecked?: boolean; }; type State = { - isChecked: boolean, + isChecked: boolean; }; class StatefulCheckbox extends Component { - static defaultProps = { - isChecked: false, - }; - constructor(props: Props) { super(props); this.state = { - isChecked: props.isChecked, + isChecked: props.isChecked ?? false, }; } @@ -54,18 +49,17 @@ class StatefulCheckbox extends Component { this.setState((prevState) => ({ isChecked: !prevState.isChecked, })); - // $FlowFixMe[incompatible-type] - ignoring as purely for storybook action(`Checkbox changed. Checked is now '${this.state.isChecked}'`); }; render() { + const { isChecked: _ignored, ...rest } = this.props; return (
- {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
); @@ -126,7 +120,7 @@ const SmallLabelRequiredExample = () => ( name="abisko" label="Backpack is the best design system" smallLabel - isRequired + required /> ); diff --git a/examples/bpk-component-checkbox/stories.js b/examples/bpk-component-checkbox/stories.tsx similarity index 92% rename from examples/bpk-component-checkbox/stories.js rename to examples/bpk-component-checkbox/stories.tsx index f0754bf0a6..01c917b108 100644 --- a/examples/bpk-component-checkbox/stories.js +++ b/examples/bpk-component-checkbox/stories.tsx @@ -16,7 +16,6 @@ * limitations under the License. */ - import BpkCheckbox from '../../packages/bpk-component-checkbox/src/BpkCheckbox'; import { @@ -46,7 +45,11 @@ export const Required = RequiredExample; export const SmallLabel = SmallLabelExample; export const VisualTest = MixedExample; -export const VisualTestWithZoom = VisualTest.bind({}); -VisualTestWithZoom.args = { - zoomEnabled: true -}; \ No newline at end of file +export const VisualTestWithZoom = { + render: VisualTest, + args: { + zoomEnabled: true + }, +}; + + diff --git a/packages/bpk-component-checkbox/index.js b/packages/bpk-component-checkbox/index.ts similarity index 86% rename from packages/bpk-component-checkbox/index.js rename to packages/bpk-component-checkbox/index.ts index 840a9da9d6..8c20cd6077 100644 --- a/packages/bpk-component-checkbox/index.js +++ b/packages/bpk-component-checkbox/index.ts @@ -16,10 +16,11 @@ * limitations under the License. */ -/* @flow strict */ - -import BpkCheckbox from './src/BpkCheckbox'; +import BpkCheckbox, { type Props as BpkCheckboxProps } from './src/BpkCheckbox'; import themeAttributes from './src/themeAttributes'; +export type { BpkCheckboxProps }; export default BpkCheckbox; export { themeAttributes }; + + diff --git a/packages/bpk-component-checkbox/src/BpkCheckbox-test.js b/packages/bpk-component-checkbox/src/BpkCheckbox-test.tsx similarity index 99% rename from packages/bpk-component-checkbox/src/BpkCheckbox-test.js rename to packages/bpk-component-checkbox/src/BpkCheckbox-test.tsx index fc10b0fb38..ca004956e4 100644 --- a/packages/bpk-component-checkbox/src/BpkCheckbox-test.js +++ b/packages/bpk-component-checkbox/src/BpkCheckbox-test.tsx @@ -16,8 +16,6 @@ * limitations under the License. */ -/* @flow strict */ - import { render } from '@testing-library/react'; import BpkCheckbox from './BpkCheckbox'; @@ -118,3 +116,5 @@ describe('BpkCheckbox', () => { expect(asFragment()).toMatchSnapshot(); }); }); + + diff --git a/packages/bpk-component-checkbox/src/BpkCheckbox.js b/packages/bpk-component-checkbox/src/BpkCheckbox.tsx similarity index 73% rename from packages/bpk-component-checkbox/src/BpkCheckbox.js rename to packages/bpk-component-checkbox/src/BpkCheckbox.tsx index 8e5a7ef2c6..507f32c53a 100644 --- a/packages/bpk-component-checkbox/src/BpkCheckbox.js +++ b/packages/bpk-component-checkbox/src/BpkCheckbox.tsx @@ -16,10 +16,7 @@ * limitations under the License. */ -/* @flow strict */ - -import PropTypes from 'prop-types'; -import type { Node } from 'react'; +import type { ReactNode } from 'react'; import { cssModules } from '../../bpk-react-utils'; @@ -27,34 +24,35 @@ import STYLES from './BpkCheckbox.module.scss'; const getClassName = cssModules(STYLES); -type Props = { - name: string, - label: Node, - required: boolean, - disabled: boolean, - white: boolean, - className: ?string, - smallLabel: boolean, - valid: ?boolean, - checked: boolean, +type NativeInputProps = React.InputHTMLAttributes; + +export type Props = Omit & { + name: string; + label: ReactNode; + required?: boolean; + disabled?: boolean; + white?: boolean; + className?: string | null; + smallLabel?: boolean; + valid?: boolean | null; /** * The indeterminate prop is only a visual clue, it does not affect the checked state of the checkbox. If `indeterminate` is flagged then the checkbox will be displayed with a minus sign in the box. This is used when there is a checkbox group and the parent displays this state when not all child checkboxes are selected. */ - indeterminate: boolean, + indeterminate?: boolean; }; const BpkCheckbox = ({ checked = false, - className = null, - disabled = false, - indeterminate = false, - label, - name, - required = false, - smallLabel = false, - valid = null, - white = false, - ...rest + className = null, + disabled = false, + indeterminate = false, + label, + name, + required = false, + smallLabel = false, + valid = null, + white = false, + ...rest }: Props) => { // Explicit check for false primitive value as undefined is // treated as neither valid nor invalid @@ -80,13 +78,12 @@ const BpkCheckbox = ({ return (