Fixes for #907

[jimmaaay]

Hi there. In my PR I have included small fixes for the issue 907. Whilst doing this I noticed something small, not really worth an issue. The nc-toggle-switch button gets given the class of undefined when editing a post. I tracked this down to the file src/components/UI/Toggle getting passed classNameSwitch which in this case was not passed into it. My proposed solution for this is below.

Also really love the work that everyone put into this :)

import React from 'react'
import ReactToggled from 'react-toggled';
import c from 'classnames';

export const Toggle = ({
  active,
  onChange,
  className,
  classNameBackground,
  classNameSwitch = '',
  onFocus,
  onBlur
}) =>
  <ReactToggled on={active} onToggle={onChange}>
    {({on, getElementTogglerProps}) => (
      <span
        className={c('nc-toggle', className, { 'nc-toggle-active': on })}
        role="switch"
        aria-checked={on.toString()}
        onFocus={onFocus}
        onBlur={onBlur}
        {...getElementTogglerProps()}
      >
        <span className={`nc-toggle-background ${classNameBackground}`}/>
        <span className={`nc-toggle-switch ${classNameSwitch}`}/>
      </span>
    )}
  </ReactToggled>;

Fixes #907.

[verythorough]

Deploy preview ready!

Built with commit 794040a

https://deploy-preview-976--netlify-cms-www.netlify.com

[verythorough]

Deploy preview ready!

Built with commit 794040a

https://deploy-preview-976--cms-demo.netlify.com

[tech4him1]

Thanks @jimmaaay! I was seeing slightly different default values, can you check in your browser and change them if necessary?

[tech4him1]

For me, this was 36.8px, can you adjust it a bit?

[tech4him1]

For me, this was 9.4px, can you adjust it a bit?

[erquhart]

I'd rather avoid partial pixels, and I also want to avoid locking down all browsers to this solution if possible. Taking a quick look locally.

[erquhart]

@tech4him1 updated.

[tech4him1]

👍