fix(item-divider): set padding-end for md

[mapsandapps]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Some docs updates need to be made in the ionic-docs repo, in a separate PR. See the contributing guide for details.
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

item-divider has padding on mode ios but not on md

Issue URL: #23785

What is the new behavior?

• item-divider has padding on both modes: ios and md

Does this introduce a breaking change?

• Yes
• No

Other information

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[brandyscarney]

The code fix looks good, but I am wondering if we should simplify the item divider tests so it is just a screenshot of the item divider itself instead of an entire page. Thoughts, @liamdebeasi?

[liamdebeasi]

I think that's a good idea. Smaller screenshots make it easier to identify what changed and will speed up test runs.

[brandyscarney]

@mapsandapps Can you update the item divider tests to add screenshots of only the divider? We can do something like this:

item-divider/test/basic/item-divider.e2e.ts:

import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';

test.describe('item-divider: basic', () => {
  test('should display an item divider with text', async ({ page, skip }) => {

    await page.setContent(`
      <ion-item-divider>
        <ion-label>Item Divider</ion-label>
      </ion-item-divider>
    `);

    const divider = page.locator('ion-item-divider');
    await expect(divider).toHaveScreenshot(`item-divider-text-${page.getSnapshotSettings()}.png`);
  });

  test('should display an item divider with a button in the end slot', async ({ page, skip }) => {

    await page.setContent(`
      <ion-item-divider>
        <ion-label>Item Divider</ion-label>
        <ion-button slot="end">Button</ion-button>
      </ion-item-divider>
    `);

    const divider = page.locator('ion-item-divider');
    await expect(divider).toHaveScreenshot(`item-divider-button-end-${page.getSnapshotSettings()}.png`);
  });

  test('should display an item divider with an icon in the start slot', async ({ page, skip }) => {

    await page.setContent(`
      <ion-item-divider>
        <ion-icon slot="start" name="star"></ion-icon>
        <ion-label>Item Divider</ion-label>
      </ion-item-divider>
    `);

    const divider = page.locator('ion-item-divider');
    await expect(divider).toHaveScreenshot(`item-divider-icon-start-${page.getSnapshotSettings()}.png`);
  });
});

Feel free to modify these tests or add more, I was just thinking of some coverage we could have for both slots.

You would then need to revert the addition to the spec test and ionitron's commit to update the reference screenshots. Please let me or Liam know if you have questions!

[brandyscarney]

Sorry I meant put this test in its own file in a directory named basic:

core/src/components/item-divider/test/basic/item-divider.e2e.ts

Then revert the test in the spec/ folder to match main

[mapsandapps]

ok, cool. from what y'all were saying i thought you wanted smaller tests, but this way there are more tests. is that ok?

[brandyscarney]

Yeah I think the spec test is needed to be taken as a whole page screenshot in order to check how the divider lines up with the items, we can revisit this when we change the test generator unless we want to strip the spec test to just a couple item dividers + items now.

[brandyscarney]

Can you revert the file changes to the item-divider/spec screenshots? You might need to check them out from main and then commit them:

git checkout origin/main src/components/item-divider/test/spec/item-divider.e2e.ts-snapshots/

I had to do that on another PR because reverting the commit didn't work.

After that you'll want to run the update reference screenshots action on your branch to generate the new basic item divider screenshots.