From dd419c0066d312f45c741bbe399d9764faf64841 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Thu, 30 Mar 2023 09:57:02 -0700
Subject: [PATCH] bug(breadcrumbs): color attribute shows on DOM for Vue
 (#27040)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 core/api.txt                                  |  2 +-
 .../components/breadcrumbs/breadcrumbs.tsx    |  2 +-
 packages/vue/test/base/src/router/index.ts    |  4 ++
 .../vue/test/base/src/views/Breadcrumbs.vue   | 53 +++++++++++++++++++
 .../vue/test/base/src/views/Components.vue    |  3 ++
 .../base/tests/e2e/specs/breadcrumbs.cy.js    |  9 ++++
 6 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 packages/vue/test/base/src/views/Breadcrumbs.vue
 create mode 100644 packages/vue/test/base/tests/e2e/specs/breadcrumbs.cy.js

diff --git a/core/api.txt b/core/api.txt
index fbd1257f29..e008c4afa4 100644
--- a/core/api.txt
+++ b/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
diff --git a/core/src/components/breadcrumbs/breadcrumbs.tsx b/core/src/components/breadcrumbs/breadcrumbs.tsx
index 10850fab17..7b7bb2b738 100644
--- a/core/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/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.
diff --git a/packages/vue/test/base/src/router/index.ts b/packages/vue/test/base/src/router/index.ts
index 8ad0c0d477..236ec08afa 100644
--- a/packages/vue/test/base/src/router/index.ts
+++ b/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')
diff --git a/packages/vue/test/base/src/views/Breadcrumbs.vue b/packages/vue/test/base/src/views/Breadcrumbs.vue
new file mode 100644
index 0000000000..7e823056c0
--- /dev/null
+++ b/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>
diff --git a/packages/vue/test/base/src/views/Components.vue b/packages/vue/test/base/src/views/Components.vue
index de63bbf990..84c30f9b67 100644
--- a/packages/vue/test/base/src/views/Components.vue
+++ b/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>
diff --git a/packages/vue/test/base/tests/e2e/specs/breadcrumbs.cy.js b/packages/vue/test/base/tests/e2e/specs/breadcrumbs.cy.js
new file mode 100644
index 0000000000..a98f7853e6
--- /dev/null
+++ b/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');
+  });
+});