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 >
#{$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 index 7d87f63a2..6913a0b45 100644 --- 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 new file mode 100644 index 000000000..93e6fbb1f --- /dev/null +++ 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;