Merge branch 'master' into remove-snippet-focus

carbon-design-system · Jan 29, 2020 · 8e0b9f3 · 8e0b9f3
2 parents 2f6ce92 + d46f153
commit 8e0b9f3
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 7 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -13165,6 +13165,8 @@ Button base styles
   outline: none;
   position: relative;
   max-width: rem(320px);
+  // Fix to remove added margins on buttons in safari (see #5155)
+  margin: 0;
 
   &:disabled,
   &.#{$prefix}--btn--disabled {
@@ -15374,8 +15376,6 @@ Data table expandable styles
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
-    padding-bottom: rem(23px);
-    transition: padding $duration--moderate-01 motion(standard, productive);
     border-bottom: 1px solid $ui-03;
   }
 

diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss
@@ -29,6 +29,8 @@
   outline: none;
   position: relative;
   max-width: rem(320px);
+  // Fix to remove added margins on buttons in safari (see #5155)
+  margin: 0;
 
   &:disabled,
   &.#{$prefix}--btn--disabled {

diff --git a/packages/components/src/components/data-table/_data-table-expandable.scss b/packages/components/src/components/data-table/_data-table-expandable.scss
@@ -63,8 +63,6 @@
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
-    padding-bottom: rem(23px);
-    transition: padding $duration--moderate-01 motion(standard, productive);
     border-bottom: 1px solid $ui-03;
   }
 

diff --git a/packages/components/src/globals/scss/_css--reset.scss b/packages/components/src/globals/scss/_css--reset.scss
@@ -190,6 +190,11 @@
       box-sizing: border-box;
     }
 
+    // Fix to remove added margins on buttons in safari (see #5155)
+    button {
+      margin: 0;
+    }
+
     @include carbon--type-reset;
     @include carbon--icons;
   }

diff --git a/packages/react/src/components/DataTable/stories/datatable-story.scss b/packages/react/src/components/DataTable/stories/datatable-story.scss
@@ -0,0 +1,18 @@
+@import '~@carbon/type/scss/type';
+@import '~@carbon/themes/scss/themes';
+
+.demo-expanded-td td {
+  padding-left: 3.25rem !important;
+  padding-bottom: 1.5rem;
+  padding-top: 1rem;
+}
+
+.demo-inner-container-header {
+  @include carbon--type-style('productive-heading-01');
+  color: $text-01;
+}
+
+.demo-inner-container-content {
+  @include carbon--type-style('body-long-01');
+  color: $text-02;
+}
diff --git a/packages/react/src/components/DataTable/stories/with-expansion.js b/packages/react/src/components/DataTable/stories/with-expansion.js
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import './datatable-story.scss';
+
 import React from 'react';
 import DataTable, {
   Table,
@@ -56,9 +58,15 @@ export default props => (
                     <TableCell key={cell.id}>{cell.value}</TableCell>
                   ))}
                 </TableExpandRow>
-                <TableExpandedRow colSpan={headers.length + 1}>
-                  <h1>Expandable row content</h1>
-                  <p>Description here</p>
+                <TableExpandedRow
+                  colSpan={headers.length + 1}
+                  className="demo-expanded-td">
+                  <h1 className="demo-inner-container-header">
+                    Expandable row content
+                  </h1>
+                  <p className="demo-inner-container-content">
+                    Description here
+                  </p>
                 </TableExpandedRow>
               </React.Fragment>
             ))}

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -243,6 +243,7 @@ export default class FilterableMultiSelect extends React.Component {
         }
         return {
           inputValue: inputValue || '',
+          isOpen: Boolean(inputValue) || this.state.isOpen,
         };
       });
   };