fix(list): migrate to scoped

core/src/components/list/list.ios.scss

@@ -4,9 +4,7 @@
 // iOS List
 // --------------------------------------------------
 
-.list-ios {
+:host {
-  @include margin($list-ios-margin-top, $list-ios-margin-end, $list-ios-margin-bottom, $list-ios-margin-start);
-
   background: $item-ios-background;
 }
 
@@ -14,7 +12,7 @@
 // iOS Inset List
 // --------------------------------------------------
 
-.list-ios.list-inset {
+:host(.list-inset) {
   @include margin($list-inset-ios-margin-top, $list-inset-ios-margin-end, $list-inset-ios-margin-bottom, $list-inset-ios-margin-start);
   @include border-radius($list-inset-ios-border-radius);
 }
@@ -31,14 +29,14 @@
  * items in an item-sliding when the item is the last
  * element in the item-sliding container.
  */
-.list-ios.list-inset ion-item:only-child,
+:host(.list-inset) ion-item:only-child,
-.list-ios.list-inset ion-item:not(:only-of-type):last-of-type,
+:host(.list-inset) ion-item:not(:only-of-type):last-of-type,
-.list-ios.list-inset ion-item-sliding:last-of-type ion-item {
+:host(.list-inset) ion-item-sliding:last-of-type ion-item {
   --border-width: 0;
   --inner-border-width: 0;
 }
 
-.list-ios.list-inset + ion-list.list-inset {
+:host(.list-inset) + ion-list.list-inset {
   @include margin(0, null, null, null);
 }
 
@@ -46,7 +44,7 @@
 // iOS No Lines List
 // --------------------------------------------------
 
-.list-ios-lines-none .item-lines-default {
+:host(.lines-none) .item-lines-default {
   --inner-border-width: 0px;
   --border-width: 0px;
 }
@@ -54,7 +52,7 @@
 // iOS Full Lines List
 // --------------------------------------------------
 
-.list-ios-lines-full .item-lines-default {
+:host(.lines-full) .item-lines-default {
   --inner-border-width: 0px;
   --border-width: #{0 0 $list-ios-item-border-bottom-width 0};
 }
@@ -62,7 +60,7 @@
 // iOS Inset Lines List
 // --------------------------------------------------
 
-.list-ios-lines-inset .item-lines-default {
+:host(.lines-inset) .item-lines-default {
   --inner-border-width: #{0 0 $list-ios-item-border-bottom-width 0};
   --border-width: 0px;
 }
@@ -70,6 +68,6 @@
 // iOS List Inside A Card
 // --------------------------------------------------
 
-ion-card .list-ios {
+:host-context(ion-card) {
   @include margin(0);
 }

core/src/components/list/list.ios.vars.scss

@@ -4,32 +4,20 @@
 // iOS List
 // --------------------------------------------------
 
-/// @prop - Margin top of the list
-$list-ios-margin-top:                 null;
-
-/// @prop - Margin end of the list
-$list-ios-margin-end:                 null;
-
-/// @prop - Margin bottom of the list
-$list-ios-margin-bottom:              null;
-
-/// @prop - Margin start of the list
-$list-ios-margin-start:               null;
-
 /// @prop - Border bottom of the item in a list
-$list-ios-item-border-bottom-width:   $item-ios-border-bottom-width;
+$list-ios-item-border-bottom-width: $item-ios-border-bottom-width;
 
 /// @prop - Margin top of the inset list
-$list-inset-ios-margin-top:           16px;
+$list-inset-ios-margin-top: 16px;
 
 /// @prop - Margin end of the inset list
-$list-inset-ios-margin-end:           16px;
+$list-inset-ios-margin-end: $list-inset-ios-margin-top;
 
 /// @prop - Margin bottom of the inset list
-$list-inset-ios-margin-bottom:        16px;
+$list-inset-ios-margin-bottom: $list-inset-ios-margin-top;
 
 /// @prop - Margin start of the inset list
-$list-inset-ios-margin-start:         16px;
+$list-inset-ios-margin-start: $list-inset-ios-margin-top;
 
 /// @prop - Border radius of the inset list
-$list-inset-ios-border-radius:        10px;
+$list-inset-ios-border-radius: 10px;

core/src/components/list/list.md.scss

@@ -4,21 +4,21 @@
 // Material Design List
 // --------------------------------------------------
 
-.list-md {
+:host {
-  @include margin($list-md-margin-top, $list-md-margin-end, $list-md-margin-bottom, $list-md-margin-start);
+  @include margin(0);
   @include padding($list-md-padding-top, $list-md-padding-end, $list-md-padding-bottom, $list-md-padding-start);
 
   background: $item-md-background;
 }
 
-.list-md > .input:last-child::after {
+:host > .input:last-child::after {
   @include position-horizontal(0, null);
 }
 
 // Material Design Inset List
 // --------------------------------------------------
 
-.list-md.list-inset {
+:host(.list-inset) {
   @include margin($list-inset-md-margin-top, $list-inset-md-margin-end, $list-inset-md-margin-bottom, $list-inset-md-margin-start);
   @include border-radius($list-inset-md-border-radius);
 }
@@ -34,8 +34,8 @@
  * items in an item-sliding when the item is the last
  * element in the item-sliding container.
  */
-.list-md.list-inset ion-item:not(:only-of-type):last-of-type,
+:host(.list-inset) ion-item:not(:only-of-type):last-of-type,
-.list-md.list-inset ion-item-sliding:last-of-type ion-item {
+:host(.list-inset) ion-item-sliding:last-of-type ion-item {
   --border-width: 0;
   --inner-border-width: 0;
 }
@@ -46,12 +46,12 @@
  * 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 {
+:host(.list-inset) ion-item:only-child {
   --border-width: 0;
   --inner-border-width: 0;
 }
 
-.list-md.list-inset + ion-list.list-inset {
+:host(.list-inset) + ion-list.list-inset {
   @include margin(0, null, null, null);
 }
 
@@ -59,7 +59,7 @@
 // Material Design No Lines List
 // --------------------------------------------------
 
-.list-md-lines-none .item-lines-default {
+:host(.lines-none) .item-lines-default {
   --inner-border-width: 0px;
   --border-width: 0px;
 }
@@ -67,7 +67,7 @@
 // Material Design Full Lines List
 // --------------------------------------------------
 
-.list-md-lines-full .item-lines-default {
+:host(.lines-full) .item-lines-default {
   --inner-border-width: 0px;
   --border-width: #{0 0 $list-md-item-border-bottom-width 0};
 }
@@ -75,7 +75,7 @@
 // Material Design Inset Lines List
 // --------------------------------------------------
 
-.list-md-lines-inset .item-lines-default {
+:host(.lines-inset) .item-lines-default {
   --inner-border-width: #{0 0 $list-md-item-border-bottom-width 0};
   --border-width: 0px;
 }
@@ -83,6 +83,6 @@
 // Material Design List Inside A Card
 // --------------------------------------------------
 
-ion-card .list-md {
+:host-context(ion-card) {
   @include margin(0);
 }

core/src/components/list/list.md.vars.scss

@@ -4,44 +4,32 @@
 // Material Design List
 // --------------------------------------------------
 
-/// @prop - Margin top of the list
-$list-md-margin-top:                   0;
-
-/// @prop - Margin end of the list
-$list-md-margin-end:                   0;
-
-/// @prop - Margin bottom of the list
-$list-md-margin-bottom:                0;
-
-/// @prop - Margin start of the list
-$list-md-margin-start:                 0;
-
 /// @prop - Padding top of the list
-$list-md-padding-top:                  8px;
+$list-md-padding-top: 8px;
 
 /// @prop - Padding end of the list
-$list-md-padding-end:                  0;
+$list-md-padding-end: 0;
 
 /// @prop - Padding bottom of the list
-$list-md-padding-bottom:               8px;
+$list-md-padding-bottom: $list-md-padding-top;
 
 /// @prop - Padding start of the list
-$list-md-padding-start:                0;
+$list-md-padding-start: $list-md-padding-end;
 
 /// @prop - Border bottom of the item in a list
-$list-md-item-border-bottom-width:     $item-md-border-bottom-width;
+$list-md-item-border-bottom-width: $item-md-border-bottom-width;
 
 /// @prop - Margin top of the inset list
-$list-inset-md-margin-top:             16px;
+$list-inset-md-margin-top: 16px;
 
 /// @prop - Margin end of the inset list
-$list-inset-md-margin-end:             16px;
+$list-inset-md-margin-end: $list-inset-md-margin-top;
 
 /// @prop - Margin bottom of the inset list
-$list-inset-md-margin-bottom:          16px;
+$list-inset-md-margin-bottom: $list-inset-md-margin-top;
 
 /// @prop - Margin start of the inset list
-$list-inset-md-margin-start:           16px;
+$list-inset-md-margin-start: $list-inset-md-margin-top;
 
 /// @prop - Border radius of the inset list
-$list-inset-md-border-radius:          2px;
+$list-inset-md-border-radius: 2px;

core/src/components/list/list.scss

@@ -4,7 +4,7 @@
 // List
 // --------------------------------------------------
 
-ion-list {
+:host {
   @include margin(0);
   @include padding(0);
 
@@ -14,7 +14,7 @@ ion-list {
   list-style-type: none;
 }
 
-ion-list.list-inset {
+:host(.list-inset) {
   transform: translateZ(0);
 
   overflow: hidden;

core/src/components/list/list.tsx

@@ -12,6 +12,7 @@ import { getIonMode } from '../../global/ionic-global';
     ios: 'list.ios.scss',
     md: 'list.md.scss',
   },
+  scoped: true,
 })
 export class List implements ComponentInterface {
   @Element() el!: HTMLElement;

core/src/components/list/test/basic/index.html

@@ -12,6 +12,14 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      h2 {
+        margin-top: 20px;
+        margin-inline-start: 16px;
+        margin-bottom: 0;
+      }
+    </style>
   </head>
 
   <body>
@@ -23,6 +31,8 @@
       </ion-header>
 
       <ion-content id="content">
+        <h2>Default</h2>
+
         <ion-list>
           <ion-item>Pokémon Yellow</ion-item>
           <ion-item>Super Metroid</ion-item>
@@ -30,6 +40,15 @@
           <ion-item>The Legend of Zelda</ion-item>
           <ion-item lines="full">Halo</ion-item>
         </ion-list>
+
+        <h2>No padding</h2>
+        <ion-list class="ion-no-padding">
+          <ion-item>Pokémon Yellow</ion-item>
+          <ion-item>Super Metroid</ion-item>
+          <ion-item>Mega Man X</ion-item>
+          <ion-item>The Legend of Zelda</ion-item>
+          <ion-item lines="full">Halo</ion-item>
+        </ion-list>
       </ion-content>
     </ion-app>
   </body>