feat(range-input): implement InstantSearch.css

dev/app/builtin/stories/range-input.stories.js

@@ -14,7 +14,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             templates: {
               header: 'Range input',
             },
@@ -28,7 +28,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             min: 500,
             max: 0,
             templates: {
@@ -44,7 +44,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             collapsible: true,
             templates: {
               header: 'Range input',
@@ -59,7 +59,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             precision: 2,
             templates: {
               header: 'Range input',
@@ -74,7 +74,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             min: 10,
             templates: {
               header: 'Range input',
@@ -89,7 +89,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             max: 500,
             templates: {
               header: 'Range input',
@@ -104,7 +104,7 @@ export default () => {
         window.search.addWidget(
           instantsearch.widgets.rangeInput({
             container,
-            attributeName: 'price',
+            attribute: 'price',
             min: 10,
             max: 500,
             templates: {

docgen/src/guides/v3-migration.md

@@ -4,4 +4,58 @@ InstantSearch 3 introduces some breaking changes in the widget's naming, options
 
 ## Widgets
 
+### RangeInput
+
+#### Options
+
+| Before          | After       |
+| --------------- | ----------- |
+| `attributeName` | `attribute` |
+
+#### CSS classes
+
+| Before                       | After                          |
+| ---------------------------- | ------------------------------ |
+| `ais-range-input`            | `ais-RangeInput`               |
+|                              | `ais-RangeInput--noRefinement` |
+| `ais-range-input--body`      |                                |
+| `ais-range-input--form`      | `ais-RangeInput-form`          |
+| `ais-range-input--fieldset`  |                                |
+|                              | `ais-RangeInput-label`         |
+| `ais-range-input--labelMin`  |                                |
+| `ais-range-input--labelMax`  |                                |
+|                              | `ais-RangeInput-input`         |
+| `ais-range-input--inputMin`  | `ais-RangeInput-input--min`    |
+| `ais-range-input--inputMax`  | `ais-RangeInput-input--max`    |
+| `ais-range-input--separator` | `ais-RangeInput-separator`     |
+| `ais-range-input--submit`    | `ais-RangeInput-button`        |
+
+#### Markup
+
+```html
+<div class="ais-RangeInput">
+  <form class="ais-RangeInput-form">
+    <label class="ais-RangeInput-label">
+      <input class="ais-RangeInput-input ais-RangeInput-input--min" type="number" />
+    </label>
+
+    <span class="ais-RangeInput-separator">to</span>
+
+    <label class="ais-RangeInput-label">
+      <input class="ais-RangeInput-input ais-RangeInput-input--max" type="number" />
+    </label>
+
+    <button class="ais-RangeInput-submit" type="submit">Go</button>
+  </form>
+</div>
+```
+
 ## Connectors
+
+### connectRange
+
+#### Widget options
+
+| Before          | After       |
+| --------------- | ----------- |
+| `attributeName` | `attribute` |

src/components/RangeInput/RangeInput.js

@@ -1,9 +1,7 @@
 import React, { Component } from 'preact-compat';
 import PropTypes from 'prop-types';
-import autoHideContainerHOC from '../../decorators/autoHideContainer.js';
-import headerFooterHOC from '../../decorators/headerFooter.js';
 
-export class RawRangeInput extends Component {
+export class RangeInput extends Component {
   constructor(props) {
     super(props);
 
@@ -37,12 +35,17 @@ export class RawRangeInput extends Component {
     const { min, max, step, cssClasses, labels } = this.props;
     const isDisabled = min >= max;
 
+    const hasRefinements = Boolean(minValue || maxValue);
+    const rootClassNames = hasRefinements
+      ? cssClasses.root
+      : `${cssClasses.root} ${cssClasses.noRefinement}`;
+
     return (
-      <form className={cssClasses.form} onSubmit={this.onSubmit}>
-        <fieldset className={cssClasses.fieldset}>
-          <label className={cssClasses.labelMin}>
+      <div className={rootClassNames}>
+        <form className={cssClasses.form} onSubmit={this.onSubmit}>
+          <label className={cssClasses.label}>
             <input
-              className={cssClasses.inputMin}
+              className={`${cssClasses.input} ${cssClasses.inputMin}`}
               type="number"
               min={min}
               max={max}
@@ -53,10 +56,12 @@ export class RawRangeInput extends Component {
               disabled={isDisabled}
             />
           </label>
+
           <span className={cssClasses.separator}>{labels.separator}</span>
-          <label className={cssClasses.labelMax}>
+
+          <label className={cssClasses.label}>
             <input
-              className={cssClasses.inputMax}
+              className={`${cssClasses.input} ${cssClasses.inputMax}`}
               type="number"
               min={min}
               max={max}
@@ -67,20 +72,21 @@ export class RawRangeInput extends Component {
               disabled={isDisabled}
             />
           </label>
+
           <button
-            role="button"
-            className={cssClasses.submit}
+            type="submit"
+            className={cssClasses.button}
             disabled={isDisabled}
           >
             {labels.submit}
           </button>
-        </fieldset>
-      </form>
+        </form>
+      </div>
     );
   }
 }
 
-RawRangeInput.propTypes = {
+RangeInput.propTypes = {
   min: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,
   step: PropTypes.number.isRequired,
@@ -89,14 +95,15 @@ RawRangeInput.propTypes = {
     max: PropTypes.number,
   }).isRequired,
   cssClasses: PropTypes.shape({
+    root: PropTypes.string.isRequired,
+    noRefinement: PropTypes.string.isRequired,
     form: PropTypes.string.isRequired,
-    fieldset: PropTypes.string.isRequired,
-    labelMin: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    input: PropTypes.string.isRequired,
     inputMin: PropTypes.string.isRequired,
-    separator: PropTypes.string.isRequired,
-    labelMax: PropTypes.string.isRequired,
     inputMax: PropTypes.string.isRequired,
-    submit: PropTypes.string.isRequired,
+    separator: PropTypes.string.isRequired,
+    button: PropTypes.string.isRequired,
   }).isRequired,
   labels: PropTypes.shape({
     separator: PropTypes.string.isRequired,
@@ -105,4 +112,4 @@ RawRangeInput.propTypes = {
   refine: PropTypes.func.isRequired,
 };
 
-export default autoHideContainerHOC(headerFooterHOC(RawRangeInput));
+export default RangeInput;

src/components/RangeInput/__tests__/RangeInput-test.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { RawRangeInput } from '../RangeInput';
+import RangeInput from '../RangeInput';
 
-describe('RawRangeInput', () => {
+describe('RangeInput', () => {
   const defaultProps = {
     min: 0,
     max: 500,
     step: 1,
     values: {},
     cssClasses: {
+      root: 'root',
+      noRefinement: 'noRefinement',
       form: 'form',
-      fieldset: 'fieldset',
-      labelMin: 'labelMin',
+      label: 'label',
+      input: 'input',
       inputMin: 'inputMin',
-      separator: 'separator',
-      labelMax: 'labelMax',
       inputMax: 'inputMax',
-      submit: 'submit',
+      separator: 'separator',
+      button: 'button',
     },
     labels: {
       separator: 'to',
@@ -26,7 +27,7 @@ describe('RawRangeInput', () => {
   };
 
   const shallowRender = props =>
-    shallow(<RawRangeInput {...defaultProps} {...props} />);
+    shallow(<RangeInput {...defaultProps} {...props} />);
 
   it('expect to render', () => {
     const props = {};