Merge pull request #4878 from ebonow/documentation-improvements-21-10-24

Documentation improvements 21-10-24
JedWatson · Oct 28, 2021 · e67ea16 · e67ea16
2 parents f6c7802 + 6bc1f57
commit e67ea16
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 64 deletions.
diff --git a/docs/ExampleWrapper.tsx b/docs/ExampleWrapper.tsx
@@ -27,15 +27,13 @@ interface Props {
 }
 
 interface State {
-  readonly isHovered: boolean;
   readonly showCode: boolean;
 }
 
 export default class ExampleWrapper extends Component<Props, State> {
-  state: State = { isHovered: false, showCode: false };
+  state: State = { showCode: false };
   static defaultProps = { isEditable: true };
-  handleEnter = () => this.setState({ isHovered: true });
-  handleLeave = () => this.setState({ isHovered: false });
+
   renderCodeSample = () => {
     let { raw } = this.props;
     let { showCode } = this.state;
@@ -100,13 +98,11 @@ export default class ExampleWrapper extends Component<Props, State> {
   };
 
   render() {
-    const { isHovered } = this.state;
-
     return (
-      <div onMouseEnter={this.handleEnter} onMouseLeave={this.handleLeave}>
+      <div>
         <ExampleHeading>
           <h4>{this.props.label}</h4>
-          <Actions show={isHovered}>
+          <Actions>
             {this.renderSourceViewOption()}
             {this.renderCSBButton()}
           </Actions>
@@ -123,7 +119,6 @@ const ExampleHeading = (props: any) => (
     css={{
       alignItems: 'center',
       display: 'flex',
-      justifyContent: 'space-between',
       paddingBottom: '1em',
       paddingTop: '1.25em',
 
@@ -177,9 +172,6 @@ const actionCSS: CSSObject = {
     backgroundColor: colors.neutral10,
     bottom: -1,
   },
-  ':focus': {
-    outline: 0,
-  },
 };
 
 interface ActionProps {
@@ -214,18 +206,23 @@ const AAction = ({
   );
 };
 
-const Actions = ({
-  show,
-  ...props
-}: { readonly show: boolean } & JSX.IntrinsicElements['div']) => (
+const Actions = (props: JSX.IntrinsicElements['div']) => (
   <div
     css={{
+      flex: '1 1',
       alignItems: 'center',
       display: 'flex',
-      justifyContent: 'space-between',
-      opacity: show ? 1 : 0.2,
+      justifyContent: 'flex-end',
+      opacity: 0.2,
       transition: 'opacity 140ms',
       transitionDelay: '140ms',
+
+      '&:hover': {
+        opacity: 1,
+      },
+      '&:focus-within': {
+        opacity: 1,
+      },
     }}
     {...props}
   />

diff --git a/docs/examples/BasicSingle.tsx b/docs/examples/BasicSingle.tsx
@@ -2,10 +2,12 @@ import React, { Component, Fragment } from 'react';
 
 import Select from 'react-select';
 import { colourOptions } from '../data';
-import { Note } from '../styled-components';
 
-const Checkbox = (props: JSX.IntrinsicElements['input']) => (
-  <input type="checkbox" {...props} />
+const Checkbox = ({ children, ...props }: JSX.IntrinsicElements['input']) => (
+  <label style={{ marginRight: '1em' }}>
+    <input type="checkbox" {...props} />
+    {children}
+  </label>
 );
 
 interface State {
@@ -34,9 +36,19 @@ export default class SingleSelect extends Component<{}, State> {
   toggleRtl = () => this.setState((state) => ({ isRtl: !state.isRtl }));
   toggleSearchable = () =>
     this.setState((state) => ({ isSearchable: !state.isSearchable }));
+
   render() {
+    const {
+      toggleClearable,
+      toggleDisabled,
+      toggleLoading,
+      toggleRtl,
+      toggleSearchable,
+    } = this;
+
     const { isClearable, isSearchable, isDisabled, isLoading, isRtl } =
       this.state;
+
     return (
       <Fragment>
         <Select
@@ -51,47 +63,32 @@ export default class SingleSelect extends Component<{}, State> {
           name="color"
           options={colourOptions}
         />
-        <Note Tag="label">
-          <Checkbox
-            checked={isClearable}
-            onChange={this.toggleClearable}
-            id="cypress-single__clearable-checkbox"
-          />
-          Clearable
-        </Note>
-        <Note Tag="label" style={{ marginLeft: '1em' }}>
-          <Checkbox
-            checked={isSearchable}
-            onChange={this.toggleSearchable}
-            id="cypress-single__searchable-checkbox"
-          />
-          Searchable
-        </Note>
-        <Note Tag="label" style={{ marginLeft: '1em' }}>
-          <Checkbox
-            checked={isDisabled}
-            onChange={this.toggleDisabled}
-            id="cypress-single__disabled-checkbox"
-          />
-          Disabled
-        </Note>
-        <Note Tag="label" style={{ marginLeft: '1em' }}>
-          <Checkbox
-            checked={isLoading}
-            onChange={this.toggleLoading}
-            id="cypress-single__loading-checkbox"
-          />
-          Loading
-        </Note>
-        <Note Tag="label" style={{ marginLeft: '1em' }}>
-          <Checkbox
-            type="checkbox"
-            checked={isRtl}
-            onChange={this.toggleRtl}
-            id="cypress-single__rtl-checkbox"
-          />
-          RTL
-        </Note>
+
+        <div
+          style={{
+            color: 'hsl(0, 0%, 40%)',
+            display: 'inline-block',
+            fontSize: 12,
+            fontStyle: 'italic',
+            marginTop: '1em',
+          }}
+        >
+          <Checkbox checked={isClearable} onChange={toggleClearable}>
+            Clearable
+          </Checkbox>
+          <Checkbox checked={isSearchable} onChange={toggleSearchable}>
+            Searchable
+          </Checkbox>
+          <Checkbox checked={isDisabled} onChange={toggleDisabled}>
+            Disabled
+          </Checkbox>
+          <Checkbox checked={isLoading} onChange={toggleLoading}>
+            Loading
+          </Checkbox>
+          <Checkbox checked={isRtl} onChange={toggleRtl}>
+            RTL
+          </Checkbox>
+        </div>
       </Fragment>
     );
   }

diff --git a/docs/examples/StyledSingle.tsx b/docs/examples/StyledSingle.tsx
@@ -4,7 +4,7 @@ import chroma from 'chroma-js';
 import { ColourOption, colourOptions } from '../data';
 import Select, { StylesConfig } from 'react-select';
 
-const dot = (color = '#ccc') => ({
+const dot = (color = 'transparent') => ({
   alignItems: 'center',
   display: 'flex',
 
@@ -52,7 +52,7 @@ const colourStyles: StylesConfig<ColourOption> = {
     };
   },
   input: (styles) => ({ ...styles, ...dot() }),
-  placeholder: (styles) => ({ ...styles, ...dot() }),
+  placeholder: (styles) => ({ ...styles, ...dot('#ccc') }),
   singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
 };