Sha256: 7320f9d56d8c9cb4ad38c1c1f0c0ad050ec064201ff71c1a03a2d1e89b430d2a
Contents?: true
Size: 1.61 KB
Versions: 444
Compression:
Stored size: 1.61 KB
Contents
import React from 'react'
import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
const names = [
{ label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
{ label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
{ label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
{ label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
{ label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
]
const FormPillTruncatedText = (props) => {
return (
<>
<Typeahead
htmlOptions={{ style: { maxWidth: "240px" }}}
isMulti
label="Truncation Within Typeahead"
options={names}
truncate={1}
{...props}
/>
<Caption text="Form Pill Truncation"/>
<Card maxWidth="xs">
<FormPill
avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
onClick={() => alert('Click!')}
tabIndex={0}
truncate={1}
/>
<FormPill
icon="badge-check"
onClick={() => {alert('Click!')}}
tabIndex={0}
text="icon and a very long tag to show truncation"
truncate={1}
/>
<FormPill
onClick={() => {alert('Click!')}}
tabIndex={0}
text="form pill with a very long tag to show truncation"
truncate={1}
/>
</Card>
</>
)
}
export default FormPillTruncatedText
Version data entries
444 entries across 444 versions & 2 rubygems