Merge branch 'develop' into feature/zhusee_revise_deploy

iCHEF · Oct 26, 2017 · 20338ce · 20338ce
2 parents ddcdf0b + 2e80dca
commit 20338ce
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
-- N/A
+### Changed
+- Upgrade webpack to v3 (#101)
+- [Core] Fix aside label for `<Text>` should turn white inside a highlighted `<ListRow>`. (#104)
+- [Core] Adds hover background for `<ListRow>`. (#104)
+- [Core] Fix vertical padding for `<HeaderRow>`. (#104)
 
 ## [1.3.0]
 ### Added

diff --git a/packages/core/src/styles/HeaderRow.scss b/packages/core/src/styles/HeaderRow.scss
@@ -5,7 +5,8 @@ $component: #{$prefix}-header-row;
     min-height: rem($row-base-height);
     background-color: $c-header-bg;
     border-bottom: 1px solid $c-divider-header;
-    padding: 0 rem($header-padding);
+    padding: rem($header-row-padding);
+    box-sizing: border-box;
     display: flex;
 
     &__left,

diff --git a/packages/core/src/styles/ListRow.scss b/packages/core/src/styles/ListRow.scss
@@ -2,18 +2,21 @@
 $component: #{$prefix}-list-row;
 
 .#{$component} {
-    min-height: $row-base-height;
-    padding: 0 $list-row-padding-horizontal;
+    min-height: rem($row-base-height);
+    padding: 0 rem($list-row-padding-horizontal);
     box-sizing: border-box;
 
+    &:hover {
+        background-color: $c-row-bg-hover;
+    }
+
     // --------------------
     //  Elements
     // --------------------
     &__body {
         display: flex;
         align-items: flex-start;
-        padding: $list-row-padding-vertical 0;
-        // border-bottom: 1px solid $c-divider-row;
+        padding: rem($list-row-padding-vertical) 0;
         box-shadow: inset 0 -1px 0 $c-divider-row;
 
         // Styles inside List
@@ -32,20 +35,31 @@ $component: #{$prefix}-list-row;
 
     &__footer {
         font-size: $list-row-footer-font-size;
-        line-height: $list-row-footer-line-height;
-        padding-top: $list-row-footer-padding-top;
-        padding-bottom: $list-row-footer-padding-bottom;
+        line-height: rem($list-row-footer-line-height);
+        padding-top: rem($list-row-footer-padding-top);
+        padding-bottom: rem($list-row-footer-padding-bottom);
 
         p {
-            margin: 0 0 $list-row-footer-padding-bottom;
+            margin: 0 0 rem($list-row-footer-padding-bottom);
         }
     }
 
     // --------------------
     //  Modifiers
     // --------------------
     &--highlight {
-        background-color: $c-row-bg-highlight;
+        background-color: $c-row-bg-highlight !important;
         color: $c-white;
     }
+
+    // --------------------
+    //  In other component
+    // --------------------
+    .#{$prefix}-list--setting & {
+        &:last-of-type {
+            .#{$component}__body {
+                box-shadow: none;
+            }
+        }
+    }
 }
diff --git a/packages/core/src/styles/Text.scss b/packages/core/src/styles/Text.scss
@@ -38,7 +38,8 @@
         font-size: rem($aside-text-font-size);
         line-height: rem($aside-text-line-height);
 
-        .#{$prefix}-state-error & {
+        .#{$prefix}-state-error &,
+        .#{$prefix}-list-row--highlight & {
             color: inherit;
         }
     }

diff --git a/packages/core/src/styles/_variables.scss b/packages/core/src/styles/_variables.scss
@@ -34,8 +34,6 @@ $component-padding: 4px;
 $element-base-height: 32px;
 $row-base-height: 48px;
 
-$header-padding: 4px;
-
 // ----------------------
 //  <Text>
 // ----------------------
@@ -44,8 +42,6 @@ $basic-text-line-height: $line-height-large;
 $aside-text-font-size: $font-size-base;
 $aside-text-line-height: $line-height-base;
 
-$header-padding: 4px;
-
 $tag-font-size: $font-size-small;
 $tag-border-radius: 6px;
 $tag-vertical-padding: 2px;
@@ -83,6 +79,8 @@ $list-row-footer-padding-bottom: 8px;
 $list-row-footer-font-size: $font-size-small;
 $list-row-footer-line-height: $line-height-small;
 
+$header-row-padding: 4px;
+
 $column-body-padding: 16px;
 
 $popup-container-width: 300px;

diff --git a/packages/storybook/examples/List/NormalList.js b/packages/storybook/examples/List/NormalList.js
@@ -28,7 +28,10 @@ function NormalList() {
                 </ListRow>
 
                 <ListRow highlight>
-                    <TextLabel icon="tickets" basic="Highlighted row" />
+                    <TextLabel
+                        icon="tickets"
+                        basic="Highlighted row"
+                        aside="Component aside" />
                 </ListRow>
                 <ListRow>
                     <TextLabel icon="tickets" basic="Row 3" />