diff --git a/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap b/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap
index 974fe13da..dc50a7516 100644
--- a/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap
+++ b/src/__tests__/scss/__snapshots__/SCSS.spec.js.snap
@@ -15680,7 +15680,8 @@ 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 {
@@ -15688,10 +15689,19 @@ input:not(output):not([data-invalid]):-moz-ui-invalid {
}
.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
index a9c85aafa..f0c6fc08d 100644
--- 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
index f1f5b84c6..304446d81 100644
--- 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
>