From c72bc5dbd76cd3ce622a4b3cedcb7446a2819384 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Mon, 8 Feb 2021 10:34:08 -0500
Subject: [PATCH] refactor(header): removed border from last toolbar when using
 collapsible large title (#22891)

resolves #22777

BREAKING CHANGE: The last toolbar in the header with a collapsible large title no longer has a border.
---
 BREAKING.md                                | 13 +++++++++++++
 core/src/components/header/header.ios.scss |  8 ++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/BREAKING.md b/BREAKING.md
index 2d071c53f1..47fac2256c 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -13,6 +13,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 ## Version 6.x
 
 - [Components](#components)
+  * [Header](#header)
   * [Toast](#toast)
 - [Config](#config)
   * [Transition Shadow](#transition-shadow)
@@ -21,6 +22,18 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 ### Components
 
+#### Header
+
+When using a collapsible large title, the last toolbar in the header with `collapse="condense"` no longer has a border. This does not affect the toolbar when the large title is collapsed.
+
+To get the old style back, add the following CSS to your global stylesheet:
+
+```css
+ion-header.header-collapse-condense ion-toolbar:last-of-type {
+  --border-width: 0 0 0.55px;
+}
+```
+
 #### Toast
 
 The `--white-space` CSS variable now defaults to `normal` instead of `pre-wrap`.
diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss
index d722f67c74..a0bdee4b43 100644
--- a/core/src/components/header/header.ios.scss
+++ b/core/src/components/header/header.ios.scss
@@ -19,7 +19,7 @@
   .header-translucent-ios ion-toolbar {
     --opacity: .8;
   }
-  
+
   /**
    * Disable the saturation otherwise it distorts the content
    * background color when large header is not collapsed
@@ -56,10 +56,14 @@
  */
 .header-collapse-condense ion-toolbar {
   --background: var(--ion-background-color, #fff);
-  
+
   z-index: 0;
 }
 
+.header-collapse-condense ion-toolbar:last-of-type {
+  --border-width: 0px;
+}
+
 .header-collapse-condense ion-toolbar ion-searchbar {
   height: 48px;