How to use @pluralsight/ps-design-system-textinput - 6 common examples

To help you get started, we’ve selected a few @pluralsight/ps-design-system-textinput examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pluralsight / design-system / packages / searchinput / src / react / index.js View on Github external
}

    onClear(evt)
  }

  const clearBtn = onClear && 

  const icon = loading ? (
    
  ) : (
    
  )

  return (
    
  )
})
github pluralsight / design-system / packages / emptystate / src / react / __stories__ / index.story.js View on Github external
)
  return (
    
  )
}

const SearchInput = props => 
SearchInput.defaultProps = {
  appearance: TextInput.appearances.subtle,
  icon: ,
  placeholder: 'Find Something'
}

const InlineList = ({ children, ...props }) => {
  const styles = {
    list: { display: 'flex', flexWrap: 'wrap', justifyContent: 'center' },
    item: { display: 'inline-flex', margin: '0 5px 12px' }
  }

  return (
    <div style="{styles.list}">
      {React.Children.map(children, (child, index) =&gt; (
        <div style="{styles.item}">
          {child}
        </div></div>
github pluralsight / design-system / packages / site / pages / components / textinput.js View on Github external
<p>Install the component dependency:</p>
      <code>
        npm install @pluralsight/ps-design-system-textinput
      </code>

      <p>Include a React component in your project:</p>
      <code>
        import TextInput from '@pluralsight/ps-design-system-textinput'
      </code>

      default,
            <span>
              visual style (from <code>TextInput.appearances</code>)
            </span>
          ]),
          PropTypes.row([
            'disabled',
            'boolean',
            null,
            <code>false</code>,
            'standard input disable flag'
          ]),
          PropTypes.row([
            'error',
            'boolean',
github pluralsight / design-system / packages / site / pages / components / textinput.js View on Github external
'error',
            'boolean',
            null,
            <code>false</code>,
            'error state flag'
          ]),
          PropTypes.row([
            'icon',
            <code>*Icon</code>,
            null,
            null,
            'Icon component'
          ]),
          PropTypes.row([
            'iconAlign',
            PropTypes.union(TextInput.iconAligns),
            null,
            <code>left</code>,
            <span>
              horizontal icon placement (from <code>TextInput.iconAligns</code>)
            </span>
          ]),
          PropTypes.row([
            'label',
            'string',
            null,
            null,
            'identifying string for input'
          ]),
          PropTypes.row([
            'placeholder',
            'string',
github pluralsight / design-system / packages / typeahead / src / react / index.js View on Github external
&gt;
      
        }
        target={fieldRef}
      &gt;
        }
          onChange={handleInputChange}
          onFocus={handleInputFocus}
          ref={{ field: fieldRef, input: inputRef }}
          value={innerValue}
        /&gt;
      
    
  )
})
github pluralsight / design-system / packages / site / pages / components / textinput.js View on Github external
'placeholder',
            'string',
            null,
            null,
            'in-field usage hint'
          ]),
          PropTypes.row([
            'ref',
            'Ref || { field: Ref,input: Ref, }',
            null,
            null,
            'refs to access underlying elements'
          ]),
          PropTypes.row([
            'size',
            PropTypes.union(TextInput.sizes),
            null,
            <code>medium</code>,
            <span>
              horizontal icon placement (from <code>TextInput.sizes</code>)
            </span>
          ]),
          PropTypes.row([
            'subLabel',
            'string',
            null,
            null,
            'supporting text or error messaging'
          ])
        ]}
      /&gt;
      <p></p>

@pluralsight/ps-design-system-textinput

Design system components for text input

Apache-2.0
Latest version published 2 years ago

Package Health Score

48 / 100
Full package analysis

Similar packages