kedo fucked around with this message at 17:02 on Nov 15, 2017

// SomePage.js

import { connect } from 'react-redux';
import LoadingPane from '../../common/LoadingPane';
import { 
  myData, 
  isThisThingLoading, 
  errorMessage 
} from './selectors';

const mapStateToProps = ( state ) => ({
    loading: isThisThingLoading( state ),
    data: myData( state ),
    error: errorMessage( state ),
})

// a person smarter than me would abstract this into a
// PageWithLoadingScreen component!
const SomePage = ({ loading, data, error }) => (
    <div>
        { (!loading && data) && (
             <ComponentToShowData data={ data } />
        ) }
        { (!loading && error ) && (
             <ComponentToShowError error={ error } />
        ) }
        <LoadingPane 
          loading={ loading } 
          message="I am getting data!" 
          subtext="(it will totally be worth the wait!)" 
        />
   </div>
)
export default connect( mapStateToProps )( SomePage );

<LoadingPane 
      loading={ loading } 
>
       <SomeOtherThing>Farts</SomeOtherThing>
       <img src={ butt } />
</LoadingPane>

const LoadingPane = ({ loading, children }) => (
    <div>
    <CSSTransitionGroup 
      transitionName="loadingPaneTransition" 
      transitionEnterTimeout={50} 
      transitionLeaveTimeout={250}
    > 
        { loading && (
        <div className="loadingPane">
            { children }
        </div>
        )}
    </CSSTransitionGroup>
    </div>
);

Lumpy fucked around with this message at 17:22 on Nov 15, 2017

Newf fucked around with this message at 00:11 on Nov 20, 2017

RobertKerans fucked around with this message at 12:28 on Nov 20, 2017

• Write (required) in the label text
  
• On submit, highlight the required invalid elements in our alert red and use the browser default error system to display a custom message where appropriate
  
• On required radio buttons or checkboxes, the fieldset that contains them gets the red alert colors and the error message
  
• On submit, highlight the non required but still invalid elements in our warning yellow, show the appropriate error but with a "leave blank" wording. This is currently being used on phone numbers in an example field. Might outright eliminate since this can always be filtered on the back end. But at the same time, if you mess up an optional phone number, its probably good feedback. Definitely an optional thing that we'll A/B test
  
• When the user has fixed the error, the field highlights in our success green. It doesn't do this by default, only if you've made an error.
  
• Currently we've got the same(basically) system running when you leave a field, not while you're typing just if you move on. I'm waffling back and forth on this and will probably just end up testing how it works with our user base.