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

Co-authored-by: Liam DeBeasi <[email protected]>

Author: thetaPC

core/api.txt

@@ -199,7 +199,7 @@ ion-breadcrumb,part,native
 ion-breadcrumb,part,separator
 
 ion-breadcrumbs,shadow
-ion-breadcrumbs,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,false
+ion-breadcrumbs,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-breadcrumbs,prop,itemsAfterCollapse,number,1,false,false
 ion-breadcrumbs,prop,itemsBeforeCollapse,number,1,false,false
 ion-breadcrumbs,prop,maxItems,number | undefined,undefined,false,false

core/src/components/breadcrumbs/breadcrumbs.tsx

@@ -30,7 +30,7 @@ export class Breadcrumbs implements ComponentInterface {
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    * For more information on colors, see [theming](/docs/theming/basics).
    */
-  @Prop() color?: Color;
+  @Prop({ reflect: true }) color?: Color;
 
   /**
    * The maximum number of breadcrumbs to show before collapsing.

packages/vue/test/base/src/router/index.ts

@@ -70,6 +70,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/components',
     component: () => import('@/views/Components.vue'),
   },
+  {
+    path: '/components/breadcrumbs',
+    component: () => import('@/views/Breadcrumbs.vue')
+  },
   {
     path: '/components/select',
     component: () => import('@/views/Select.vue')

packages/vue/test/base/src/views/Breadcrumbs.vue

@@ -0,0 +1,53 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Breadcrumbs</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <h1>Default</h1>
+      <ion-breadcrumbs id="default">
+        <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+        <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+        <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
+        <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
+        <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
+        <ion-breadcrumb> 35 mm </ion-breadcrumb>
+      </ion-breadcrumbs>
+      <hr />
+      <h1>Color: Danger</h1>
+      <ion-breadcrumbs id="color" color="danger">
+        <ion-breadcrumb href="#"> Home </ion-breadcrumb>
+        <ion-breadcrumb href="#electronics"> Electronics </ion-breadcrumb>
+        <ion-breadcrumb href="#photography"> Photography </ion-breadcrumb>
+        <ion-breadcrumb href="#cameras"> Cameras </ion-breadcrumb>
+        <ion-breadcrumb href="#film"> Film </ion-breadcrumb>
+        <ion-breadcrumb> 35 mm </ion-breadcrumb>
+      </ion-breadcrumbs>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonBreadcrumbs,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  components: {
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonBreadcrumbs,
+  },
+});
+</script>

packages/vue/test/base/src/views/Components.vue

@@ -2,6 +2,9 @@
   <ion-page>
     <ion-content>
       <ion-list>
+        <ion-item button router-link="/components/breadcrumbs">
+          <ion-label>Breadcrumbs</ion-label>
+        </ion-item>
         <ion-item button router-link="/components/select">
           <ion-label>Select</ion-label>
         </ion-item>

packages/vue/test/base/tests/e2e/specs/breadcrumbs.cy.js

@@ -0,0 +1,9 @@
+describe("Components: Breadcrumbs", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:8080/components/breadcrumbs");
+  });
+
+  it("should have color attribute", () => {
+    cy.get('ion-breadcrumbs#color').should('have.prop', 'color');
+  });
+});