Skip to content

Commit

Permalink
Merge branch 'master' into combo
Browse files Browse the repository at this point in the history
  • Loading branch information
@anishagg17
anishagg17 authored Mar 31, 2020
2 parents d5f379e + 31c332b commit fb8c894
Show file tree
Hide file tree
Showing 47 changed files with 1,405 additions and 732 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Removed options list dependency for custom options of `EuiComboBox` ([#3183](https://github.com/elastic/eui/pull/3183))
- Fixed `EuiPopover` arrow position in Android and Linux ([#3188](https://github.com/elastic/eui/pull/3188))
- Improved `htmlIdGenerator` when supplying both `prefix` and `suffix` ([#3076](https://github.com/elastic/eui/pull/3076))
- Updated pagination prop descriptions for `EuiInMemoryTable` ([#3142](https://github.com/elastic/eui/pull/3142))
- Added `title` and `aria` attributes to `EuiToken`'s icon element ([#3195](https://github.com/elastic/eui/pull/3195))
- Added new Elasticsearch token types ([58036](https://github.com/elastic/kibana/issues/58036))

## [`22.2.0`](https://github.com/elastic/eui/tree/v22.2.0)

- Improved `EuiModal` close button position to prevent from overlapping with the title ([#3176](https://github.com/elastic/eui/pull/3176))

**Bug Fixes**

- Removed outline of `EuiSelect` in Firefox ([#3197] (https://github.com/elastic/eui/pull/3197))
- Fixed EuiBasicTable proptypes of itemId ([#3133](https://github.com/elastic/eui/pull/3133))
- Updated `EuiSuperDatePicker` to inherit the selected value in quick select ([#3105](https://github.com/elastic/eui/pull/3105))

Expand Down
115 changes: 44 additions & 71 deletions src-docs/src/views/accordion/accordion_grow.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
/* eslint react/no-multi-comp: 0 */
/* eslint react/prefer-stateless-function: 0 */

import React, { Component } from 'react';
import React, { useState } from 'react';

import {
EuiAccordion,
Expand All @@ -12,72 +9,48 @@ import {
} from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';

class Rows extends Component {
state = {
counter: 1,
};

onIncrease() {
this.setState(prevState => ({
counter: prevState.counter + 1,
}));
const Rows = () => {
const [counter, setCounter] = useState(1);
const rows = [];
for (let i = 1; i <= counter; i++) {
rows.push(<li key={i}>Row {i}</li>);
}

onDecrease() {
this.setState(prevState => ({
counter: Math.max(0, prevState.counter - 1),
}));
}

render() {
const rows = [];
const { counter } = this.state;
for (let i = 1; i <= counter; i++) {
rows.push(<li key={i}>Row {i}</li>);
}
const growingAccordianDescriptionId = htmlIdGenerator()();
const listId = htmlIdGenerator()();
return (
<EuiText>
<EuiScreenReaderOnly>
<p id={growingAccordianDescriptionId}>
Currently height is set to {counter} items
</p>
</EuiScreenReaderOnly>
<EuiSpacer size="s" />
<p>
<EuiButton
onClick={() => this.onIncrease()}
aria-controls={listId}
aria-describedby={growingAccordianDescriptionId}>
Increase height to {counter + 1} items
</EuiButton>{' '}
<EuiButton
aria-controls={listId}
aria-describedby={growingAccordianDescriptionId}
onClick={() => this.onDecrease()}
isDisabled={counter === 1}>
Decrease height to {counter - 1} item{counter > 2 && 's'}
</EuiButton>
const growingAccordianDescriptionId = htmlIdGenerator()();
const listId = htmlIdGenerator()();
return (
<EuiText>
<EuiScreenReaderOnly>
<p id={growingAccordianDescriptionId}>
Currently height is set to {counter} items
</p>
<ul id={listId}>{rows}</ul>
</EuiText>
);
}
}

class AccordionGrow extends Component {
render() {
return (
<EuiAccordion
id="accordion7"
buttonContent="Click me to toggle close / open"
initialIsOpen={true}
paddingSize="l">
<Rows />
</EuiAccordion>
);
}
}

export default AccordionGrow;
</EuiScreenReaderOnly>
<EuiSpacer size="s" />
<p>
<EuiButton
onClick={() => setCounter(counter + 1)}
aria-controls={listId}
aria-describedby={growingAccordianDescriptionId}>
Increase height to {counter + 1} items
</EuiButton>{' '}
<EuiButton
aria-controls={listId}
aria-describedby={growingAccordianDescriptionId}
onClick={() => setCounter(Math.max(0, counter - 1))}
isDisabled={counter === 1}>
Decrease height to {counter - 1} item{counter > 2 && 's'}
</EuiButton>
</p>
<ul id={listId}>{rows}</ul>
</EuiText>
);
};

export default () => (
<EuiAccordion
id="accordian7"
buttonContent="Click me to toggle close / open"
initialIsOpen={true}
paddingSize="l">
<Rows />
</EuiAccordion>
);
116 changes: 51 additions & 65 deletions src-docs/src/views/bottom_bar/bottom_bar.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { useState } from 'react';

import {
EuiBottomBar,
Expand All @@ -8,71 +8,57 @@ import {
EuiButtonEmpty,
} from '../../../../src/components';

export default class extends Component {
constructor(props) {
super(props);
export default () => {
const [showBar, setShowBar] = useState(false);

this.state = {
showBar: false,
};
}

onButtonClick() {
this.setState({
showBar: !this.state.showBar,
});
}
const button = (
<EuiButton color="primary" onClick={() => setShowBar(!showBar)}>
Toggle appearance of the bottom bar
</EuiButton>
);

render() {
const button = (
<EuiButton color="primary" onClick={this.onButtonClick.bind(this)}>
Toggle appearance of the bottom bar
</EuiButton>
);

let bottomBar;
if (this.state.showBar) {
bottomBar = (
<EuiBottomBar>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="help">
Help
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="user">
Add user
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="ghost" size="s" iconType="cross">
Discard
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="primary" fill size="s" iconType="check">
Save
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>
);
}

return (
<div>
{button}
{bottomBar}
</div>
let bottomBar;
if (showBar) {
bottomBar = (
<EuiBottomBar>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="help">
Help
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="ghost" size="s" iconType="user">
Add user
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButtonEmpty color="ghost" size="s" iconType="cross">
Discard
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton color="primary" fill size="s" iconType="check">
Save
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiBottomBar>
);
}
}

return (
<div>
{button}
{bottomBar}
</div>
);
};
86 changes: 35 additions & 51 deletions src-docs/src/views/flyout/flyout.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { Component } from 'react';
import React, { useState } from 'react';

import {
EuiFlyout,
Expand All @@ -10,30 +10,12 @@ import {
EuiCodeBlock,
} from '../../../../src/components';

export class Flyout extends Component {
constructor(props) {
super(props);
export default () => {
const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);

this.state = {
isFlyoutVisible: false,
};
let flyout;

this.closeFlyout = this.closeFlyout.bind(this);
this.showFlyout = this.showFlyout.bind(this);
}

closeFlyout() {
this.setState({ isFlyoutVisible: false });
}

showFlyout() {
this.setState({ isFlyoutVisible: true });
}

render() {
let flyout;

const htmlCode = `<EuiFlyout ...>
const htmlCode = `<EuiFlyout ...>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2></h2>
Expand All @@ -45,33 +27,35 @@ export class Flyout extends Component {
</EuiFlyout>
`;

if (this.state.isFlyoutVisible) {
flyout = (
<EuiFlyout onClose={this.closeFlyout} aria-labelledby="flyoutTitle">
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2 id="flyoutTitle">A typical flyout</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiText>
<p>
For consistency across the many flyouts, please utilize the
following code for implementing the flyout with a header.
</p>
</EuiText>
<EuiCodeBlock language="html">{htmlCode}</EuiCodeBlock>
</EuiFlyoutBody>
</EuiFlyout>
);
}

return (
<div>
<EuiButton onClick={this.showFlyout}>Show flyout</EuiButton>

{flyout}
</div>
if (isFlyoutVisible) {
flyout = (
<EuiFlyout
onClose={() => setIsFlyoutVisible(false)}
aria-labelledby="flyoutTitle">
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2 id="flyoutTitle">A typical flyout</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiText>
<p>
For consistency across the many flyouts, please utilize the
following code for implementing the flyout with a header.
</p>
</EuiText>
<EuiCodeBlock language="html">{htmlCode}</EuiCodeBlock>
</EuiFlyoutBody>
</EuiFlyout>
);
}
}

return (
<div>
<EuiButton onClick={() => setIsFlyoutVisible(true)}>
Show flyout
</EuiButton>
{flyout}
</div>
);
};
Loading

0 comments on commit fb8c894

Please sign in to comment.