Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Branch] Update compressed form control styles #2174

Merged
merged 22 commits into from
Jul 30, 2019
Merged

[Feature Branch] Update compressed form control styles #2174

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
22569eb
Updated compressed visual style in mixin
Jul 9, 2019
3310a64
Compressed updates to from control groups
Jul 10, 2019
56e8477
Fix compressed state overrides
Jul 10, 2019
d590b08
Reduce horizontal padding for compressed
Jul 10, 2019
13969c2
Added a compressed option for from` euiFormControlLayoutPadding`
Jul 10, 2019
a69736e
Added compressed padding for inputs with icons
Jul 10, 2019
96be885
Fix readonly & compressed input groups
Jul 10, 2019
13cb4d5
Fix group heights
Jul 24, 2019
3939f7e
Icons and button icons in input groups
Jul 10, 2019
0cd0e14
cleanup
Jul 24, 2019
a6112e0
Update file picker with new compressed styles
Jul 24, 2019
1225224
More cleanup
Jul 25, 2019
e1bb513
Fix delimited compressed and fullwidth styles
Jul 26, 2019
2121702
[TEMP] Compress all the docs
Jul 26, 2019
0536eee
Firefox and delimited fixes
Jul 26, 2019
ab39aa4
Fixed EuiComboBox
Jul 10, 2019
70b9966
Added reduced padding for EuiColorPicker
Jul 10, 2019
f60e205
Fixed date pickers
Jul 30, 2019
348dc89
Variables for border-radius
Jul 30, 2019
83b8a09
Update comment numbering
Jul 30, 2019
bb7a3c4
Fix alignments
Jul 30, 2019
09c1cdf
Revert "[TEMP] Compress all the docs"
Jul 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions src-docs/src/views/form_controls/field_number.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default class extends Component {

this.state = {
value: '',
rangeValue: undefined,
};
}

Expand All @@ -18,10 +19,17 @@ export default class extends Component {
});
};

onRangeChange = value => {
this.setState({
rangeValue: value,
});
};

render() {
return (
<Fragment>
<EuiFieldNumber
compressed
placeholder="Placeholder text"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -31,6 +39,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldNumber
compressed
placeholder="Disabled"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -41,6 +50,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldNumber
compressed
placeholder="Loading"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -51,6 +61,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldNumber
compressed
placeholder="Loading and disabled"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -62,6 +73,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldNumber
compressed
placeholder="Read-only"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -76,11 +88,14 @@ export default class extends Component {
value={this.state.value}
onChange={this.onChange}
compressed
isInvalid
fullWidth
/>

<EuiSpacer size="m" />

<EuiFieldNumber
compressed
style={{ textAlign: 'right' }}
append={
<EuiText size="xs">
Expand Down
10 changes: 8 additions & 2 deletions src-docs/src/views/form_controls/field_password.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default class extends Component {
super(props);

this.state = {
value: '',
value: 'password',
};
}

Expand All @@ -21,6 +21,7 @@ export default class extends Component {
return (
<Fragment>
<EuiFieldPassword
compressed
placeholder="Placeholder text"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -34,6 +35,7 @@ export default class extends Component {
value={this.state.value}
onChange={this.onChange}
disabled
compressed
aria-label="Use aria labels when no actual label is in use"
/>

Expand All @@ -44,6 +46,7 @@ export default class extends Component {
value={this.state.value}
onChange={this.onChange}
isLoading
compressed
aria-label="Use aria labels when no actual label is in use"
/>

Expand All @@ -55,6 +58,7 @@ export default class extends Component {
onChange={this.onChange}
isLoading
disabled
compressed
aria-label="Use aria labels when no actual label is in use"
/>

Expand All @@ -65,6 +69,7 @@ export default class extends Component {
value={this.state.value}
onChange={this.onChange}
compressed
readOnly
/>

<EuiSpacer size="m" />
Expand All @@ -73,7 +78,8 @@ export default class extends Component {
placeholder="Compressed and loading"
value={this.state.value}
onChange={this.onChange}
isLoading
isInvalid
fullWidth
compressed
/>
</Fragment>
Expand Down
7 changes: 7 additions & 0 deletions src-docs/src/views/form_controls/field_search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export default class extends Component {
return (
<Fragment>
<EuiFieldSearch
compressed
placeholder="Placeholder text"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -30,6 +31,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldSearch
compressed
placeholder="Disabled"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -40,6 +42,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldSearch
compressed
placeholder="Loading"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -50,6 +53,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldSearch
compressed
placeholder="Loading and disabled"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -61,6 +65,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldSearch
compressed
placeholder="Read-only"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -75,6 +80,8 @@ export default class extends Component {
value={this.state.value}
onChange={this.onChange}
compressed
isInvalid
fullWidth
/>
</Fragment>
);
Expand Down
112 changes: 111 additions & 1 deletion src-docs/src/views/form_controls/field_text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import React, { Component, Fragment } from 'react';

import { EuiFieldText, EuiSpacer } from '../../../../src/components';
import {
EuiFieldText,
EuiSpacer,
EuiFormLabel,
EuiButtonEmpty,
EuiButtonIcon,
} from '../../../../src/components';
import { EuiIcon } from '../../../../src/components/icon';

export default class extends Component {
constructor(props) {
Expand All @@ -21,6 +28,7 @@ export default class extends Component {
return (
<Fragment>
<EuiFieldText
compressed
placeholder="Placeholder text"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -30,6 +38,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldText
compressed
placeholder="Disabled"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -40,6 +49,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldText
compressed
placeholder="Loading"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -50,6 +60,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldText
compressed
placeholder="Loading and disabled"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -61,6 +72,7 @@ export default class extends Component {
<EuiSpacer size="m" />

<EuiFieldText
compressed
placeholder="Read-only"
value={this.state.value}
onChange={this.onChange}
Expand All @@ -75,6 +87,104 @@ export default class extends Component {
value={this.state.value}
onChange={this.onChange}
compressed
isInvalid
fullWidth
/>

<EuiSpacer size="m" />

<EuiFieldText
compressed
placeholder="Prepend"
value={this.state.value}
onChange={this.onChange}
prepend={<EuiFormLabel>Label</EuiFormLabel>}
/>

<EuiSpacer size="m" />

<EuiFieldText
compressed
placeholder="Prepend"
value={this.state.value}
onChange={this.onChange}
prepend={<EuiIcon type="vector" />}
/>

<EuiSpacer size="m" />

<EuiFieldText
placeholder="Append"
value={this.state.value}
onChange={this.onChange}
compressed
append={<EuiFormLabel>px square</EuiFormLabel>}
/>

<EuiSpacer size="m" />

<EuiFieldText
placeholder="Append"
value={this.state.value}
onChange={this.onChange}
compressed
append={<EuiIcon type="vector" />}
/>

<EuiSpacer size="m" />

<EuiFieldText
placeholder="Prepend & Append"
value={this.state.value}
onChange={this.onChange}
compressed
prepend={<EuiIcon type="vector" />}
append={<EuiFormLabel>px square</EuiFormLabel>}
/>

<EuiSpacer size="m" />

<EuiFieldText
placeholder="Prepend & Append button"
value={this.state.value}
onChange={this.onChange}
compressed
prepend={
<EuiButtonEmpty size="xs" iconType="arrowDown" iconSide="right">
Button
</EuiButtonEmpty>
}
append={
<EuiButtonEmpty size="xs" iconType="arrowDown" iconSide="right">
Button
</EuiButtonEmpty>
}
/>

<EuiSpacer size="m" />

<EuiFieldText
placeholder="Icon button and label in prepend"
value={this.state.value}
onChange={this.onChange}
compressed
prepend={[
<EuiButtonIcon iconType="magnet" />,
<EuiFormLabel>field.name</EuiFormLabel>,
]}
/>

<EuiSpacer size="m" />

<EuiFieldText
placeholder="Icon button and label in append"
value={this.state.value}
onChange={this.onChange}
compressed
append={[
<EuiFormLabel>field.name</EuiFormLabel>,
<EuiButtonIcon iconType="magnet" />,
]}
/>
</Fragment>
);
Expand Down
10 changes: 8 additions & 2 deletions src-docs/src/views/form_controls/file_picker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export class FilePicker extends Component {
<EuiFilePicker
id="asdf2"
multiple
compressed
initialPromptText="Select or drag and drop multiple files"
onChange={files => {
this.onChange(files);
Expand All @@ -65,13 +66,14 @@ export class FilePicker extends Component {

<EuiSpacer size="m" />

<EuiFilePicker disabled initialPromptText="Disabled" />
<EuiFilePicker disabled compressed initialPromptText="Disabled" />

<EuiSpacer size="m" />

<EuiFilePicker
display="default"
initialPromptText="Select some files"
compressed
onChange={files => {
this.onChange(files);
}}
Expand All @@ -80,8 +82,12 @@ export class FilePicker extends Component {
<EuiSpacer size="m" />

<EuiFilePicker
id="asdf4"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤷‍♂

compressed
initialPromptText="Select some files"
display="default"
isInvalid
fullWidth
initialPromptText="Select a file"
onChange={files => {
this.onChange(files);
}}
Expand Down
Loading