From d2355c04d2e865d4e1b25e94ecccfcc1d81c9f1f Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 28 Mar 2023 11:44:50 -0700
Subject: [PATCH 1/3] bug(breadcrumbs): color attribute shows on DOM for Vue

---
 core/api.txt                                    | 2 +-
 core/src/components/breadcrumbs/breadcrumbs.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 9783b904b80..337ee1f7087 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -187,7 +187,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 266d3ad7c42..36e759fa15b 100644
--- a/core/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/core/src/components/breadcrumbs/breadcrumbs.tsx
@@ -29,7 +29,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.

From ab0c815787d479312e5594c3ce352b667073546d Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 28 Mar 2023 11:58:50 -0700
Subject: [PATCH 2/3] test(breadcrumbs): verify color attribute is added when
 on Vue

---
 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 ++++
 4 files changed, 69 insertions(+)
 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/packages/vue/test/base/src/router/index.ts b/packages/vue/test/base/src/router/index.ts
index 51f037d969a..9064b427c2a 100644
--- a/packages/vue/test/base/src/router/index.ts
+++ b/packages/vue/test/base/src/router/index.ts
@@ -74,6 +74,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 00000000000..cf97b92a317
--- /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 de63bbf9905..84c30f9b67c 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 00000000000..a98f7853e69
--- /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');
+  });
+});

From eab389ba2d58b4cbe8f286b09d9cba9b1efa196f Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria@ionic.io>
Date: Tue, 28 Mar 2023 12:10:15 -0700
Subject: [PATCH 3/3] chore(breadcrumbs): spacing

---
 .../vue/test/base/src/views/Breadcrumbs.vue   | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/vue/test/base/src/views/Breadcrumbs.vue b/packages/vue/test/base/src/views/Breadcrumbs.vue
index cf97b92a317..7e823056c05 100644
--- a/packages/vue/test/base/src/views/Breadcrumbs.vue
+++ b/packages/vue/test/base/src/views/Breadcrumbs.vue
@@ -7,24 +7,24 @@
     </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-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>