From dbaaa5bd9f43b8ba589b3f9c4b4204d2f203ef18 Mon Sep 17 00:00:00 2001
From: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Date: Tue, 16 Jan 2024 10:31:28 -0600
Subject: [PATCH] fix(list): remove uneeded border radius from items in inset
 list (#28830)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

In MD mode, items in an inset list currently receive their own border
radius, separate from the border radius also applied to the inset list
itself. The original intent was likely to ensure that the corners of the
items don't spill out of the list. However, the item's border radius is
no longer needed, for two reasons:
1. MD has since added top/bottom padding to their lists
([spec](https://m2.material.io/components/lists#specs)), which we've
mirrored. This means the borders no longer line up anyway.
2. Even if a developer removes the list's vertical padding (we set it on
the host
[here](https://github.com/ionic-team/ionic-framework/blob/535b8ed72486a1e94125c72b12d5b447b630f8c4/core/src/components/list/list.md.scss#L9),
so it's easy to overwrite), inset lists currently have `overflow:
hidden` set
[here](https://github.com/ionic-team/ionic-framework/blob/535b8ed72486a1e94125c72b12d5b447b630f8c4/core/src/components/list/list.scss#L20),
so the list's border radius still applies correctly even with the items'
border radius removed.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Item border radius in inset lists removed.

When testing locally, you may find it useful to increase the MD border
radius value
[here](https://github.com/ionic-team/ionic-framework/blob/535b8ed72486a1e94125c72b12d5b447b630f8c4/core/src/components/list/list.md.vars.scss#L47)
so it's easier to see.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  3. Update the BREAKING.md file with the breaking change.
4. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---
 core/src/components/list/list.md.scss | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/core/src/components/list/list.md.scss b/core/src/components/list/list.md.scss
index 8b408f781d6..62a28273cc8 100644
--- a/core/src/components/list/list.md.scss
+++ b/core/src/components/list/list.md.scss
@@ -23,25 +23,9 @@
   @include border-radius($list-inset-md-border-radius);
 }
 
-/**
- * These selectors ensure the first item in the list
- * has the correct radius.
- * We need to consider the following scenarios:
- 1. The first item in a list as long as it is not the only item.
- 2. The item in the first item-sliding in a list.
- * Note that we do not select "ion-item-sliding ion-item:first-of-type"
- * because that will cause the borders to disappear on
- * items in an item-sliding when the item is the first
- * element in the item-sliding container.
- */
-.list-md.list-inset ion-item:not(:only-of-type):first-of-type,
-.list-md.list-inset ion-item-sliding:first-of-type ion-item {
-  --border-radius: #{$list-inset-md-border-radius $list-inset-md-border-radius 0 0};
-}
-
 /**
  * These selectors ensure the last item in the list
- * has the correct radius and border.
+ * has the correct border.
  * We need to consider the following scenarios:
  1. The last item in a list as long as it is not the only item.
  2. The item in the last item-sliding in a list.
@@ -52,21 +36,17 @@
  */
 .list-md.list-inset ion-item:not(:only-of-type):last-of-type,
 .list-md.list-inset ion-item-sliding:last-of-type ion-item {
-  --border-radius: #{0 0 $list-inset-md-border-radius $list-inset-md-border-radius};
   --border-width: 0;
   --inner-border-width: 0;
 }
 
 /**
- * The only item in a list should have a border radius
- * on all corners.
  * We target :only-child instead of :only-of-type
  * otherwise borders will disappear on items inside of
  * ion-item-sliding because the item will be the only
  * one of its type inside of the ion-item-sliding group.
  */
 .list-md.list-inset ion-item:only-child {
-  --border-radius: #{$list-inset-md-border-radius};
   --border-width: 0;
   --inner-border-width: 0;
 }