fix(tag-wall-filter): fix scrollbar position (#627)

carbon-design-system · Jun 30, 2020 · 93ebd90 · 93ebd90
1 parent cc918e9
commit 93ebd90
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 13 deletions.
diff --git a/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap b/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap
@@ -15680,18 +15680,28 @@ input:not(output):not([data-invalid]):-moz-ui-invalid {
 
 .security--tag-wall-filter__tag-wall {
   min-height: 1.5rem;
-  margin: 0.75rem 0 0.5rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
 }
 
 .security--tag-wall-filter__tag-wall__label {
   color: var(--text-02, #c6c6c6);
 }
 
 .security--tag-wall-filter__description {
+  padding-right: 1rem;
   max-height: 20vh;
   overflow: auto;
 }
 
+.security--tag-wall-filter.security--tearsheet--small > .security--tearsheet--small__header {
+  padding-right: 0;
+}
+
+.security--tag-wall-filter.security--tearsheet--small > .security--tearsheet--small__header > .security--tearsheet--small__title {
+  margin-right: 1rem;
+}
+
 .security--portal__overlay {
   display: flex;
   position: fixed;

diff --git a/src/components/TagWallFilter/TagWallFilter.js b/src/components/TagWallFilter/TagWallFilter.js
@@ -1,17 +1,21 @@
 /**
  * @file TagWallFilter
- * @copyright IBM Security 2019
+ * @copyright IBM Security 2019 - 2020
  */
-import React from 'react';
+
 import PropTypes from 'prop-types';
+import React from 'react';
 import { withReducer, mapProps, compose } from 'recompose';
 import { createReducer, combineReducers } from 'reduced-utils';
-import { defaultSortItems } from './tools/sorting';
+
+import { getComponentNamespace } from '../../globals/namespace/index';
+
 import FilterRaw from './Filter';
 import TagWall from '../TagWall';
 import { TearsheetSmall } from '../Tearsheet';
 import { buttonType } from '../Tearsheet/TearsheetSmall/TearsheetSmall';
-import { getComponentNamespace } from '../../globals/namespace/index';
+
+import { defaultSortItems } from './tools/sorting';
 
 const namespace = getComponentNamespace('tag-wall-filter');
 
@@ -190,6 +194,7 @@ export const TagWallFilter = ({
   filterFieldClearAllTooltip,
 }) => {
   const tearsheetProps = {
+    className: namespace,
     flush: true,
     focusTrap,
     heading,

diff --git a/src/components/TagWallFilter/__tests__/__snapshots__/TagWallFilter.spec.js.snap b/src/components/TagWallFilter/__tests__/__snapshots__/TagWallFilter.spec.js.snap
@@ -2073,6 +2073,7 @@ exports[`TagWallFilter tests TagWallFilter should mount the TagWallFilter compon
     tagWallLabel={null}
     tearsheetProps={
       Object {
+        "className": "security--tag-wall-filter",
         "closeButton": Object {
           "onClick": [MockFunction],
         },
@@ -2148,6 +2149,7 @@ exports[`TagWallFilter tests TagWallFilter should mount the TagWallFilter compon
       tagWallLabel={null}
       tearsheetProps={
         Object {
+          "className": "security--tag-wall-filter",
           "closeButton": Object {
             "onClick": [MockFunction],
           },
@@ -2193,6 +2195,7 @@ exports[`TagWallFilter tests TagWallFilter should mount the TagWallFilter compon
         tagWallLabel={null}
         tearsheetProps={
           Object {
+            "className": "security--tag-wall-filter",
             "closeButton": Object {
               "onClick": [MockFunction],
             },
@@ -2213,7 +2216,7 @@ exports[`TagWallFilter tests TagWallFilter should mount the TagWallFilter compon
       >
         <TearsheetSmall
           body=""
-          className=""
+          className="security--tag-wall-filter"
           closeButton={
             Object {
               "onClick": [MockFunction],
@@ -2463,7 +2466,7 @@ exports[`TagWallFilter tests TagWallFilter should mount the TagWallFilter compon
               />
               <section
                 aria-hidden="false"
-                class="security--tearsheet--small"
+                class="security--tearsheet--small security--tag-wall-filter"
               >
                 <header
                   class="security--tearsheet--small__header"
@@ -2982,7 +2985,7 @@ exports[`TagWallFilter tests TagWallFilter should mount the TagWallFilter compon
                           />
                           <section
                             aria-hidden="false"
-                            class="security--tearsheet--small"
+                            class="security--tearsheet--small security--tag-wall-filter"
                           >
                             <header
                               class="security--tearsheet--small__header"
@@ -3437,7 +3440,7 @@ exports[`TagWallFilter tests TagWallFilter should mount the TagWallFilter compon
                             />
                             <section
                               aria-hidden="false"
-                              class="security--tearsheet--small"
+                              class="security--tearsheet--small security--tag-wall-filter"
                             >
                               <header
                                 class="security--tearsheet--small__header"
@@ -3673,7 +3676,7 @@ exports[`TagWallFilter tests TagWallFilter should mount the TagWallFilter compon
                         >
                           <section
                             aria-hidden={false}
-                            className="security--tearsheet--small"
+                            className="security--tearsheet--small security--tag-wall-filter"
                           >
                             <header
                               className="security--tearsheet--small__header"

diff --git a/src/components/TagWallFilter/_index.scss b/src/components/TagWallFilter/_index.scss
@@ -8,6 +8,7 @@
 @import '../Tearsheet/TearsheetSmall/index';
 
 @import '../Component/mixins';
+
 @import 'mixins';
 
 @include security--component($name: tag-wall-filter) {

diff --git a/src/components/TagWallFilter/_mixins.scss b/src/components/TagWallFilter/_mixins.scss
@@ -7,18 +7,44 @@
 @import '@carbon/layout/scss/spacing';
 @import '@carbon/themes/scss/tokens';
 
+@import '../../globals/namespace/index';
+
+@import '../Tearsheet/TearsheetSmall/variables';
+
 @mixin tag-wall-filter {
+  /// Small tearsheet namespace.
+  /// @type String
+  $tearsheet--small__namespace: get-component-namespace(
+    $component-name: tearsheet--small,
+  );
+
+  /// Small tearsheet spacing.
+  /// @type String
+  $tearsheet--small__spacing: $carbon--spacing-05;
+
   &__tag-wall {
     min-height: $carbon--spacing-06;
-    margin: $carbon--spacing-04 0 $carbon--spacing-03;
+    margin-top: $carbon--spacing-04;
+    margin-bottom: $carbon--spacing-03;
 
     &__label {
       color: $text-02;
     }
   }
 
   &__description {
+    padding-right: $tearsheet--small__spacing;
     max-height: 20vh;
     overflow: auto;
   }
+
+  &#{$tearsheet--small__namespace} {
+    > #{$tearsheet--small__namespace}__header {
+      padding-right: 0;
+
+      > #{$tearsheet--small__namespace}__title {
+        margin-right: $tearsheet--small__spacing;
+      }
+    }
+  }
 }
diff --git a/src/components/Tearsheet/TearsheetSmall/_index.scss b/src/components/Tearsheet/TearsheetSmall/_index.scss
@@ -1,7 +1,7 @@
 ////
 /// Small tearsheet component.
 /// @group tearsheet--small
-/// @copyright IBM Security 2019
+/// @copyright IBM Security 2019 - 2020
 ////
 
 @import '../../Button/index';
@@ -11,8 +11,9 @@
 
 @import '../../Component/mixins';
 
+@import 'variables';
 @import 'mixins';
 
-@include security--component($name: #{$tearsheet__name}--small) {
+@include security--component($name: #{$tearsheet--small__name}) {
   @include tearsheet--small;
 }
diff --git a/src/components/Tearsheet/TearsheetSmall/_variables.scss b/src/components/Tearsheet/TearsheetSmall/_variables.scss
@@ -0,0 +1,11 @@
+////
+/// Small tearsheet variables.
+/// @group tearsheet--small
+/// @copyright IBM Security 2020
+////
+
+@import '../mixins';
+
+/// Name.
+/// @type String
+$tearsheet--small__name: #{$tearsheet__name}--small;