Skip to content
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.

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

fix(pagination): use semantic internal elements #9479

Merged
merged 6 commits into from
May 31, 2024

Conversation

driskull
Copy link
Member

Related Issue: #7804

Summary

  • render a list and list items internally
  • add test to ensure future compliance

@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label May 31, 2024
@driskull driskull marked this pull request as ready for review May 31, 2024 16:51
@driskull driskull requested a review from a team as a code owner May 31, 2024 16:51
@driskull driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label May 31, 2024
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aside from a few comments, this LGTM!

>
<calcite-icon flipRtl icon={ICONS.previous} scale={getIconScale(this.scale)} />
</button>
<li>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you extract the list item rendering to a separate function and reuse?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could create a functional component for a li but that seems a little overkill for this since its just a list item with a class.

@driskull driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels May 31, 2024
@driskull driskull merged commit b70d7d9 into main May 31, 2024
12 checks passed
@driskull driskull deleted the dris0000/pagination-semantics branch May 31, 2024 20:23
Copy link
Member

@jcfranco jcfranco left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

const page = await newE2EPage();
await page.setContent(`<calcite-pagination total-items="10" page-size="1"></calcite-pagination>`);
const list = await page.find(`calcite-pagination >>> .${CSS.list}`);
expect(list).not.toBeNull();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you also assert on the element types? Maybe we can the following test util:

function assertElementTag(element: E2EElement, tag: keyof HTMLElementTagNameMap): void {
  return expect(element.tagName.toLowerCase()).toBe(tag);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants