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

[UI Framework] Define consistent default, small, and wide sizing for form fields, and support them within ExpressionItems. #12190

Merged
merged 2 commits into from
Jun 20, 2017
Merged

[UI Framework] Define consistent default, small, and wide sizing for form fields, and support them within ExpressionItems. #12190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
64a2ff6
Define consistent default, small, and wide sizing for form fields, an…
cjcenizal Jun 6, 2017
737e456
Make Settings search input full width.
cjcenizal Jun 8, 2017
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
2 changes: 1 addition & 1 deletion src/core_plugins/kibana/public/management/sections/settings/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
role="form"
class="kuiVerticalRhythm"
>
<div class="kuiSearchInput">
<div class="kuiSearchInput fullWidth">
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
<input
class="kuiSearchInput__input"
Expand Down
3 changes: 3 additions & 0 deletions ui_framework/components/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,6 @@ $toolBarItsemSpacing: 10px;
$globalFormControlHorizontalPadding: 12px;
$globalFormControlPadding: 3px $globalFormControlHorizontalPadding 4px;
$globalFormInputHeight: 30px;
$globalFormFieldDefaultWidth: 180px;
$globalFormFieldSmallWidth: 60px;
$globalFormFieldLargeWidth: 400px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Might want to follow a pattern with your sizes.

$globalFormFieldSmallWidth: $globalFormFieldDefaultWidth / 3;
$globalFormFieldLargeWidth: $globalFormFieldDefaultWidth * 2;

...etc. Just some sort of math so that when they sit next to each other they look like they were planned.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I like the idea of applying some rhythms that make sense, but as it is they're just chosen because they look good in different scenarios. Can we get together at some point and figure out a rhythm that we can apply here so the values aren't so arbitrary?

9 changes: 9 additions & 0 deletions ui_framework/components/form/_search_input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
$searchInputTextColor: #ACACAC;

.kuiSearchInput {
width: $globalFormFieldDefaultWidth;
display: inline-block;
position: relative;
font-size: $globalFontSize;
Expand Down Expand Up @@ -30,3 +31,11 @@ $searchInputTextColor: #ACACAC;
padding-left: 28px; /* 1 */
width: 100%; /* 2 */
}

.kuiSearchInput--small {
width: $globalFormFieldSmallWidth;
}

.kuiSearchInput--large {
width: $globalFormFieldLargeWidth;
}
14 changes: 12 additions & 2 deletions ui_framework/components/form/_select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
/**
* Avoid setting a width here, so that the width of the options can dynamically set the width.
*/
.kuiSelect {
@include select;
@include formControl;

&.kuiSelect-isInvalid {
@include formControlInvalid;
Expand All @@ -12,6 +14,14 @@
}
}

.kuiSelect--small {
width: $globalFormFieldSmallWidth;
}

.kuiSelect--medium {
width: $globalFormFieldDefaultWidth;
}

.kuiSelect--large {
min-width: 400px;
width: $globalFormFieldLargeWidth;
}
1 change: 1 addition & 0 deletions ui_framework/components/form/_static_input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
* 1. Have the same spatial footprint as the regular input.
*/
.kuiStaticInput {
width: $globalFormFieldDefaultWidth;
@include formControlBase;
border: 1px solid transparent; /* 1 */
background-color: transparent;
Expand Down
10 changes: 10 additions & 0 deletions ui_framework/components/form/_text_area.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.kuiTextArea {
width: $globalFormFieldDefaultWidth;

@include formControl;

&:focus {
Expand All @@ -14,3 +16,11 @@
.kuiTextArea--nonResizable {
resize: none;
}

.kuiTextArea--small {
width: $globalFormFieldSmallWidth;
}

.kuiTextArea--large {
width: $globalFormFieldLargeWidth;
}
8 changes: 4 additions & 4 deletions ui_framework/components/form/_text_input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.kuiTextInput {
width: $globalFormFieldDefaultWidth;

@include formControl;

&.kuiTextInput-isInvalid {
Expand All @@ -7,11 +9,9 @@
}

.kuiTextInput--small {
width: 100%;
max-width: 60px;
width: $globalFormFieldSmallWidth;
}

.kuiTextInput--large {
width: 100%;
max-width: 400px;
width: $globalFormFieldLargeWidth;
}
64 changes: 29 additions & 35 deletions ui_framework/dist/ui_framework.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1023,6 +1023,7 @@ body {
/* 1 */ }

.kuiSearchInput {
width: 180px;
display: inline-block;
position: relative;
font-size: 14px;
Expand Down Expand Up @@ -1078,6 +1079,15 @@ body {
outline: none;
border-color: #0079a5; }

.kuiSearchInput--small {
width: 60px; }

.kuiSearchInput--large {
width: 400px; }

/**
* Avoid setting a width here, so that the width of the options can dynamically set the width.
*/
.kuiSelect {
-webkit-appearance: none;
-moz-appearance: none;
Expand All @@ -1101,20 +1111,7 @@ body {
background-size: 14px;
background-repeat: no-repeat;
background-position: calc(100% - 8px);
/* 2 */
appearance: none;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
padding: 3px 12px 4px;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #191E23;
background-color: #ffffff;
border: 1px solid #DEDEDE;
border-radius: 4px;
transition: border-color 0.1s linear;
min-height: 30px;
/* 1 */ }
/* 2 */ }
.theme-dark .kuiSelect {
color: #cecece; }
.kuiSelect:invalid {
Expand All @@ -1137,36 +1134,27 @@ body {
.theme-dark .kuiSelect {
background-image: url('data:image/svg+xml;utf8,<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z" fill="#CECECE"/></svg>');
/* 1 */ }
.theme-dark .kuiSelect {
color: #cecece; }
.kuiSelect:invalid {
border-color: #D86051; }
.kuiSelect:focus {
outline: none;
border-color: #0079a5; }
.kuiSelect:disabled {
opacity: 0.4;
cursor: not-allowed; }
.theme-dark .kuiSelect {
background-color: #444444;
border-color: #444444; }
.theme-dark .kuiSelect:focus {
outline: none;
border-color: #0079a5; }
.kuiSelect.kuiSelect-isInvalid {
border-color: #D86051; }
.kuiSelect:focus {
box-shadow: none;
outline: none;
border-color: #0079a5; }

.kuiSelect--small {
width: 60px; }

.kuiSelect--medium {
width: 180px; }

.kuiSelect--large {
min-width: 400px; }
width: 400px; }

/**
* 1. Have the same spatial footprint as the regular input.
*/
.kuiStaticInput {
width: 180px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Expand All @@ -1183,6 +1171,7 @@ body {
color: #cecece; }

.kuiTextArea {
width: 180px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Expand Down Expand Up @@ -1224,7 +1213,14 @@ body {
.kuiTextArea--nonResizable {
resize: none; }

.kuiTextArea--small {
width: 60px; }

.kuiTextArea--large {
width: 400px; }

.kuiTextInput {
width: 180px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Expand Down Expand Up @@ -1260,12 +1256,10 @@ body {
border-color: #D86051; }

.kuiTextInput--small {
width: 100%;
max-width: 60px; }
width: 60px; }

.kuiTextInput--large {
width: 100%;
max-width: 400px; }
width: 400px; }

/**
* 1. We may want to put elements in here which have different heights.
Expand Down
10 changes: 8 additions & 2 deletions ui_framework/doc_site/src/views/expression/expression.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,18 @@
</div>
<div class="kuiExpressionItem__popoverContent">
<select class="kuiSelect">
<option label="A" selected="selected">A</option>
<option label="B">B</option>
<option label="C">C</option>
</select>

<input type="text" class="kuiTextInput kuiTextInput--small" value="100" />

<select class="kuiSelect kuiSelect--large">
<option label="is above" selected="selected">is above</option>
<option label="is below">is below</option>
<option label="is exactly">is exactly</option>
</select>
<input type="text" class="kuiTextInput" value="100" />
</div>
</div>
</div>

6 changes: 2 additions & 4 deletions ui_framework/doc_site/src/views/expression/expression_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,10 @@ import {
const expressionHtml = require('./expression.html');
const expressionJs = require('raw!./expression.js');


export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="Expression builder"
title="ExpressionItem"
source={[{
type: GuideSectionTypes.HTML,
code: expressionHtml,
Expand All @@ -25,7 +24,7 @@ export default props => (
}]}
>
<GuideText>
Expressions allow you to compress a complicated form into a small space.
ExpressionItems allow you to compress a complicated form into a small space.
Left aligned to the button by default. Can be optionally right aligned (as in the last example).
</GuideText>

Expand All @@ -37,4 +36,3 @@ export default props => (

</GuidePage>
);

22 changes: 22 additions & 0 deletions ui_framework/doc_site/src/views/form/search_input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,25 @@
placeholder="Search..."
>
</div>

<hr class="guideBreak">

<div class="kuiSearchInput kuiSearchInput--small">
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
<input
class="kuiSearchInput__input"
type="text"
placeholder="Small..."
>
</div>

<hr class="guideBreak">

<div class="kuiSearchInput kuiSearchInput--large">
<div class="kuiSearchInput__icon kuiIcon fa-search"></div>
<input
class="kuiSearchInput__input"
type="text"
placeholder="Large..."
>
</div>
8 changes: 7 additions & 1 deletion ui_framework/doc_site/src/views/form/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@

<hr class="guideBreak">

<select class="kuiSelect kuiSelect--large" disabled>
<select class="kuiSelect kuiSelect--small">
<option>Small</option>
</select>

<hr class="guideBreak">

<select class="kuiSelect kuiSelect--large">
<option>Large</option>
</select>
7 changes: 6 additions & 1 deletion ui_framework/doc_site/src/views/form/static_input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,6 @@
<input type="text" class="kuiStaticInput" value="Entered text" disabled>
<input
type="text"
class="kuiStaticInput"
value="Entered text"
disabled
>
44 changes: 36 additions & 8 deletions ui_framework/doc_site/src/views/form/text_area.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,47 @@
<textarea type="text" class="kuiTextArea" placeholder="Placeholder text">
</textarea>
<textarea
type="text"
class="kuiTextArea"
placeholder="Placeholder text"
></textarea>

<hr class="guideBreak">

<textarea type="text" class="kuiTextArea">
Entered text
<textarea
type="text"
class="kuiTextArea"
>
Entered text
</textarea>

<hr class="guideBreak">

<textarea type="text" class="kuiTextArea kuiTextArea-isInvalid">
</textarea>
<textarea
type="text"
class="kuiTextArea kuiTextArea-isInvalid"
></textarea>

<hr class="guideBreak">

<textarea type="text" class="kuiTextArea" disabled>
Disabled
<textarea
type="text"
class="kuiTextArea"
disabled
>
Disabled
</textarea>

<hr class="guideBreak">

<textarea
type="text"
class="kuiTextArea kuiTextArea--small"
placeholder="Small"
></textarea>

<hr class="guideBreak">

<textarea
type="text"
class="kuiTextArea kuiTextArea--large"
placeholder="Large"
></textarea>