Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

gestalt

Package Overview
Dependencies
Maintainers
4
Versions
2753
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gestalt - npm Package Compare versions

Comparing version 0.19.1-beta1 to 0.20.0-beta1

src/TextArea/__tests__/__snapshots__/TextArea.jest.js.snap
src/TextField/__tests__/__snapshots__/TextField.jest.js.snap

3

package.json
{
"name": "gestalt",
"version": "0.19.1-beta1",
"version": "0.20.0-beta1",
"license": "SEE LICENSE IN LICENSE",

@@ -92,2 +92,3 @@ "homepage": "https://pinterest.github.io/gestalt",

"rollup-watch": "^3.2.2",
"shelljs": "^0.7.7",
"slimerjs-core": "^0.12.0",

@@ -94,0 +95,0 @@ "style-loader": "^0.13.0",

5

README.md

@@ -25,6 +25,3 @@ # Gestalt

* Once the version is bumped in master, checkout that commit locally.
* Publish to NPM with `npm publish`.
* Tag the commit with `git tag v(NPM version)`.
* Push the tag to the repository with `git push upstream v(NPM version)`.
* Publish the tag, npm package, and docs with: `./scripts/publish.js`.
* Draft a release from the tag and update the release notes at https://github.com/pinterest/gestalt/releases
* Publish a new set of docs if necessary with `./scripts/ghpages.sh`.

2

src/Avatar/__docs__/Avatar-doc.js

@@ -12,3 +12,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -15,0 +15,0 @@ \`\`\`jsx

2

src/Button/__docs__/Button-doc.js

@@ -13,3 +13,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -16,0 +16,0 @@ \`\`\`jsx

2

src/Card/__docs__/Card-doc.js

@@ -19,3 +19,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -22,0 +22,0 @@ \`\`\`jsx

99

src/Column/__docs__/Column-doc.js
// @flow
import React, { PropTypes } from 'react';
import { card, md } from 'corkboard';
import Box from '../../Box/Box';
import Col from '../Column';

@@ -34,3 +35,3 @@ import { ns } from '../../../.corkboard/cards';

<Col {...props}>
<div className={'border p1 border-box'}>{children || `Col ${label}`}</div>
<Box padding={1} dangerouslySetInlineStyle={{ __style: { border: '1px solid #eee' } }}>{children || `Col ${label}`}</Box>
</Col>

@@ -54,3 +55,3 @@ );

\`\`\`javascript
<div>
<Box>
<Column xs={1} />

@@ -68,23 +69,23 @@ <Column xs={1} />

<Column xs={1} />
</div>
</Box>
<div>
<Box>
<Column xs={8} />
<Column xs={4} />
</div>
</Box>
<div>
<Box>
<Column xs={4} />
<Column xs={4} />
<Column xs={4} />
</div>
</Box>
<div>
<Box>
<Column xs={6} />
<Column xs={6} />
</div>
</Box>
\`\`\`
`,
<div>
<div className="mb2">
<Box>
<Box margin={{ bottom: 2 }}>
<Column xs={1} />

@@ -102,20 +103,20 @@ <Column xs={1} />

<Column xs={1} />
</div>
</Box>
<div className="mb2">
<Box margin={{ bottom: 2 }}>
<Column xs={8} />
<Column xs={4} />
</div>
</Box>
<div className="mb2">
<Box margin={{ bottom: 2 }}>
<Column xs={4} />
<Column xs={4} />
<Column xs={4} />
</div>
</Box>
<div>
<Box margin={{ bottom: 2 }}>
<Column xs={6} />
<Column xs={6} />
</div>
</div>);
</Box>
</Box>);

@@ -128,35 +129,35 @@ card(

\`\`\`html
<div>
<Box>
<Column xs={12} md={8} />
<Column xs={6} md={4} />
</div>
</Box>
<div>
<Box>
<Column xs={12} md={4} />
<Column xs={12} md={4} />
<Column xs={12} md={4} />
</div>
</Box>
<div>
<Box>
<Column xs={6} />
<Column xs={6} />
</div>
</Box>
\`\`\`
`,
<div>
<div className="mb2">
<Box margin={{ bottom: 2 }}>
<Column xs={12} md={8} />
<Column xs={6} md={4} />
</div>
</Box>
<div className="mb2">
<Box margin={{ bottom: 2 }}>
<Column xs={12} md={4} />
<Column xs={12} md={4} />
<Column xs={12} md={4} />
</div>
</Box>
<div className="mb2">
<Box margin={{ bottom: 2 }}>
<Column xs={6} />
<Column xs={6} />
</div>
</Box>
</div>);

@@ -170,33 +171,33 @@

\`\`\`javascript
<div className="mxn2">
<Box margin={{ left: -2, right: -2 }}>
<Col xs={6}>
<div className="p2 border-box">
<Box padding={2}>
Col A
</div>
</Box>
</Col>
<Col xs={6}>
<div className="p2 border-box">
<Box padding={2}>
Col B
</div>
</Box>
</Col>
</div>
</Box>
\`\`\`
`,
<div className="py2" style={{ backgroundColor: 'rgba(0, 0, 255, 0.1)' }}>
<div className="mxn2" style={{ backgroundColor: 'rgba(255, 0, 0, 0.1)' }}>
<Box padding={{ y: 2 }} dangerouslySetInlineStyle={{ __style: { backgroundColor: 'rgba(0, 0, 255, 0.1)' } }}>
<Box margin={{ left: -2, right: -2 }} dangerouslySetInlineStyle={{ __style: { backgroundColor: 'rgba(255, 0, 0, 0.1)' } }}>
<Col xs={6}>
<div className="p2 border-box">
<div style={{ backgroundColor: 'rgba(255, 0, 0, 0.1)' }}>
<Box padding={2}>
<Box dangerouslySetInlineStyle={{ __style: { backgroundColor: 'rgba(255, 0, 0, 0.1)' } }}>
Col A
</div>
</div>
</Box>
</Box>
</Col>
<Col xs={6}>
<div className="p2 border-box">
<div style={{ backgroundColor: 'rgba(255, 0, 0, 0.1)' }}>
<Box padding={2}>
<Box dangerouslySetInlineStyle={{ __style: { backgroundColor: 'rgba(255, 0, 0, 0.1)' } }}>
Col B
</div>
</div>
</Box>
</Box>
</Col>
</div>
</div>);
</Box>
</Box>);

5

src/Container/__docs__/Container-doc.js

@@ -10,3 +10,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -27,3 +27,4 @@ \`\`\`javascript

\`\`\`html
<Box color="gray" padding={2}> <Container>
<Box color="gray" padding={2}>
<Container>
<Box color="white" padding={2}>

@@ -30,0 +31,0 @@ Centered content

24

src/Divider/__docs__/Divider-doc.js
// @flow
import React from 'react';
import { card, md, ns } from 'corkboard';
import { card, md } from 'corkboard';
import Box from '../../Box/Box';
import Divider from '../Divider';
import { ns } from '../../../.corkboard/cards';

@@ -9,7 +11,17 @@ ns('Divider');

card('Divider usage',
md`If you have two things that need to be separated, put a \`Divider\` between them.`,
<div>
<div className="p1">{'Some content'}</div>
md`If you have two things that need to be separated, put a \`Divider\` between them.
\`\`\`html
<Box>
<Box padding={1}>{'Some content'}</Box>
<Divider />
<Box padding={1}>{'Other content'}</Box>
</Box>
\`\`\`
`,
<Box>
<Box padding={1}>{'Some content'}</Box>
<Divider />
<div className="p1">{'Other content'}</div>
</div>);
<Box padding={1}>{'Other content'}</Box>
</Box>);

24

src/ErrorFlyout/__docs__/ErrorFlyout-doc.js
// @flow
import React from 'react';
import { card, md } from 'corkboard';
import Box from '../../Box/Box';
import Button from '../../Button/Button';

@@ -16,3 +17,3 @@ import Divider from '../../Divider/Divider';

card('FlowType',
card('FlowTypes',
md`

@@ -30,4 +31,4 @@ \`\`\`jsx

`,
<div>
<div className="py2">
<Box>
<Box padding={{ y: 2 }}>
<Heading size="xs">Sizes</Heading>

@@ -38,3 +39,3 @@ <Divider />

<Text><b>md:</b> 320px</Text>
<div className="py2">
<Box padding={{ y: 2 }}>
<Text italic>

@@ -44,5 +45,5 @@ Sizes are subject to change as we continue to gather input from design. For the time

</Text>
</div>
</div>
</div>
</Box>
</Box>
</Box>
);

@@ -85,4 +86,4 @@

atom => (
<div className="flex">
<div className="py2">
<Box xs={{ display: 'flex' }}>
<Box padding={{ y: 2 }} className="py2">
<ErrorFlyout

@@ -101,5 +102,4 @@ idealDirection="down"

/>
</div>
</div>
</Box>
</Box>
));

51

src/Flyout/__docs__/Flyout-doc.js
// @flow
import React from 'react';
import { card, md } from 'corkboard';
import Box from '../../Box/Box';
import Button from '../../Button/Button';

@@ -14,3 +15,3 @@ import Divider from '../../Divider/Divider';

card('FlowType',
card('FlowTypes',
md`

@@ -29,4 +30,4 @@ \`\`\`jsx

`,
<div>
<div className="py2">
<Box>
<Box padding={{ y: 2 }}>
<Heading size="xs">Sizes</Heading>

@@ -39,3 +40,3 @@ <Divider />

<Text><b>xl:</b> 496px</Text>
<div className="py2">
<Box padding={{ y: 2 }}>
<Text italic>

@@ -45,5 +46,5 @@ Sizes are subject to change as we continue to gather input from design. For the time

</Text>
</div>
</div>
</div>
</Box>
</Box>
</Box>
);

@@ -239,5 +240,7 @@

atom => (
<div>
<div className="py2">
<span className="px1"><Text bold inline>#1</Text></span>
<Box>
<Box alignItems="center" padding={{ y: 2 }} xs={{ display: 'flex' }}>
<Box padding={{ x: 1 }}>
<Text bold inline>#1</Text>
</Box>
<Flyout

@@ -261,5 +264,7 @@ accessibilityCloseLabel="close"

</Flyout>
</div>
<div className="py2">
<span className="px1"><Text bold inline>#2</Text></span>
</Box>
<Box alignItems="center" padding={{ y: 2 }} xs={{ display: 'flex' }}>
<Box padding={{ x: 1 }}>
<Text bold inline>#2</Text>
</Box>
<Flyout

@@ -282,5 +287,7 @@ accessibilityCloseLabel="close"

</Flyout>
</div>
<div className="py2">
<span className="px1"><Text bold inline>#3</Text></span>
</Box>
<Box alignItems="center" padding={{ y: 2 }} xs={{ display: 'flex' }}>
<Box padding={{ x: 1 }}>
<Text bold inline>#3</Text>
</Box>
<Flyout

@@ -302,5 +309,7 @@ accessibilityCloseLabel="close"

</Flyout>
</div>
<div className="py2">
<span className="px1"><Text bold inline>#4</Text></span>
</Box>
<Box alignItems="center" padding={{ y: 2 }} xs={{ display: 'flex' }}>
<Box padding={{ x: 1 }}>
<Text bold inline>#4</Text>
</Box>
<Flyout

@@ -322,4 +331,4 @@ accessibilityCloseLabel="close"

</Flyout>
</div>
</div>
</Box>
</Box>
));

2

src/Heading/__docs__/Heading-doc.js

@@ -9,3 +9,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -12,0 +12,0 @@ \`\`\`jsx

2

src/Icon/__docs__/Icon-doc.js

@@ -12,3 +12,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -15,0 +15,0 @@ \`\`\`jsx

2

src/IconButton/__docs__/IconButton-doc.js

@@ -13,3 +13,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -16,0 +16,0 @@ \`\`\`jsx

2

src/Image/__docs__/Image-doc.js

@@ -15,3 +15,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`\`\`\`js

@@ -18,0 +18,0 @@ type ImageProps = {

27

src/Label/__docs__/Label-doc.js
// @flow
import React from 'react';
import { card, md } from 'corkboard';
import Box from '../../Box/Box';
import Switch from '../../Switch/Switch';
import Text from '../../Text/Text';
import Label from '../Label';

@@ -10,3 +13,3 @@ import { ns } from '../../../.corkboard/cards';

card('FlowType',
card('FlowTypes',
md`

@@ -23,4 +26,3 @@ \`\`\`js

md`
Whenever you are using a [Switch](#/Switch) component, you should use a \`Label\` with it.
To control the toggle, you can click on the Switch itself or the label 'Live example' above it.
Whenever you are using a [SelectList](#/SelectList), [Switch](#/Switch), [TextField](#/TextField) or [TextArea](#/TextArea) component, you should use a \`Label\` with it.
\`\`\`html

@@ -37,6 +39,15 @@ <Label htmlFor="switchExample">

`,
<div>
<Label htmlFor="switchExample">
Live example
</Label>
</div>);
atom => (
<Box>
<Box padding={{ y: 1 }}>
<Label htmlFor="switchExample">
<Text>Live example</Text>
</Label>
</Box>
<Switch
onChange={() => atom.reset({ switched: !atom.deref().switched })}
id="switchExample"
switched={atom.deref().switched}
/>
</Box>
));

2

src/Letterbox/__docs__/Letterbox-doc.js

@@ -19,3 +19,3 @@ // @flow

card('FlowType', md`
card('FlowTypes', md`
\`\`\`javascript

@@ -22,0 +22,0 @@ type Props = {

2

src/Link/__docs__/Link-doc.js

@@ -13,3 +13,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -16,0 +16,0 @@ \`\`\`js

2

src/Mask/__docs__/Mask-doc.js

@@ -13,3 +13,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -16,0 +16,0 @@ \`\`\`js

2

src/Masonry/__docs__/Masonry-doc.js

@@ -13,3 +13,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -16,0 +16,0 @@ \`\`\`js

20

src/Masonry/Masonry.js

@@ -16,3 +16,2 @@ // @flow

gutterWidth: number,
initialHeight: number,
items: T[],

@@ -22,2 +21,3 @@ minCols: number,

scrollContainer: HTMLElement,
serverRender: boolean,
|};

@@ -91,5 +91,5 @@

fetchingFrom: false,
height: props.initialHeight,
height: 0,
gridItems: [],
serverItems: this.serverItems(props.items),
serverItems: props.serverRender ? this.serverItems(props.items) : null,
minHeight: 0,

@@ -745,8 +745,2 @@ mounted: false,

/**
* Sets an initial height for the masonry wrapper.
* Typically used when restoring scroll position after navigation.
*/
initialHeight: React.PropTypes.number,
/**
* An array of all objects to display in the grid.

@@ -777,2 +771,8 @@ */

}),
/**
* Whether or not this instance is server rendered.
* TODO: If true, generate and output CSS for the initial server render.
*/
serverRender: React.PropTypes.bool,
};

@@ -783,5 +783,5 @@

gutterWidth: null,
initialHeight: 0,
minCols: 3,
scrollContainer: typeof window !== 'undefined' ? window : null,
serverRender: false,
loadItems: () => {},

@@ -788,0 +788,0 @@ };

2

src/Modal/__docs__/Modal-doc.js

@@ -21,3 +21,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -24,0 +24,0 @@ \`\`\`jsx

4

src/RadioButton/__docs__/RadioButton-doc.js

@@ -13,6 +13,6 @@ // @flow

card('PropTypes',
card('FlowTypes',
md`
\`\`\`jsx
type props: {
type Props = {
checked?: boolean,

@@ -19,0 +19,0 @@ id: string,

2

src/SearchField/__docs__/SearchField-doc.js

@@ -13,3 +13,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -16,0 +16,0 @@ \`\`\`jsx

2

src/SegmentedControl/__docs__/SegmentedControl-doc.js

@@ -16,3 +16,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -19,0 +19,0 @@ \`\`\`js

9

src/SelectList/__docs__/SelectList-doc.js
// @flow
import React from 'react';
import { card, md } from 'corkboard';
import Box from '../../Box/Box';
import Label from '../../Label/Label';
import SelectList from '../SelectList';
import Text from '../../Text/Text';
import { ns } from '../../../.corkboard/cards';

@@ -60,3 +63,7 @@

<div>
<label htmlFor="country">Country:</label>
<Box padding={{ y: 1 }}>
<Label htmlFor="country">
<Text>Country</Text>
</Label>
</Box>
<SelectList

@@ -63,0 +70,0 @@ id="country"

29

src/Spinner/__docs__/Spinner-doc.js
// @flow
import React from 'react';
import { card, md } from 'corkboard';
import Box from '../../Box/Box';
import Button from '../../Button/Button';
import Text from '../../Text/Text';
import Spinner from '../Spinner';

@@ -9,3 +12,3 @@ import { ns } from '../../../.corkboard/cards';

card('FlowType',
card('FlowTypes',
md`

@@ -25,13 +28,15 @@ \`\`\`javascript

`, atom => (
<div>
<button
onClick={() => {
atom.reset({ show: !atom.deref().show });
}}
>
{!atom.deref().show ? 'Show spinner' : 'Hide spinner'}
</button>
<Spinner show={atom.deref().show} accessibilityLabel="Example spinner" />
<p>Data</p>
</div>
<Box>
<Box padding={{ y: 1 }}>
<Button
inline
text={!atom.deref().show ? 'Show spinner' : 'Hide spinner'}
onClick={() => {
atom.reset({ show: !atom.deref().show });
}}
/>
</Box>
<Spinner show={!!atom.deref().show} accessibilityLabel="Example spinner" />
<Text>Data</Text>
</Box>
), { heading: false, initialState: { show: true } });

2

src/Spinner/Spinner.js

@@ -35,3 +35,3 @@ // @flow

componentDidUpdate() {
// cleanup any timeouts that cause dthe state change
// cleanup any timeouts that caused the state change
clearTimeout(this.timeout);

@@ -38,0 +38,0 @@

31

src/Switch/__docs__/Switch-doc.js
// @flow
import React from 'react';
import { card, md } from 'corkboard';
import Box from '../../Box/Box';
import Label from '../../Label/Label';
import Switch from '../Switch';
import Text from '../../Text/Text';
import { ns } from '../../../.corkboard/cards';

@@ -12,3 +15,3 @@

card('FlowType',
card('FlowTypes',
md`

@@ -25,4 +28,4 @@ \`\`\`js

atom => (
<div className="flex mxn1">
<div className="p1">
<Box xs={{ display: 'flex' }} margin={{ left: -1, right: -1 }}>
<Box padding={1}>
<Switch

@@ -32,4 +35,4 @@ onChange={() => atom.reset()}

/>
</div>
<div className="p1">
</Box>
<Box padding={1}>
<Switch

@@ -40,4 +43,4 @@ onChange={() => atom.reset()}

/>
</div>
</div>
</Box>
</Box>
));

@@ -51,3 +54,3 @@

<Label htmlFor="switchExample">
<Text size="sm">Live example</Text>
<Text>Live example</Text>
</Label>

@@ -62,6 +65,8 @@ <Switch

atom => (
<div>
<div>
<label htmlFor="switchExample">Live example</label>
</div>
<Box>
<Box padding={{ y: 1 }}>
<Label htmlFor="switchExample">
<Text>Live example</Text>
</Label>
</Box>
<Switch

@@ -72,3 +77,3 @@ onChange={() => atom.reset({ switched: !atom.deref().switched })}

/>
</div>
</Box>
));

2

src/Text/__docs__/Text-doc.js

@@ -14,3 +14,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -17,0 +17,0 @@ \`\`\`jsx

2

src/TextArea/__docs__/TextArea-doc.js

@@ -10,3 +10,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -13,0 +13,0 @@ \`\`\`jsx

26

src/TextArea/__tests__/TextArea.jest.js

@@ -6,2 +6,3 @@ /* eslint-env jest */

import React from 'react';
import { create } from 'react-test-renderer';
import { shallow } from 'enzyme';

@@ -31,2 +32,27 @@ import TextArea from '../TextArea';

});
it('TextArea normal', () => {
const tree = create(
<TextArea
id="test"
onChange={jest.fn()}
onFocus={jest.fn()}
onBlur={jest.fn()}
/>
).toJSON();
expect(tree).toMatchSnapshot();
});
it('TextArea with error', () => {
const tree = shallow(
<TextArea
errorMessage="error message"
id="test"
onChange={jest.fn()}
onFocus={jest.fn()}
onBlur={jest.fn()}
/>
).html();
expect(tree).toMatchSnapshot();
});
});

16

src/TextArea/TextArea.js

@@ -47,3 +47,5 @@ // @flow

handleBlur = (e: Event) => {
this.setState({ errorIsOpen: false });
if (this.props.errorMessage) {
this.setState({ errorIsOpen: false });
}
if (e.target instanceof HTMLTextAreaElement && this.props.onBlur) {

@@ -55,3 +57,5 @@ this.props.onBlur(e.target.value);

handleFocus = (e: Event) => {
this.setState({ errorIsOpen: true });
if (this.props.errorMessage) {
this.setState({ errorIsOpen: true });
}
if (e.target instanceof HTMLTextAreaElement && this.props.onFocus) {

@@ -76,3 +80,3 @@ this.props.onFocus(e.target.value);

const textArea = (onBlur, onFocus) => (
const textArea = () => (
<textarea

@@ -84,5 +88,5 @@ aria-describedby={errorMessage && this.state.focused ? `${id}-gestalt-error` : null}

name={name}
onBlur={onBlur}
onBlur={this.handleBlur}
onChange={this.handleChange}
onFocus={onFocus}
onFocus={this.handleFocus}
placeholder={placeholder}

@@ -102,3 +106,3 @@ rows={3}

size="sm"
trigger={textArea(this.handleBlur, this.handleFocus)}
trigger={textArea()}
/>

@@ -105,0 +109,0 @@ ) : textArea();

2

src/TextField/__docs__/TextField-doc.js

@@ -10,3 +10,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -13,0 +13,0 @@ \`\`\`jsx

26

src/TextField/__tests__/TextField.jest.js
/* eslint-env jest */
import React from 'react';
import { create } from 'react-test-renderer';
import { shallow } from 'enzyme';

@@ -27,2 +28,27 @@ import TextField from '../TextField';

});
it('TextField normal', () => {
const tree = create(
<TextField
id="test"
onChange={jest.fn()}
onFocus={jest.fn()}
onBlur={jest.fn()}
/>
).toJSON();
expect(tree).toMatchSnapshot();
});
it('TextField with error', () => {
const tree = shallow(
<TextField
errorMessage="error message"
id="test"
onChange={jest.fn()}
onFocus={jest.fn()}
onBlur={jest.fn()}
/>
).html();
expect(tree).toMatchSnapshot();
});
});

16

src/TextField/TextField.js

@@ -55,3 +55,5 @@ // @flow

handleBlur = (e: Event) => {
this.setState({ errorIsOpen: false });
if (this.props.errorMessage) {
this.setState({ errorIsOpen: false });
}
if (e.target instanceof HTMLInputElement && this.props.onBlur) {

@@ -63,3 +65,5 @@ this.props.onBlur(e.target.value);

handleFocus = (e: Event) => {
this.setState({ errorIsOpen: true });
if (this.props.errorMessage) {
this.setState({ errorIsOpen: true });
}
if (e.target instanceof HTMLInputElement && this.props.onFocus) {

@@ -85,3 +89,3 @@ this.props.onFocus(e.target.value);

const textField = (onBlur, onFocus) => (
const textField = () => (
<input

@@ -92,5 +96,5 @@ aria-describedby={errorMessage && this.state.focused ? `${id}-gestalt-error` : null}

id={id}
onBlur={onBlur}
onBlur={this.handleBlur}
onChange={this.handleChange}
onFocus={onFocus}
onFocus={this.handleFocus}
placeholder={placeholder}

@@ -110,3 +114,3 @@ type={type}

size="sm"
trigger={textField(this.handleBlur, this.handleFocus)}
trigger={textField()}
/>

@@ -113,0 +117,0 @@ ) : textField();

2

src/Toast/__docs__/Toast-doc.js

@@ -12,3 +12,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -15,0 +15,0 @@ \`\`\`jsx

2

src/Tooltip/__docs__/Tooltip-doc.js

@@ -13,3 +13,3 @@ // @flow

card('FlowType',
card('FlowTypes',
md`

@@ -16,0 +16,0 @@ \`\`\`jsx

dist/gestalt.css

Sorry, the diff of this file is not supported yet

dist/gestalt.es.js

Sorry, the diff of this file is too big to display

dist/gestalt.js

Sorry, the diff of this file is too big to display

src/LegacyColors.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc