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

Allow EuiListGroupItem to pass a custom element as the icon #1726

Merged
merged 2 commits into from
Mar 13, 2019
Merged

Allow EuiListGroupItem to pass a custom element as the icon #1726

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
4ac784d
Allow EuiListGroupItem to pass a custom element as the icon
Mar 13, 2019
915406a
cl
Mar 13, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Allow toasts in `EuiGlobalToastList` to override `toastLifeTimeMs` ([#1720](https://github.com/elastic/eui/pull/1720))
- Allow `EuiListGroupItem` to pass a custom element as the `icon` ([#1726](https://github.com/elastic/eui/pull/1726))

## [`9.3.0`](https://github.com/elastic/eui/tree/v9.3.0)

Expand Down
289 changes: 288 additions & 1 deletion src/components/list_group/__snapshots__/list_group_item.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,39 @@ exports[`EuiListGroupItem is rendered 1`] = `
</li>
`;

exports[`EuiListGroupItem renders href 1`] = `
exports[`EuiListGroupItem props extraAction is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-hasExtraAction"
>
<span
class="euiListGroupItem__text"
>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</span>
<button
aria-label="label"
class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
type="button"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiButtonIcon__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
</button>
</li>
`;

exports[`EuiListGroupItem props href is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
>
Expand All @@ -34,3 +66,258 @@ exports[`EuiListGroupItem renders href 1`] = `
</a>
</li>
`;

exports[`EuiListGroupItem props icon is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium"
>
<span
class="euiListGroupItem__text"
>
<span
class="euiListGroupItem__icon"
/>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</span>
</li>
`;

exports[`EuiListGroupItem props iconType is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium"
>
<span
class="euiListGroupItem__text"
>
<svg
class="euiIcon euiIcon--medium euiListGroupItem__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</span>
</li>
`;

exports[`EuiListGroupItem props isActive is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isActive"
>
<span
class="euiListGroupItem__text"
>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</span>
</li>
`;

exports[`EuiListGroupItem props isDisabled is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isDisabled"
>
<span
class="euiListGroupItem__text"
>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</span>
</li>
`;

exports[`EuiListGroupItem props onClick is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
>
<button
class="euiListGroupItem__button"
>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</button>
</li>
`;

exports[`EuiListGroupItem props size l is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--large"
>
<span
class="euiListGroupItem__text"
>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</span>
</li>
`;

exports[`EuiListGroupItem props size m is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium"
>
<span
class="euiListGroupItem__text"
>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</span>
</li>
`;

exports[`EuiListGroupItem props size s is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--small"
>
<span
class="euiListGroupItem__text"
>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</span>
</li>
`;

exports[`EuiListGroupItem props size xs is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--xSmall"
>
<span
class="euiListGroupItem__text"
>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</span>
</li>
`;

exports[`EuiListGroupItem props wrapText is rendered 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium euiListGroupItem--wrapText"
>
<span
class="euiListGroupItem__text"
>
<span
class="euiListGroupItem__label"
>
Label
</span>
</span>
</li>
`;

exports[`EuiListGroupItem renders a disabled button even if provided an href 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isDisabled euiListGroupItem-isClickable"
>
<button
class="euiListGroupItem__button"
disabled=""
>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</button>
</li>
`;

exports[`EuiListGroupItem renders a disabled button even if provided an href 2`] = `
<li
class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isDisabled euiListGroupItem-isClickable"
>
<button
class="euiListGroupItem__button"
disabled=""
>
<span
class="euiListGroupItem__label"
title="Label"
>
Label
</span>
</button>
</li>
`;

exports[`EuiListGroupItem throws an warning if both iconType and icon are provided but still renders 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium"
>
<span
class="euiListGroupItem__text"
>
<svg
class="euiIcon euiIcon--medium euiListGroupItem__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
<span
class="euiListGroupItem__label"
title=""
/>
</span>
</li>
`;

exports[`EuiListGroupItem throws an warning if both onClick and href are provided but still renders 1`] = `
<li
class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable"
>
<a
class="euiListGroupItem__button"
href="#"
>
<span
class="euiListGroupItem__label"
title=""
/>
</a>
</li>
`;
8 changes: 2 additions & 6 deletions src/components/list_group/_list_group_item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
background-color: tintOrShade($euiColorLightestShade, 0%, 30%);
}

&.euiListGroupItem-isClickable:hover,
&.euiListGroupItem-isClickable:focus {
&.euiListGroupItem-isClickable:hover .euiListGroupItem__label,
&.euiListGroupItem-isClickable:focus .euiListGroupItem__label {
text-decoration: underline;
}

Expand Down Expand Up @@ -56,10 +56,6 @@
text-overflow: ellipsis;
}

.euiListGroupItem__button:focus {
text-decoration: underline;
}

.euiListGroupItem__extraAction {
opacity: 0;
margin-right: $euiSizeS;
Expand Down
20 changes: 19 additions & 1 deletion src/components/list_group/list_group_item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const EuiListGroupItem = ({
href,
className,
iconType,
icon,
extraAction,
onClick,
size,
Expand All @@ -48,6 +49,13 @@ export const EuiListGroupItem = ({
iconNode = (
<EuiIcon className="euiListGroupItem__icon" type={iconType} />
);

if (icon) {
console.warn('Both `iconType` and `icon` were passed to EuiListGroupItem but only one can exist. The `iconType` was used.');
}
} else if (icon) {
iconNode = React.cloneElement(icon,
{ className: classNames('euiListGroupItem__icon', icon.props.className) });
}

let extraActionNode;
Expand Down Expand Up @@ -89,6 +97,10 @@ export const EuiListGroupItem = ({
{labelContent}
</a>
);

if (onClick) {
console.warn('Both `href` and `onClick` were passed to EuiListGroupItem but only one can exist. The `href` was used.');
}
} else if ((href && isDisabled) || onClick) {
itemContent = (
<button
Expand Down Expand Up @@ -167,10 +179,16 @@ EuiListGroupItem.propTypes = {
href: PropTypes.string,

/**
* See `EuiIcon`
* Adds `EuiIcon` of `EuiIcon.type`
*/
iconType: PropTypes.oneOf(ICON_TYPES),

/**
* Custom node to pass as the icon. Cannot be used in conjunction
* with `iconType`.
*/
icon: PropTypes.element,

/**
* Display tooltip on list item
*/
Expand Down
Loading