Skip to content

[NO-JIRA][BpkCardList] Remove initiallyInViewCardIndex prop #4553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jimmy cook (jimmycook) wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[NO-JIRA][BpkCardList] Remove initiallyInViewCardIndex prop #4553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a72ed2f
[NO-JIRA][BpkCardList] Remove initiallyInViewCardIndex prop
jimmycook May 22, 2026
f0e7f37
Merge branch 'main' into nojira-remove-initiallyInViewCardIndex
jimmycook May 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 0 additions & 14 deletions packages/backpack-web/src/bpk-component-card-list/src/BpkCardList.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,19 +356,6 @@ const RowToRailWithoutTitleExample = () => (
</PageContainer>
);

const RowToRailWithInitiallyInViewCardIndexExample = () => (
<PageContainer>
<BpkCardList
{...commonProps}
cardList={makeList(DestinationCard)}
layoutDesktop={LAYOUTS.row}
layoutMobile={LAYOUTS.rail}
accessoryDesktop={ACCESSORY_DESKTOP_TYPES.pagination}
initiallyInViewCardIndex={7}
/>
</PageContainer>
);

const MultiComponentsScrollingTestExample = () => (
<PageContainer>
<RowToRailExample />
Expand Down Expand Up @@ -409,7 +396,6 @@ export const RowToStackWithExpand = { render: () => <RowToStackWithExpandExample
export const GridToStackWithExpand = { render: () => <GridToStackWithExpandExample /> };
export const RowToRailForSnippets = { render: () => <RowToRailForSnippetsExample /> };
export const RowToRailWithoutTitle = { render: () => <RowToRailWithoutTitleExample /> };
export const RowToRailWithInitiallyInViewCardIndex = { render: () => <RowToRailWithInitiallyInViewCardIndexExample /> };

export const MultiComponentsScrollingTest = { render: () => <MultiComponentsScrollingTestExample /> };
export const VisualTest = { render: () => <BasicExample /> };
Expand Down
3 changes: 0 additions & 3 deletions packages/backpack-web/src/bpk-component-card-list/src/BpkCardList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ const BpkCardList = (props: CardListProps) => {
chipGroup,
description,
expandText,
initiallyInViewCardIndex = 0,
initiallyShownCardsDesktop = DEFAULT_ITEMS_DESKTOP,
initiallyShownCardsMobile = DEFAULT_ITEMS_MOBILE,
layoutDesktop,
Expand Down Expand Up @@ -106,7 +105,6 @@ const BpkCardList = (props: CardListProps) => {
initiallyShownCards={initiallyShownCardsMobile}
layout={layoutMobile}
accessibilityLabels={accessibilityLabels}
initiallyInViewCardIndex={initiallyInViewCardIndex}
isMobile
>
{cardList}
Expand Down Expand Up @@ -137,7 +135,6 @@ const BpkCardList = (props: CardListProps) => {
initiallyShownCards={initiallyShownCardsDesktop}
layout={layoutDesktop}
accessibilityLabels={accessibilityLabels}
initiallyInViewCardIndex={initiallyInViewCardIndex}
>
{cardList}
</BpkCardListRowRailContainer>
Expand Down
1 change: 0 additions & 1 deletion ...kpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ describe('BpkCardListCarousel', () => {
initiallyShownCards: 3,
layout: LAYOUTS.row,
setCurrentIndex: mockSetCurrentIndex,
initialPageIndex: 0,
};

afterEach(() => {
Expand Down
2 changes: 0 additions & 2 deletions ...s/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ const BpkCardListCarousel = (props: CardListCarouselProps) => {
`Entering Carousel with ${initiallyShownCards} slides shown at a time, ${childrenLength} slides in total. Please use Pagination below with the Previous and Next buttons to navigate, or the slide dot buttons at the end to jump to slides.`,
children,
currentIndex,
initialPageIndex,
initiallyShownCards,
isMobile = false,
layout,
Expand Down Expand Up @@ -95,7 +94,6 @@ const BpkCardListCarousel = (props: CardListCarouselProps) => {
visibilityList,
container: root,
enabled: !isMobile,
initialPageIndex,
});

// Similar to Virtual Scrolling to improve performance
Expand Down
115 changes: 1 addition & 114 deletions ...b/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ describe('BpkCardListRowRailContainer', () => {

it('should render correctly with row layout and no accessory', () => {
render(
<BpkCardListRowRailContainer layout={LAYOUTS.row} initiallyShownCards={3} initiallyInViewCardIndex={0}>
<BpkCardListRowRailContainer layout={LAYOUTS.row} initiallyShownCards={3}>
{mockCards(3)}
</BpkCardListRowRailContainer>,
);
Expand All @@ -68,7 +68,6 @@ describe('BpkCardListRowRailContainer', () => {
layout={LAYOUTS.row}
initiallyShownCards={3}
accessory={ACCESSORY_DESKTOP_TYPES.pagination}
initiallyInViewCardIndex={0}
>
{mockCards(5)}
</BpkCardListRowRailContainer>,
Expand All @@ -84,116 +83,4 @@ describe('BpkCardListRowRailContainer', () => {
expect(container).toBeInTheDocument();
expect(carousel).toBeInTheDocument();
});

describe('initiallyInViewCardIndex', () => {
const mockScrollIntoView = jest.fn();
const originalScrollIntoView = Element.prototype.scrollIntoView;

beforeAll(() => {
Element.prototype.scrollIntoView = mockScrollIntoView;
});

afterAll(() => {
Element.prototype.scrollIntoView = originalScrollIntoView;
});

beforeEach(() => {
mockScrollIntoView.mockClear();
});

it('should scroll to the first card of the target page on mount', () => {
render(
<BpkCardListRowRailContainer
layout={LAYOUTS.row}
initiallyShownCards={3}
accessory={ACCESSORY_DESKTOP_TYPES.pagination}
initiallyInViewCardIndex={4}
>
{mockCards(9)}
</BpkCardListRowRailContainer>,
);

const cards = screen.getAllByRole('group');

// Card index 4 → page 1 → scrolls to card at index 3 (page 1 start)
expect(mockScrollIntoView).toHaveBeenCalledTimes(1);
expect(mockScrollIntoView.mock.instances[0]).toBe(cards[3]);
});

it('should not trigger initial scroll when initiallyInViewCardIndex is 0', () => {
render(
<BpkCardListRowRailContainer
layout={LAYOUTS.row}
initiallyShownCards={3}
initiallyInViewCardIndex={0}
>
{mockCards(6)}
</BpkCardListRowRailContainer>,
);

expect(mockScrollIntoView).not.toHaveBeenCalled();
});

it('should not trigger initial scroll when initiallyInViewCardIndex is negative', () => {
render(
<BpkCardListRowRailContainer
layout={LAYOUTS.row}
initiallyShownCards={3}
initiallyInViewCardIndex={-1}
>
{mockCards(6)}
</BpkCardListRowRailContainer>,
);

expect(mockScrollIntoView).not.toHaveBeenCalled();
});

it('should scroll to the last page start when initiallyInViewCardIndex exceeds total cards', () => {
render(
<BpkCardListRowRailContainer
layout={LAYOUTS.row}
initiallyShownCards={3}
accessory={ACCESSORY_DESKTOP_TYPES.pagination}
initiallyInViewCardIndex={100}
>
{mockCards(6)}
</BpkCardListRowRailContainer>,
);

const cards = screen.getAllByRole('group');

// Clamped to last page (page 1) → scrolls to card at index 3
expect(mockScrollIntoView).toHaveBeenCalledTimes(1);
expect(mockScrollIntoView.mock.instances[0]).toBe(cards[3]);
});

it.each([
{ cardIndex: 3, shownCards: 3, totalCards: 12, expectedPage: 1 },
{ cardIndex: 5, shownCards: 3, totalCards: 12, expectedPage: 1 },
{ cardIndex: 11, shownCards: 3, totalCards: 12, expectedPage: 3 },
{ cardIndex: 8, shownCards: 4, totalCards: 12, expectedPage: 2 },
])(
'should scroll to card at page start for cardIndex=$cardIndex with shownCards=$shownCards (page $expectedPage)',
({ cardIndex, expectedPage, shownCards, totalCards }) => {
render(
<BpkCardListRowRailContainer
layout={LAYOUTS.row}
initiallyShownCards={shownCards}
accessory={ACCESSORY_DESKTOP_TYPES.pagination}
initiallyInViewCardIndex={cardIndex}
>
{mockCards(totalCards)}
</BpkCardListRowRailContainer>,
);

const cards = screen.getAllByRole('group');
const expectedCardIndex = expectedPage * shownCards;

expect(mockScrollIntoView).toHaveBeenCalledTimes(1);
expect(mockScrollIntoView.mock.instances[0]).toBe(
cards[expectedCardIndex],
);
},
);
});
});
15 changes: 1 addition & 14 deletions ...ck-web/src/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ const BpkCardListRowRailContainer = (props: CardListRowRailProps) => {
accessibilityLabels,
accessory,
children,
initiallyInViewCardIndex,
initiallyShownCards,
isMobile = false,
layout,
Expand All @@ -44,18 +43,7 @@ const BpkCardListRowRailContainer = (props: CardListRowRailProps) => {
const totalIndicators = Math.ceil(childrenCount / initiallyShownCards);
const showAccessory = childrenCount > initiallyShownCards;

// Calculate initial page from card index
const [initialPageIndex] = useState(() => {
if (initiallyInViewCardIndex < 0) {
return 0;
}
if (initiallyInViewCardIndex >= childrenCount) {
return Math.max(0, totalIndicators - 1);
}
return Math.floor(initiallyInViewCardIndex / initiallyShownCards);
});

const [currentIndex, setCurrentIndex] = useState(initialPageIndex);
const [currentIndex, setCurrentIndex] = useState(0);

const accessoryContent =
layout === LAYOUTS.row &&
Expand Down Expand Up @@ -85,7 +73,6 @@ const BpkCardListRowRailContainer = (props: CardListRowRailProps) => {
isMobile={isMobile}
carouselLabel={accessibilityLabels?.carouselLabel}
slideLabel={accessibilityLabels?.slideLabel}
initialPageIndex={initialPageIndex}
>
{children}
</BpkCardListCarousel>
Expand Down
3 changes: 1 addition & 2 deletions ...es/backpack-web/src/bpk-component-card-list/src/BpkCardListRowRail/accessibility-test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ describe('BpkCardListRowRailContainer', () => {

it('should have no accessibility issues for row and no accessory', async () => {
const { container } = render(
<BpkCardListRowRailContainer layout={LAYOUTS.row} initiallyShownCards={3} initiallyInViewCardIndex={0}>
<BpkCardListRowRailContainer layout={LAYOUTS.row} initiallyShownCards={3}>
{mockCards(3)}
</BpkCardListRowRailContainer>,
);
Expand All @@ -62,7 +62,6 @@ describe('BpkCardListRowRailContainer', () => {
layout={LAYOUTS.row}
initiallyShownCards={3}
accessory="pagination"
initiallyInViewCardIndex={0}
>
{mockCards(5)}
</BpkCardListRowRailContainer>,
Expand Down
Loading
Loading