From 34a454e4c2ff5661494c6c5af49d81955ab9aa7f Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 25 Feb 2020 17:19:52 +0530 Subject: [PATCH] added badge group component --- CHANGELOG.md | 1 + src-docs/src/views/badge/badge_example.js | 40 ++++++++++++++ src-docs/src/views/badge/badge_group.js | 38 ++++++++++++++ src/components/badge/_badge_group.scss | 49 +++++++++++++++++ src/components/badge/badge_group.tsx | 64 +++++++++++++++++++++++ src/components/badge/index.ts | 2 + src/components/index.js | 7 ++- 7 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 src-docs/src/views/badge/badge_group.js create mode 100644 src/components/badge/_badge_group.scss create mode 100644 src/components/badge/badge_group.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f6f7db3f56..5edfb75177c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ **Breaking changes** +- Created `EuiBadgeGroup` component ([#2921](https://github.com/elastic/eui/pull/2921)) - Removed `visControls` and `visHeatmap` duplicate icons from docs ([#2908](https://github.com/elastic/eui/pull/2908)) ## [`19.0.0`](https://github.com/elastic/eui/tree/v19.0.0) diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index 3568874491d..191fec31346 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -11,9 +11,21 @@ import { EuiCode, EuiBetaBadge, EuiNotificationBadge, + EuiBadgeGroup, + EuiFlexItem, EuiCallOut, } from '../../../../src/components'; +const badges = [ + 'default', + 'hollow', + 'primary', + 'secondary', + 'accent', + 'warning', + 'danger', +]; + import Badge from './badge'; const badgeSource = require('!!raw-loader!./badge'); const badgeHtml = renderToHtml(Badge); @@ -91,6 +103,10 @@ const notificationBadgeHtml = renderToHtml(NotificationBadge); const notificationBadgeSnippet = `3 `; +import BadgeGroup from './badge_group'; +const badgeGroupSource = require('!!raw-loader!./badge_group'); +const badgeGroupHtml = renderToHtml(BadgeGroup); + export const BadgeExample = { title: 'Badge', sections: [ @@ -261,5 +277,29 @@ export const BadgeExample = { snippet: notificationBadgeSnippet, demo: , }, + { + title: 'Badge Group', + source: [ + { + type: GuideSectionTypes.JS, + code: badgeGroupSource, + }, + { + type: GuideSectionTypes.HTML, + code: badgeGroupHtml, + }, + ], + text:

Used to group Badges together

, + props: { EuiBadgeGroup }, + demo: ( + + {badges.map(badge => ( + + {badge} + + ))} + + ), + }, ], }; diff --git a/src-docs/src/views/badge/badge_group.js b/src-docs/src/views/badge/badge_group.js new file mode 100644 index 00000000000..9981ea192bc --- /dev/null +++ b/src-docs/src/views/badge/badge_group.js @@ -0,0 +1,38 @@ +import React, { Fragment } from 'react'; + +import { + EuiBadge, + EuiFlexItem, + EuiSpacer, + EuiBadgeGroup, + EuiTitle, +} from '../../../../src/components'; + +const badges = [ + 'default', + 'hollow', + 'primary', + 'secondary', + 'accent', + 'warning', + 'danger', +]; + +export default () => { + return ( + + +

Badge Group

+ + + + {badges.map(badge => ( + + {badge} + + ))} + + + + ); +}; diff --git a/src/components/badge/_badge_group.scss b/src/components/badge/_badge_group.scss new file mode 100644 index 00000000000..818e015b1b7 --- /dev/null +++ b/src/components/badge/_badge_group.scss @@ -0,0 +1,49 @@ +$gutterTypes: ( + gutterExtraSmall: $euiSizeXS, + gutterSmall: $euiSizeS, + gutterMedium: $euiSize, + gutterLarge: $euiSizeL, + gutterExtraLarge: $euiSizeXXL, +); + +.euiBadgeGroup { + display: flex; + align-items: center; + flex-flow: row; + flex-grow: 1; /* 1 */ + + .euiBadgeItem { + @include internetExplorerOnly { + min-width: 1px; + } + + flex-grow: 1; + flex-basis: 0%; /* 2 */ + } +} + +// Gutter Sizes +@each $gutterName, $gutterSize in $gutterTypes { + $halfGutterSize: $gutterSize * .5; + + .euiBadgeGroup--#{$gutterName} { + margin: -$halfGutterSize; + + & > .euiBadgeItem { + margin: $halfGutterSize; + } + } +} + +// Wrap +.euiBadgeGroup--wrap { + flex-wrap: wrap; +} + +@include euiBreakpoint('xs', 's') { + .euiBadgeGroup--responsive { + flex-wrap: wrap; + margin-left: 0; + margin-right: 0; + } +} \ No newline at end of file diff --git a/src/components/badge/badge_group.tsx b/src/components/badge/badge_group.tsx new file mode 100644 index 00000000000..aac4619f6da --- /dev/null +++ b/src/components/badge/badge_group.tsx @@ -0,0 +1,64 @@ +import React, { HTMLAttributes, Ref } from 'react'; +import classNames from 'classnames'; +import { CommonProps, keysOf } from '../common'; + +export type BadgeGroupGutterSize = keyof typeof gutterSizeToClassNameMap; + +export interface EuiBadgeGroupProps { + gutterSize?: BadgeGroupGutterSize; + responsive?: boolean; + wrap?: boolean; +} + +const gutterSizeToClassNameMap = { + none: null, + xs: 'euiBadgeGroup--gutterExtraSmall', + s: 'euiBadgeGroup--gutterSmall', + m: 'euiBadgeGroup--gutterMedium', + l: 'euiBadgeGroup--gutterLarge', + xl: 'euiBadgeGroup--gutterExtraLarge', +}; + +export const GUTTER_SIZES = keysOf(gutterSizeToClassNameMap); +export type EuiBadgeGroupGutterSize = keyof typeof gutterSizeToClassNameMap; + +const EuiBadgeGroup = React.forwardRef< + HTMLDivElement | HTMLSpanElement, + CommonProps & + HTMLAttributes & + EuiBadgeGroupProps +>( + ( + { + children, + className, + gutterSize = 'l', + responsive = true, + wrap = false, + ...rest + }, + ref: Ref | Ref + ) => { + const classes = classNames( + 'euiBadgeGroup', + gutterSizeToClassNameMap[gutterSize as BadgeGroupGutterSize], + { + 'euiBadgeGroup--responsive': responsive, + 'euiBadgeGroup--wrap': wrap, + }, + className + ); + + return ( +
} + {...rest as HTMLAttributes}> + {children} +
+ ); + } +); +EuiBadgeGroup.displayName = 'EuiBadgeGroup'; + +export { EuiBadgeGroup }; diff --git a/src/components/badge/index.ts b/src/components/badge/index.ts index 6ab2cc152c3..fda8fa2acb4 100644 --- a/src/components/badge/index.ts +++ b/src/components/badge/index.ts @@ -3,3 +3,5 @@ export { EuiBadge, EuiBadgeProps } from './badge'; export { EuiBetaBadge } from './beta_badge'; export { EuiNotificationBadge } from './notification_badge'; + +export { EuiBadgeGroup } from './badge_group'; diff --git a/src/components/index.js b/src/components/index.js index f4cb7cf6652..1cb217b4f59 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -6,7 +6,12 @@ export { EuiAvatar } from './avatar'; export { EuiKeyboardAccessible, EuiScreenReaderOnly } from './accessibility'; -export { EuiBadge, EuiBetaBadge, EuiNotificationBadge } from './badge'; +export { + EuiBadge, + EuiBetaBadge, + EuiNotificationBadge, + EuiBadgeGroup, +} from './badge'; export { EuiBottomBar } from './bottom_bar';