diff --git a/src/components/SelectMultipleFilter/SelectMultipleFilter.css b/src/components/SelectMultipleFilter/SelectMultipleFilter.css index 9a390f84..78bad234 100644 --- a/src/components/SelectMultipleFilter/SelectMultipleFilter.css +++ b/src/components/SelectMultipleFilter/SelectMultipleFilter.css @@ -42,7 +42,30 @@ } } +.fieldGroup { + margin: 0; + padding: 0; + border: none; +} + .fieldGroupPlain { + margin: 0; padding-left: 20px; padding-bottom: 30px; + border: none; +} + +.list { + margin: 0; +} + +.item { + padding: 2px 0; + + /* Fix broken multi-column layout in Chrome */ + page-break-inside: avoid; + + @media (--viewportMedium) { + padding: 4px 0; + } } diff --git a/src/components/SelectMultipleFilter/SelectMultipleFilter.js b/src/components/SelectMultipleFilter/SelectMultipleFilter.js index 3b04b988..1bd4b658 100644 --- a/src/components/SelectMultipleFilter/SelectMultipleFilter.js +++ b/src/components/SelectMultipleFilter/SelectMultipleFilter.js @@ -2,11 +2,32 @@ import React, { Component } from 'react'; import { array, arrayOf, func, number, string } from 'prop-types'; import classNames from 'classnames'; import { injectIntl, intlShape } from 'react-intl'; -import { FieldCheckboxGroup } from '../../components'; +import { FieldCheckbox } from '../../components'; import { FilterPopup, FilterPlain } from '../../components'; import css from './SelectMultipleFilter.css'; +// SelectMultipleFilter doesn't need array mutators since it doesn't require validation. +// TODO: Live edit didn't work with FieldCheckboxGroup +// There's a mutation problem: formstate.dirty is not reliable with it. +const GroupOfFieldCheckboxes = props => { + const { id, className, name, options } = props; + return ( +
+ ); +}; + class SelectMultipleFilter extends Component { constructor(props) { super(props); @@ -101,7 +122,7 @@ class SelectMultipleFilter extends Component { urlParam={urlParam} {...rest} > -