feat(widgets): default design for disabled states (#1929)

When widgets are no more relevant/have no refinements, we were already adding specific CSS classes. Now the default theme also define more precise rendering states for widgets (greyed out) Basically noRefine panels will get an opacity of 0.7. Also did some fixes so that MultiRange is working with Panel feature.
algolia · Feb 6, 2017 · 31f010b · 31f010b
1 parent f6fc378
commit 31f010b
Show file tree

Hide file tree

Showing 15 changed files with 166 additions and 80 deletions.
diff --git a/packages/react-instantsearch-theme-algolia/styles/_MultiRange.scss b/packages/react-instantsearch-theme-algolia/styles/_MultiRange.scss
@@ -55,3 +55,7 @@
 
 .ais-MultiRange__itemLabelSelected{
 }
+
+.ais-MultiRange__itemNoRefinement {
+  opacity: .7;
+}
diff --git a/packages/react-instantsearch-theme-algolia/styles/_Panel.scss b/packages/react-instantsearch-theme-algolia/styles/_Panel.scss
@@ -1,6 +1,10 @@
-.ais-Panel__title{
+.ais-Panel__title {
   margin: 0 0 6px;
   padding: 0 0 6px;
   text-transform: uppercase;
   border-bottom: 2px solid #eee;
-}
+}
+
+.ais-Panel__noRefinement {
+  opacity: .7;
+}
diff --git a/packages/react-instantsearch-theme-algolia/styles/_RangeInput.scss b/packages/react-instantsearch-theme-algolia/styles/_RangeInput.scss
@@ -1,6 +1,12 @@
 .ais-RangeInput__root {
 }
 
+.ais-RangeInput__fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
 .ais-RangeInput__labelMin,
 .ais-RangeInput__labelMax {
   min-width: 80px;

diff --git a/packages/react-instantsearch/src/components/Menu.js b/packages/react-instantsearch/src/components/Menu.js
@@ -91,7 +91,7 @@ class Menu extends Component {
 
 export default translatable({
   showMore: extended => extended ? 'Show less' : 'Show more',
-  noResults: 'No Results',
+  noResults: 'No results',
   submit: null,
   reset: null,
   resetTitle: 'Clear the search query.',

diff --git a/packages/react-instantsearch/src/components/MultiRange.js b/packages/react-instantsearch/src/components/MultiRange.js
@@ -17,6 +17,18 @@ class MultiRange extends Component {
     canRefine: PropTypes.bool.isRequired,
   };
 
+  static contextTypes = {
+    canRefine: PropTypes.func,
+  };
+
+  componentWillMount() {
+    if (this.context.canRefine) this.context.canRefine(this.props.canRefine);
+  }
+
+  componentWillReceiveProps(props) {
+    if (this.context.canRefine) this.context.canRefine(props.canRefine);
+  }
+
   renderItem = item => {
     const {refine} = this.props;
 
@@ -26,6 +38,7 @@ class MultiRange extends Component {
           {...cx('itemRadio', item.isRefined && 'itemRadioSelected')}
           type="radio"
           checked={item.isRefined}
+          disabled={item.noRefinement}
           onChange={refine.bind(null, item.value)}
         />
         <span {...cx('itemBox', 'itemBox', item.isRefined && 'itemBoxSelected')}></span>

diff --git a/packages/react-instantsearch/src/components/RangeInput.js b/packages/react-instantsearch/src/components/RangeInput.js
@@ -51,19 +51,21 @@ class RangeInput extends Component {
     const {translate, canRefine} = this.props;
     return (
       <form {...cx('root', !canRefine && 'noRefinement')} onSubmit={this.onSubmit}>
-        <label {...cx('labelMin')}>
-          <input {...cx('inputMin')}
-                 type="number" value={this.state.from} onChange={e => this.setState({from: e.target.value})}
-          />
-        </label>
-        <span {...cx('separator')}>{translate('separator')}</span>
-        <label {...cx('labelMax')}>
-          <input {...cx('inputMax')}
-                 type="number" value={this.state.to} onChange={e => this.setState({to: e.target.value})}
-          />
-        </label>
-        <button {...cx('submit')} type="submit">{translate('submit')}
-        </button>
+        <fieldset disabled={!canRefine} {...cx('fieldset')}>
+          <label {...cx('labelMin')}>
+            <input {...cx('inputMin')}
+                   type="number" value={this.state.from} onChange={e => this.setState({from: e.target.value})}
+            />
+          </label>
+          <span {...cx('separator')}>{translate('separator')}</span>
+          <label {...cx('labelMax')}>
+            <input {...cx('inputMax')}
+                   type="number" value={this.state.to} onChange={e => this.setState({to: e.target.value})}
+            />
+          </label>
+          <button {...cx('submit')} type="submit">{translate('submit')}
+          </button>
+        </fieldset>
       </form>
     );
   }

diff --git a/packages/react-instantsearch/src/components/RefinementList.js b/packages/react-instantsearch/src/components/RefinementList.js
@@ -98,11 +98,10 @@ class RefinementList extends Component {
 
 export default translatable({
   showMore: extended => extended ? 'Show less' : 'Show more',
-  noResults: 'No Results',
+  noResults: 'No results',
   submit: null,
   reset: null,
   resetTitle: 'Clear the search query.',
   submitTitle: 'Submit your search query.',
   placeholder: 'Search here…',
 })(RefinementList);
-
diff --git a/packages/react-instantsearch/src/components/__snapshots__/MultiRange.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/MultiRange.test.js.snap
@@ -9,6 +9,7 @@ exports[`MultiRange supports having a selected item 1`] = `
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
+          disabled={false}
           onChange={[Function]}
           type="radio" />
         <span
@@ -25,6 +26,7 @@ exports[`MultiRange supports having a selected item 1`] = `
         <input
           checked={true}
           className="ais-MultiRange__itemRadio ais-MultiRange__itemRadioSelected"
+          disabled={false}
           onChange={[Function]}
           type="radio" />
         <span
@@ -41,6 +43,7 @@ exports[`MultiRange supports having a selected item 1`] = `
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
+          disabled={false}
           onChange={[Function]}
           type="radio" />
         <span
@@ -57,6 +60,7 @@ exports[`MultiRange supports having a selected item 1`] = `
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
+          disabled={false}
           onChange={[Function]}
           type="radio" />
         <span
@@ -82,6 +86,7 @@ exports[`MultiRange supports passing items values 1`] = `
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
+          disabled={false}
           onChange={[Function]}
           type="radio" />
         <span
@@ -98,6 +103,7 @@ exports[`MultiRange supports passing items values 1`] = `
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
+          disabled={false}
           onChange={[Function]}
           type="radio" />
         <span
@@ -114,6 +120,7 @@ exports[`MultiRange supports passing items values 1`] = `
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
+          disabled={false}
           onChange={[Function]}
           type="radio" />
         <span
@@ -130,6 +137,7 @@ exports[`MultiRange supports passing items values 1`] = `
         <input
           checked={false}
           className="ais-MultiRange__itemRadio"
+          disabled={false}
           onChange={[Function]}
           type="radio" />
         <span

diff --git a/packages/react-instantsearch/src/components/__snapshots__/RangeInput.test.js.snap b/packages/react-instantsearch/src/components/__snapshots__/RangeInput.test.js.snap
@@ -2,62 +2,70 @@ exports[`RangeInput applies translations 1`] = `
 <form
   className="ais-RangeInput__root"
   onSubmit={[Function]}>
-  <label
-    className="ais-RangeInput__labelMin">
-    <input
-      className="ais-RangeInput__inputMin"
-      onChange={[Function]}
-      type="number"
-      value={0} />
-  </label>
-  <span
-    className="ais-RangeInput__separator">
-    SEPARATOR
-  </span>
-  <label
-    className="ais-RangeInput__labelMax">
-    <input
-      className="ais-RangeInput__inputMax"
-      onChange={[Function]}
-      type="number"
-      value={100} />
-  </label>
-  <button
-    className="ais-RangeInput__submit"
-    type="submit">
-    SUBMIT
-  </button>
+  <fieldset
+    className="ais-RangeInput__fieldset"
+    disabled={false}>
+    <label
+      className="ais-RangeInput__labelMin">
+      <input
+        className="ais-RangeInput__inputMin"
+        onChange={[Function]}
+        type="number"
+        value={0} />
+    </label>
+    <span
+      className="ais-RangeInput__separator">
+      SEPARATOR
+    </span>
+    <label
+      className="ais-RangeInput__labelMax">
+      <input
+        className="ais-RangeInput__inputMax"
+        onChange={[Function]}
+        type="number"
+        value={100} />
+    </label>
+    <button
+      className="ais-RangeInput__submit"
+      type="submit">
+      SUBMIT
+    </button>
+  </fieldset>
 </form>
 `;
 
 exports[`RangeInput supports passing max/min values 1`] = `
 <form
   className="ais-RangeInput__root"
   onSubmit={[Function]}>
-  <label
-    className="ais-RangeInput__labelMin">
-    <input
-      className="ais-RangeInput__inputMin"
-      onChange={[Function]}
-      type="number"
-      value={0} />
-  </label>
-  <span
-    className="ais-RangeInput__separator">
-    to
-  </span>
-  <label
-    className="ais-RangeInput__labelMax">
-    <input
-      className="ais-RangeInput__inputMax"
-      onChange={[Function]}
-      type="number"
-      value={100} />
-  </label>
-  <button
-    className="ais-RangeInput__submit"
-    type="submit">
-    ok
-  </button>
+  <fieldset
+    className="ais-RangeInput__fieldset"
+    disabled={false}>
+    <label
+      className="ais-RangeInput__labelMin">
+      <input
+        className="ais-RangeInput__inputMin"
+        onChange={[Function]}
+        type="number"
+        value={0} />
+    </label>
+    <span
+      className="ais-RangeInput__separator">
+      to
+    </span>
+    <label
+      className="ais-RangeInput__labelMax">
+      <input
+        className="ais-RangeInput__inputMax"
+        onChange={[Function]}
+        type="number"
+        value={100} />
+    </label>
+    <button
+      className="ais-RangeInput__submit"
+      type="submit">
+      ok
+    </button>
+  </fieldset>
 </form>
 `;
diff --git a/packages/react-instantsearch/src/connectors/connectMultiRange.js b/packages/react-instantsearch/src/connectors/connectMultiRange.js
@@ -102,7 +102,7 @@ export default createConnector({
     return {
       items: props.transformItems ? props.transformItems(items) : items,
       currentRefinement,
-      canRefine: !items.reduce((noRefinement, item) => noRefinement && item.noRefinement, true),
+      canRefine: items.length > 0 && items.some(item => item.noRefinement === false),
     };
   },
 

diff --git a/stories/ClearAll.stories.js b/stories/ClearAll.stories.js
@@ -8,7 +8,7 @@ const stories = storiesOf('ClearAll', module);
 
 stories.addDecorator(withKnobs);
 
-stories.add('default', () =>
+stories.add('with refinements to clear', () =>
   <WrapWithHits linkedStoryGroup="ClearAll">
     <div>
       <ClearAll />
@@ -21,3 +21,9 @@ stories.add('default', () =>
       </div>
   </WrapWithHits>
 );
+
+stories.add('nothing to clear', () =>
+  <WrapWithHits linkedStoryGroup="ClearAll">
+    <ClearAll />
+  </WrapWithHits>
+);
diff --git a/stories/HitsPerPage.stories.js b/stories/HitsPerPage.stories.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {storiesOf} from '@kadira/storybook';
-import {HitsPerPage} from '../packages/react-instantsearch/dom';
+import {HitsPerPage, Panel} from '../packages/react-instantsearch/dom';
 import {withKnobs, number} from '@kadira/storybook-addon-knobs';
 import {WrapWithHits} from './util';
 
@@ -27,12 +27,23 @@ stories.add('default', () =>
         {value: 8}]}/>
   </WrapWithHits>
 ).add('playground', () =>
-    <WrapWithHits >
+  <WrapWithHits >
+    <HitsPerPage
+      defaultRefinement={number('default hits per page', 4)}
+      items={[{value: 2, label: '2 hits per page'},
+        {value: 4, label: '4 hits per page'},
+        {value: 6, label: '6 hits per page'},
+        {value: 8, label: '8 hits per page'}]}/>
+  </WrapWithHits>
+).add('inside a panel', () =>
+  <WrapWithHits>
+    <Panel title="Hits to display">
       <HitsPerPage
         defaultRefinement={number('default hits per page', 4)}
         items={[{value: 2, label: '2 hits per page'},
           {value: 4, label: '4 hits per page'},
           {value: 6, label: '6 hits per page'},
           {value: 8, label: '8 hits per page'}]}/>
-    </WrapWithHits>
-  );
+    </Panel>
+  </WrapWithHits>
+);
diff --git a/stories/Menu.stories.js b/stories/Menu.stories.js
@@ -51,14 +51,14 @@ stories.add('default', () =>
         />
       </Panel>
   </WrapWithHits>
-).add('with panel but no refinement', () =>
+).add('with panel but no available refinement', () =>
   <WrapWithHits searchBox={false}>
       <Panel title="Category">
         <Menu
           attributeName="category"
         />
         <div style={{display: 'none'}}>
-          <SearchBox defaultRefinement="ds" />
+          <SearchBox defaultRefinement="dkjsakdjskajdksjakdjaskj" />
         </div>
       </Panel>
   </WrapWithHits>