bug(breadcrumbs): color attribute shows on DOM for Vue

[thetaPC]

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?

Color variant is passed by breadcrumbs. However, breadcrumb children are not using the variant when using Vue. Notice that the breadcrumb components do not reflect the red color from danger.

Issue URL: resolves #25446

What is the new behavior?

• color prop uses reflect: true to verify that it will be rendered in the DOM as an HTML attribute

Does this introduce a breaking change?

• Yes
• No

Other information

• Demo was added to the packages/vue under the Breadcrumbs view.
• Test was added to verify that the color attribute is in the DOM.

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[sean-perkins]

Testing locally I am unable to see the color correctly reflected in the Vue test app. The class is applied to the host element, but the styles are not applied.

These are my test steps:

1. Build the Stencil project from core/: npm run build
2. Sync the Vue package from packages/vue: npm run sync
3. Build the Vue package from packages/vue: npm run build
4. Create a Vue test app from packages/vue/test: ./build.sh vue3
5. Install dependencies from the test app packages/vue/test/build/vue3: npm install
6. Sync the locally built Vue package to the test app: npm run sync
7. Serve the test app: npm run start
8. Open the breadcrumbs test page: http://localhost:8080/components/breadcrumbs

If I modify the basic test for breadcrumbs: http://localhost:3333/src/components/breadcrumbs/test/basic to use color on ion-breadcrumbs, the color is applied correctly. This happens with the latest code on main and with your working branch.

The original reported issue was specific to Vue not working as intended. All other environments appear to reflect the color styles correctly for ion-breadcrumbs.

One difference I observe between Vue and the others, is that ion-breadcrumb (the individual breadcrumb element) has the in-breadcrumbs-color class when the color is correctly reflected. It does not have this class when rendered in Vue. The implementation does appear to expect the color to be reflected: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/breadcrumb/breadcrumb.tsx#L192, but that is not behaving as expected in our Vue component wrappers: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/proxies.ts#L139-L145

The proxies file is auto-generated every time you run npm run build from the core/ folder. But you can debug locally by making changes and only building and syncing the Vue package.

Let me know if you need additional assistance debugging this issue.

Edit: It is possible that I have something cached that isn't applying your changes correctly. Please let me know if you do see the changes + the class applied to the individual breadcrumbs.

[thetaPC]

Testing locally I am unable to see the color correctly reflected in the Vue test app. The class is applied to the host element, but the styles are not applied.

These are my test steps:

1. Build the Stencil project from `core/`: `npm run build`

2. Sync the Vue package from `packages/vue`: `npm run sync`

3. Build the Vue package from `packages/vue`: `npm run build`

4. Create a Vue test app from `packages/vue/test`: `./build.sh vue3`

5. Install dependencies from the test app `packages/vue/test/build/vue3`: `npm install`

6. Sync the locally built Vue package to the test app: `npm run sync`

7. Serve the test app: `npm run start`

8. Open the breadcrumbs test page: http://localhost:8080/components/breadcrumbs

If I modify the basic test for breadcrumbs: http://localhost:3333/src/components/breadcrumbs/test/basic to use color on ion-breadcrumbs, the color is applied correctly. This happens with the latest code on main and with your working branch.

The original reported issue was specific to Vue not working as intended. All other environments appear to reflect the color styles correctly for ion-breadcrumbs.

One difference I observe between Vue and the others, is that ion-breadcrumb (the individual breadcrumb element) has the in-breadcrumbs-color class when the color is correctly reflected. It does not have this class when rendered in Vue. The implementation does appear to expect the color to be reflected: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/breadcrumb/breadcrumb.tsx#L192, but that is not behaving as expected in our Vue component wrappers: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/proxies.ts#L139-L145

The proxies file is auto-generated every time you run npm run build from the core/ folder. But you can debug locally by making changes and only building and syncing the Vue package.

Let me know if you need additional assistance debugging this issue.

Edit: It is possible that I have something cached that isn't applying your changes correctly. Please let me know if you do see the changes + the class applied to the individual breadcrumbs.

@sean-perkins Not sure if this solves it, I run npm install after step 2 in packages/vue. That's the only difference that I did. Let me know if it still persists.

[sean-perkins]

Ok I figured it out, the sync script installs all .tgz files in the directory. I had some previous builds local from testing and those were being installed instead of the changes from your branch. I'll open a PR to make the script account for this.

Your changes look great, nice work!

I can help with getting CI passing tomorrow - doesn't look like a specific screenshot failed, so may just require another manual re-run.

Wait to merge until the code freeze is lifted.