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

Review updates #10

Merged
merged 1 commit into from
May 29, 2020
Merged

Review updates #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
194 changes: 93 additions & 101 deletions src-docs/src/views/expression/columns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import React, { useState } from 'react';

import {
EuiPopoverTitle,
EuiFlexItem,
EuiFlexGroup,
EuiPopover,
EuiSelect,
EuiComboBox,
Expand Down Expand Up @@ -103,7 +101,7 @@ export default () => {
};

const renderPopover1 = () => (
<div>
<div style={{ width: 300 }}>
Copy link
Author

Choose a reason for hiding this comment

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

These just makes sure the popover doesn't change size on selection change.

<EuiPopoverTitle>INDICES</EuiPopoverTitle>
<EuiComboBox
placeholder="Select one or more indices"
Expand All @@ -118,109 +116,103 @@ export default () => {
);

const renderPopover2 = () => (
<div>
<div style={{ width: 150 }}>
<EuiPopoverTitle>WHEN</EuiPopoverTitle>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false} style={{ width: 150 }}>
<EuiSelect
compressed
value={example2.value}
onChange={changeExample2}
options={[
{
value: 'count()',
text: 'count()',
},
{
value: 'sum()',
text: 'sum()',
},
{
value: 'min()',
text: 'min()',
},
{ value: 'max()', text: 'max()' },
]}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSelect
compressed
value={example2.value}
onChange={changeExample2}
options={[
{
value: 'count()',
text: 'count()',
},
{
value: 'sum()',
text: 'sum()',
},
{
value: 'min()',
text: 'min()',
},
{ value: 'max()', text: 'max()' },
]}
/>
</div>
);

return (
<EuiFlexGroup>
<EuiFlexItem style={{ maxWidth: 500 }}>
<EuiPopover
id="popover1"
button={
<EuiExpression
description="indices"
display="columns"
value={example1.value}
isInvalid={
selectedOptions && selectedOptions.length > 0 ? false : true
}
isActive={example1.isOpen}
onClick={openExample1}
/>
}
zIndex={200}
isOpen={example1.isOpen}
closePopover={closeExample1}
ownFocus
panelPaddingSize="s"
anchorPosition="downLeft">
{renderPopover1()}
</EuiPopover>
<div style={{ maxWidth: 500 }}>
<EuiPopover
id="popover1"
button={
<EuiExpression
description="indices"
display="columns"
value={example1.value}
isInvalid={
selectedOptions && selectedOptions.length > 0 ? false : true
}
isActive={example1.isOpen}
onClick={openExample1}
/>
}
isOpen={example1.isOpen}
closePopover={closeExample1}
ownFocus
display="block"
panelPaddingSize="s"
anchorPosition="downLeft">
{renderPopover1()}
</EuiPopover>

<EuiPopover
id="popover2"
panelPaddingSize="s"
zIndex={200}
button={
<EuiExpression
description="when"
display="columns"
value={example2.value}
isActive={example2.isOpen}
onClick={openExample2}
/>
}
isOpen={example2.isOpen}
closePopover={closeExample2}
ownFocus
anchorPosition="downLeft">
{renderPopover2()}
</EuiPopover>
<EuiExpression
display="columns"
description="Except"
value="kibana_sample_data_ky_counties"
/>
<EuiSpacer />
<EuiTitle size="xxs">
<h3>Description width at 50%</h3>
</EuiTitle>
<EuiExpression
description="join"
display="columns"
descriptionWidth={50}
value="kibana_sample_data_ky_avl"
onClick={() => {}}
/>
<EuiSpacer />
<EuiTitle size="xxs">
<h3>Error state</h3>
</EuiTitle>
<EuiExpression
description="email"
display="columns"
color="danger"
isInvalid
value="example@mail."
onClick={() => {}}
/>
</EuiFlexItem>
</EuiFlexGroup>
<EuiPopover
id="popover2"
panelPaddingSize="s"
button={
<EuiExpression
description="when"
display="columns"
value={example2.value}
isActive={example2.isOpen}
onClick={openExample2}
/>
}
isOpen={example2.isOpen}
closePopover={closeExample2}
ownFocus
display="block"
anchorPosition="downLeft">
{renderPopover2()}
</EuiPopover>
<EuiExpression
display="columns"
description="Except"
value="kibana_sample_data_ky_counties"
/>
<EuiSpacer />
<EuiTitle size="xxs">
<h3>Description width at 50px</h3>
Copy link
Author

Choose a reason for hiding this comment

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

This example now shows a more appropriate sized for the word "JOIN"

</EuiTitle>
<EuiExpression
description="join"
display="columns"
descriptionWidth={50}
value="kibana_sample_data_ky_avl"
onClick={() => {}}
/>
<EuiSpacer />
<EuiTitle size="xxs">
<h3>Error state</h3>
</EuiTitle>
<EuiExpression
description="email"
display="columns"
color="danger"
isInvalid
value="example@mail."
onClick={() => {}}
/>
</div>
);
};
3 changes: 3 additions & 0 deletions src-docs/src/views/expression/stringing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ export default () => (
description="group by"
value="right.kytccountynmbr"
onClick={() => {}}
color="accent"
isInvalid
/>
<EuiExpression description="sort by" value="count" isInvalid />
</div>
);
58 changes: 29 additions & 29 deletions src/components/expression/_expression.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
@include euiFontSizeS;
@include euiCodeFont;

border-bottom: 2px solid transparent;
border-bottom: $euiBorderWidthThick solid transparent;
Copy link
Author

Choose a reason for hiding this comment

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

We actually have a variable for this now

display: inline-block; /* 1 */
text-align: left;
padding: ($euiSizeXS / 2) 0;
transition: all $euiAnimSpeedNormal $euiAnimSlightBounce;
transition: all $euiAnimSpeedNormal ease-in-out;
color: $euiTextColor;

&:focus {
Expand All @@ -23,10 +23,11 @@
}

&.euiExpression-columns {
border: 2px solid transparent;
border-color: transparent;
// Ensures there's no flash of the dashed style before turning solid for the active state
border-bottom-style: solid;
Comment on lines +26 to +28
Copy link
Author

Choose a reason for hiding this comment

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

Keeps the border to only the bottom

margin-bottom: $euiSizeXS;
}

}

.euiExpression-isUppercase .euiExpression__description {
Expand All @@ -41,54 +42,54 @@
border-bottom-style: solid;
transform: translateY(-1px);
}
}

.euiExpression__icon {
margin-left: $euiSizeXS;
}

.euiExpression-isActive {
border-bottom-style: solid;
}

.euiExpression-columns {
background-color: $euiColorLightestShade;
width: 100%;
display: flex;
padding: $euiSizeXS * .5;
padding: $euiSizeXS;
border-radius: $euiSizeXS;

&:not(.euiExpression-isClickable) {
.euiExpression__description {
color: $euiTextColor;
&.euiExpression-isClickable {
background-color: $euiColorLightestShade;

// sass-lint:disable-block nesting-depth
&:focus,
&:hover:not(:disabled) {
.euiExpression__description,
.euiExpression__value {
// inner child specificity so it inherits underline color from text color
text-decoration: underline;
}
}
}

.euiExpression__description,
.euiExpression__value {
@include euiTextBreakWord;
}

.euiExpression__description {
margin: $euiSizeXS;
text-align: right;
margin-right: $euiSizeS;
flex-shrink: 0; // Ensures it doesn't get smaller in case the value is really long
}

.euiExpression__value {
flex-grow: 1;
display: flex;
margin: $euiSizeXS;
}

.euiExpression__icon {
margin-left: auto;
margin-top: $euiSizeXS;
}
}

.euiExpression-isActive {
border-bottom-style: solid;
}

.euiPopover__anchor {
width: 100%;
}
Comment on lines -85 to -87
Copy link
Author

Choose a reason for hiding this comment

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

Don't forget that you can't set external component-specific style like this. It will affect all usages. EuiPopover actually has a display="block" prop to help with this which I added to your examples.


@each $name, $color in $euiExpressionColors {
.euiExpression--#{$name} {
&:focus:not(.euiExpression-columns) {
&:focus {
background-color: transparentize($color, .9);
}

Expand All @@ -100,6 +101,5 @@
.euiExpression__description {
color: $color;
}

}
}
}
Loading