diff --git a/CHANGELOG.md b/CHANGELOG.md index 43755a9cfce..452a5e85e1c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added the ability for `EuiBetaBadge` to appear on `EuiPanel` similar to `EuiCard` ([#885](https://github.com/elastic/eui/pull/888)) + **Bug fixes** - Removed `.nvmrc` file from published npm package ([#892](https://github.com/elastic/eui/pull/892)) - `EuiComboBox` no longer shows the _clear_ icon when it's a no-op ([#890](https://github.com/elastic/eui/pull/890)) diff --git a/src-docs/src/views/panel/panel_badge.js b/src-docs/src/views/panel/panel_badge.js new file mode 100644 index 00000000000..93baca6ec2a --- /dev/null +++ b/src-docs/src/views/panel/panel_badge.js @@ -0,0 +1,29 @@ +import React from 'react'; + +import { + EuiPanel, + EuiFlexGroup, + EuiFlexItem, +} from '../../../../src/components'; + +const badges = [null, 'Beta', 'Lab']; + +const panelNodes = badges.map(function (item, index) { + return ( + + window.alert('Card clicked')} + > + I am some panel content + + + ); +}); + +export default () => ( + + {panelNodes} + +); diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js index d908fbdd2aa..6a9c732abd9 100644 --- a/src-docs/src/views/panel/panel_example.js +++ b/src-docs/src/views/panel/panel_example.js @@ -21,6 +21,10 @@ import PanelHover from './panel_hover'; const panelHoverSource = require('!!raw-loader!./panel_hover'); const panelHoverHtml = renderToHtml(PanelHover); +import PanelBadge from './panel_badge'; +const panelBadgeSource = require('!!raw-loader!./panel_badge'); +const panelBadgeHtml = renderToHtml(PanelBadge); + export const PanelExample = { title: 'Panel', sections: [{ @@ -56,5 +60,21 @@ export const PanelExample = {

), demo: , + }, { + title: 'Panel beta badges', + source: [{ + type: GuideSectionTypes.JS, + code: panelBadgeSource, + }, { + type: GuideSectionTypes.HTML, + code: panelBadgeHtml, + }], + text: ( +

+ Similar to EuiCard, panels can also accept + an EuiBetaBadge. +

+ ), + demo: , }], }; diff --git a/src/components/badge/beta_badge/_index.scss b/src/components/badge/beta_badge/_index.scss index 10c53901b29..166e3b0878c 100644 --- a/src/components/badge/beta_badge/_index.scss +++ b/src/components/badge/beta_badge/_index.scss @@ -1 +1,2 @@ +@import 'mixins'; @import 'beta_badge'; diff --git a/src/components/badge/beta_badge/_mixins.scss b/src/components/badge/beta_badge/_mixins.scss new file mode 100644 index 00000000000..0848db92701 --- /dev/null +++ b/src/components/badge/beta_badge/_mixins.scss @@ -0,0 +1,30 @@ + +/** + * 1. Extend beta badges to at least 40% of the container's width + */ + +@mixin hasBetaBadge($selector, $spacing: $euiSize) { + &.#{$selector}--hasBetaBadge { + position: relative; + + .#{$selector}__betaBadgeWrapper { + position: absolute; + top: $euiSizeL/-2; + left: 50%; + transform: translateX(-50%); + z-index: 3; // get above abs positioned image + min-width: 40%; /* 1 */ + max-width: calc(100% - #{$spacing*2}); + + .euiToolTipAnchor, + .#{$selector}__betaBadge { + width: 100%; /* 1 */ + } + + .#{$selector}__betaBadge { + overflow: hidden; + text-overflow: ellipsis; + } + } + } +} diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 9ede6a797a5..b728943833f 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -1,5 +1,6 @@ @import "../panel/variables"; @import "../panel/mixins"; +@import '../badge/beta_badge/mixins'; $euiCardSpacing: map-get($euiPanelPaddingModifiers, "paddingMedium"); $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. @@ -9,11 +10,10 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity. /** * 1. Footer is always at the bottom. - * 2. Extend beta badges to at least 40% of the card's width - * 3. Fix for IE to ensure badges are visible outside of a