fix(item-divider): update design to match native iOS (#20854)

ionic-team · Mar 24, 2020 · 8660e61 · 8660e61
1 parent 976e68d
commit 8660e61
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 41 deletions.
diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss
@@ -5,16 +5,20 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{$item-ios-divider-background};
-  --color: #{$item-ios-divider-color};
-  --padding-start: #{$item-ios-divider-padding-start};
-  --inner-padding-end: #{$item-ios-divider-padding-end / 2};
+  --background: #{$item-divider-ios-background};
+  --color: #{$item-divider-ios-color};
+  --padding-start: #{$item-divider-ios-padding-start};
+  --inner-padding-end: #{$item-divider-ios-padding-end / 2};
 
   @include border-radius(0);
 
   position: relative;
 
-  font-size: $item-ios-divider-font-size;
+  min-height: $item-divider-ios-min-height;
+
+  font-size: $item-divider-ios-font-size;
+
+  font-weight: $item-divider-ios-font-weight;
 }
 
 
@@ -35,14 +39,6 @@
 }
 
 
-// Material Design Slotted Label
-// --------------------------------------------------
-
-::slotted(ion-label) {
-  @include margin(10px, 8px, 10px, 0);
-}
-
-
 // iOS Item Divider Content
 // --------------------------------------------------
 

diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss
@@ -4,17 +4,23 @@
 // iOS Item Divider
 // --------------------------------------------------
 
+/// @prop - Minimum height for the divider
+$item-divider-ios-min-height:             28px !default;
+
 /// @prop - Font size of the item
-$item-ios-divider-font-size:              17px !default;
+$item-divider-ios-font-size:              17px !default;
+
+/// @prop - Font weight of the item
+$item-divider-ios-font-weight:            600 !default;
 
 /// @prop - Background for the divider
-$item-ios-divider-background:             $background-color-step-50 !default;
+$item-divider-ios-background:             $background-color-step-100 !default;
 
 /// @prop - Color for the divider
-$item-ios-divider-color:                  $text-color-step-150 !default;
+$item-divider-ios-color:                  $text-color-step-150 !default;
 
 /// @prop - Padding start for the divider
-$item-ios-divider-padding-start:          $item-ios-padding-start !default;
+$item-divider-ios-padding-start:          $item-ios-padding-start !default;
 
 /// @prop - Padding end for the divider
-$item-ios-divider-padding-end:            $item-ios-padding-end !default;
+$item-divider-ios-padding-end:            $item-ios-padding-end !default;
diff --git a/core/src/components/item-divider/item-divider.md.scss b/core/src/components/item-divider/item-divider.md.scss
@@ -5,14 +5,16 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{$item-md-divider-background};
-  --color: #{$item-md-divider-color};
-  --padding-start: #{$item-md-divider-padding-start};
-  --inner-padding-end: #{$item-md-divider-padding-end};
+  --background: #{$item-divider-md-background};
+  --color: #{$item-divider-md-color};
+  --padding-start: #{$item-divider-md-padding-start};
+  --inner-padding-end: #{$item-divider-md-padding-end};
 
-  border-bottom: $item-md-divider-border-bottom;
+  min-height: $item-divider-md-min-height;
 
-  font-size: $item-md-divider-font-size;
+  border-bottom: $item-divider-md-border-bottom;
+
+  font-size: $item-divider-md-font-size;
 }
 
 

diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss
@@ -4,20 +4,23 @@
 // Material Design Item Divider
 // --------------------------------------------------
 
+/// @prop - Minimum height for the divider
+$item-divider-md-min-height:         30px !default;
+
 /// @prop - Color for the divider
-$item-md-divider-color:              $text-color-step-600 !default;
+$item-divider-md-color:              $text-color-step-600 !default;
 
 /// @prop - Background for the divider
-$item-md-divider-background:         $background-color !default;
+$item-divider-md-background:         $background-color !default;
 
 /// @prop - Font size for the divider
-$item-md-divider-font-size:          14px !default;
+$item-divider-md-font-size:          14px !default;
 
 /// @prop - Border bottom for the divider
-$item-md-divider-border-bottom:      1px solid $item-md-border-color !default;
+$item-divider-md-border-bottom:      1px solid $item-md-border-color !default;
 
 /// @prop - Padding start for the divider
-$item-md-divider-padding-start:      $item-md-padding-start !default;
+$item-divider-md-padding-start:      $item-md-padding-start !default;
 
 /// @prop - Padding end for the divider
-$item-md-divider-padding-end:        0 !default;
+$item-divider-md-padding-end:        0 !default;
diff --git a/core/src/components/item-divider/item-divider.scss b/core/src/components/item-divider/item-divider.scss
@@ -44,7 +44,6 @@
   justify-content: space-between;
 
   width: 100%;
-  min-height: $item-divider-min-height;
 
   background: var(--background);
   color: var(--color);

diff --git a/core/src/components/item-divider/test/spec/e2e.ts b/core/src/components/item-divider/test/spec/e2e.ts
@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('item-divider: spec', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/item-divider/test/spec?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
+
+test('item-divider: spec-rtl', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/item-divider/test/spec?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/item-divider/test/spec/index.html b/core/src/components/item-divider/test/spec/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Item Divider - Spec</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <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></head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Item Divider - Spec</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-list-header>
+          <ion-label>
+            Item Groups
+          </ion-label>
+        </ion-list-header>
+
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>A</ion-label>
+          </ion-item-divider>
+
+          <ion-item>
+            <ion-label><b>Abigail</b></ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Jesse <b>Adams</b></ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label><b>Alan</b></ion-label>
+          </ion-item>
+        </ion-item-group>
+
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>B</ion-label>
+          </ion-item-divider>
+
+          <ion-item>
+            <ion-label>James <b>Bach</b></ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Flora <b>Ball</b></ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>London <b>Black</b></ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Alisha <b>Brady</b></ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label><b>Brianna</b></ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Monica <b>Brown</b></ion-label>
+          </ion-item>
+        </ion-item-group>
+
+        <ion-item-group>
+          <ion-item-divider>
+            <ion-label>C</ion-label>
+          </ion-item-divider>
+
+          <ion-item>
+            <ion-label><b>Carla</b></ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Brian <b>Clark</b></ion-label>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Robert <b>Cline</b></ion-label>
+          </ion-item>
+        </ion-item-group>
+      </ion-list>
+    </ion-content>
+  </ion-app>
+</body>
+
+<style>
+  .ios ion-item {
+    --min-height: 44px;
+  }
+
+  .ios ion-item ion-label {
+    margin: 0;
+  }
+
+  .ios ion-item:last-of-type {
+    --inner-border-width: 0;
+  }
+
+  .md ion-item:last-of-type {
+    --inner-border-width: 0;
+    --border-width: 0 0 1px 0;
+  }
+</style>
+
+</html>
diff --git a/core/src/components/item-group/item-group.ios.scss b/core/src/components/item-group/item-group.ios.scss
@@ -4,8 +4,3 @@
 
 // iOS Item Group
 // --------------------------------------------------
-
-.item-group-ios ion-item:last-child,
-.item-group-ios ion-item-sliding:last-child .item {
-  --border-width: 0;
-}
diff --git a/core/src/components/item-group/item-group.md.scss b/core/src/components/item-group/item-group.md.scss
@@ -4,8 +4,3 @@
 
 // Material Design Item Group
 // --------------------------------------------------
-
-.item-group-md ion-item:last-child,
-.item-group-md ion-item-sliding:last-child ion-item {
-  --border-width: 0;
-}