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

Use EuiBadge for combobox pilling #2

Merged
merged 9 commits into from
Mar 29, 2018
Merged

Use EuiBadge for combobox pilling #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ed0011b
use badge for combobox pilling
snide Mar 29, 2018
20ce82b
some docs
snide Mar 29, 2018
bd35f0d
clean up group coloring
snide Mar 29, 2018
7ac25e6
add docs for coloring
snide Mar 29, 2018
c35553c
coloring now exists in dropdown
snide Mar 29, 2018
ab44cd1
update docs
snide Mar 29, 2018
fcba33d
remove color swatches, make euicon accept hex colors
snide Mar 29, 2018
852240b
remove swatch css
snide Mar 29, 2018
889f05b
prevent regression in badge sizing, make them slightly larger in comb…
snide Mar 29, 2018
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
1 change: 1 addition & 0 deletions src-docs/src/views/badge/badge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {

const badges = [
'default',
'hollow',
'primary',
'secondary',
'accent',
Expand Down
103 changes: 103 additions & 0 deletions src-docs/src/views/combo_box/combo_box_colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import React, { Component } from 'react';

import {
EuiComboBox,
} from '../../../../src/components';

export default class extends Component {
constructor(props) {
super(props);

this.options = [{
value: 'titan',
label: 'Titan',
'data-test-subj': 'titanOption',
color: 'primary',
}, {
value: 'enceladus',
label: 'Enceladus',
color: 'secondary',
}, {
value: 'mimas',
label: 'Mimas',
color: '#DB1374',
}, {
value: 'dione',
label: 'Dione',
color: 'accent',
}, {
value: 'iapetus',
label: 'Iapetus',
color: 'primary',
color: 'warning',
}, {
value: 'phoebe',
label: 'Phoebe',
color: 'danger',
}, {
value: 'rhea',
label: 'Rhea',
color: 'default',
}, {
value: 'pandora',
label: 'Pandora is one of Saturn\'s moons, named for a Titaness of Greek mythology',
color: '#F98510',
}, {
value: 'tethys',
label: 'Tethys',
color: '#FEB6DB',
}, {
value: 'hyperion',
label: 'Hyperion',
color: '#BFA180',
}];

this.state = {
selectedOptions: [this.options[2], this.options[4]],
};
}

onChange = (selectedOptions) => {
this.setState({
selectedOptions,
});
};

onCreateOption =(searchValue, flattenedOptions) => {
const normalizedSearchValue = searchValue.trim().toLowerCase();

if (!normalizedSearchValue) {
return;
}

const newOption = {
value: searchValue,
label: searchValue,
};

// Create the option if it doesn't exist.
if (flattenedOptions.findIndex(option =>
option.value.trim().toLowerCase() === normalizedSearchValue
) === -1) {
this.options.push(newOption);
}

// Select the option.
this.setState(prevState => ({
selectedOptions: prevState.selectedOptions.concat(newOption),
}));
};

render() {
const { selectedOptions } = this.state;
return (
<EuiComboBox
placeholder="Select or create options"
options={this.options}
selectedOptions={selectedOptions}
onChange={this.onChange}
onCreateOption={this.onCreateOption}
/>
);
}
}
29 changes: 29 additions & 0 deletions src-docs/src/views/combo_box/combo_box_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import React, { Fragment } from 'react';

import {
Link,
} from 'react-router';

import { renderToHtml } from '../../services';

import {
Expand All @@ -18,6 +22,10 @@ import ComboBox from './combo_box';
const comboBoxSource = require('!!raw-loader!./combo_box');
const comboBoxHtml = renderToHtml(ComboBox);

import Colors from './combo_box_colors';
const colorsSource = require('!!raw-loader!./combo_box_colors');
const colorsHtml = renderToHtml(Colors);

import Groups from './groups';
const groupsSource = require('!!raw-loader!./groups');
const groupsHtml = renderToHtml(Groups);
Expand Down Expand Up @@ -51,6 +59,8 @@ export const ComboBoxExample = {
</p>
</EuiText>

<EuiSpacer />

<EuiCallOut
title="No duplicate option labels allowed"
color="warning"
Expand All @@ -76,6 +86,25 @@ export const ComboBoxExample = {
}],
props: { EuiComboBox },
demo: <ComboBox />,
}, {
title: 'Options can accept a color',
source: [{
type: GuideSectionTypes.JS,
code: colorsSource,
}, {
type: GuideSectionTypes.HTML,
code: colorsHtml,
}],
text: (
<p>
Useful for visualization or tagging systems. You can also pass a color in
your option list. The color can be a hex value
(like <EuiCode>#000</EuiCode>) or any other named color value accepted by
the <Link to="/display/badge">Badge</Link> component.
</p>
),
props: { EuiComboBox },
demo: <Colors />,
}, {
title: 'Groups',
source: [{
Expand Down
2 changes: 2 additions & 0 deletions src-docs/src/views/icon/icon_colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ const iconColors = [
'text',
'subdued',
'ghost',
'#490',
'#F98510',
];

export default () => (
Expand Down
3 changes: 2 additions & 1 deletion src-docs/src/views/icon/icon_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,8 @@ export const IconExample = {
}],
text: (
<p>
Use the <EuiCode>color</EuiCode> prop to assign a color for your icons.
Use the <EuiCode>color</EuiCode> prop to assign a color for your icons. It
can accept named colors from our pallete or a three or six color hex code.
The default behavior is to inherit the text color as the SVG
color <EuiCode>fill</EuiCode> property via <EuiCode>currentColor</EuiCode> in CSS.
</p>
Expand Down
20 changes: 20 additions & 0 deletions src/components/accordion/__snapshots__/accordion.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,11 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
<arrowRight
className="euiIcon euiIcon--medium"
height="16"
style={
Object {
"fill": undefined,
}
}
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -65,6 +70,11 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
<svg
className="euiIcon euiIcon--medium"
height="16"
style={
Object {
"fill": undefined,
}
}
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -169,6 +179,11 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
<arrowDown
className="euiIcon euiIcon--medium"
height="16"
style={
Object {
"fill": undefined,
}
}
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -177,6 +192,11 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
<svg
className="euiIcon euiIcon--medium"
height="16"
style={
Object {
"fill": undefined,
}
}
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
Expand Down
62 changes: 49 additions & 13 deletions src/components/badge/__snapshots__/badge.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ exports[`EuiBadge is rendered 1`] = `
<span
class="euiBadge__content"
>
<span>
<span
class="euiBadge__text"
>
Content
</span>
</span>
Expand All @@ -23,7 +25,9 @@ exports[`EuiBadge props color accent is rendered 1`] = `
<span
class="euiBadge__content"
>
<span>
<span
class="euiBadge__text"
>
Content
</span>
</span>
Expand All @@ -37,7 +41,9 @@ exports[`EuiBadge props color danger is rendered 1`] = `
<span
class="euiBadge__content"
>
<span>
<span
class="euiBadge__text"
>
Content
</span>
</span>
Expand All @@ -51,7 +57,25 @@ exports[`EuiBadge props color default is rendered 1`] = `
<span
class="euiBadge__content"
>
<span>
<span
class="euiBadge__text"
>
Content
</span>
</span>
</span>
`;

exports[`EuiBadge props color hollow is rendered 1`] = `
<span
class="euiBadge euiBadge--hollow"
>
<span
class="euiBadge__content"
>
<span
class="euiBadge__text"
>
Content
</span>
</span>
Expand All @@ -65,7 +89,9 @@ exports[`EuiBadge props color primary is rendered 1`] = `
<span
class="euiBadge__content"
>
<span>
<span
class="euiBadge__text"
>
Content
</span>
</span>
Expand All @@ -79,7 +105,9 @@ exports[`EuiBadge props color secondary is rendered 1`] = `
<span
class="euiBadge__content"
>
<span>
<span
class="euiBadge__text"
>
Content
</span>
</span>
Expand All @@ -93,7 +121,9 @@ exports[`EuiBadge props color warning is rendered 1`] = `
<span
class="euiBadge__content"
>
<span>
<span
class="euiBadge__text"
>
Content
</span>
</span>
Expand All @@ -108,7 +138,7 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
class="euiBadge__content"
>
<svg
class="euiIcon euiBadge__icon euiIcon--small"
class="euiIcon euiIcon--small euiBadge__icon"
height="18"
viewBox="0 0 18 18"
width="18"
Expand All @@ -125,7 +155,9 @@ exports[`EuiBadge props iconSide left is rendered 1`] = `
/>
</g>
</svg>
<span>
<span
class="euiBadge__text"
>
Content
</span>
</span>
Expand All @@ -140,7 +172,7 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
class="euiBadge__content"
>
<svg
class="euiIcon euiBadge__icon euiIcon--small"
class="euiIcon euiIcon--small euiBadge__icon"
height="18"
viewBox="0 0 18 18"
width="18"
Expand All @@ -157,7 +189,9 @@ exports[`EuiBadge props iconSide right is rendered 1`] = `
/>
</g>
</svg>
<span>
<span
class="euiBadge__text"
>
Content
</span>
</span>
Expand All @@ -172,7 +206,7 @@ exports[`EuiBadge props iconType is rendered 1`] = `
class="euiBadge__content"
>
<svg
class="euiIcon euiBadge__icon euiIcon--small"
class="euiIcon euiIcon--small euiBadge__icon"
height="18"
viewBox="0 0 18 18"
width="18"
Expand All @@ -189,7 +223,9 @@ exports[`EuiBadge props iconType is rendered 1`] = `
/>
</g>
</svg>
<span>
<span
class="euiBadge__text"
>
Content
</span>
</span>
Expand Down
Loading