From 436b14757fdcee10585b2b91abd83fdbb990b3f5 Mon Sep 17 00:00:00 2001 From: Andrei Firsov Date: Wed, 23 Oct 2019 14:00:48 +0300 Subject: [PATCH] feat(Tag): adds condensed mode. --- ...est-js-components-tag-condensed-1-snap.png | Bin 0 -> 13196 bytes e2e/__tests__/tag.test.js | 1 + src/components/Tag/Tag.js | 5 +++-- src/components/Tag/Tag.stories.js | 19 ++++++++++++++++++ src/components/Tag/Tag.theme.js | 4 ++++ 5 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 e2e/__tests__/__image_snapshots__/tag-test-js-components-tag-condensed-1-snap.png diff --git a/e2e/__tests__/__image_snapshots__/tag-test-js-components-tag-condensed-1-snap.png b/e2e/__tests__/__image_snapshots__/tag-test-js-components-tag-condensed-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..d734b387637fa43264f11e3e10ebc937ac0cf4f2 GIT binary patch literal 13196 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 Or68;F5OUwt_rCx@sw6@H literal 0 HcmV?d00001 diff --git a/e2e/__tests__/tag.test.js b/e2e/__tests__/tag.test.js index fd6adca8..3fa99f80 100644 --- a/e2e/__tests__/tag.test.js +++ b/e2e/__tests__/tag.test.js @@ -4,6 +4,7 @@ import { baisy } from '../setup/TestSuiter'; const SUITES = [ baisy.suite('Components/Tag', 'common'), baisy.suite('Components/Tag', 'with large content'), + baisy.suite('Components/Tag', 'condensed'), ]; diff --git a/src/components/Tag/Tag.js b/src/components/Tag/Tag.js index 5764c570..b9e59b6e 100644 --- a/src/components/Tag/Tag.js +++ b/src/components/Tag/Tag.js @@ -9,10 +9,11 @@ type TagProps = { children?: React$Node, /** tag background color */ color?: string, + condensed?: boolean, }; -const Tag = ({ children, ...rest }: TagProps) => ( - +const Tag = ({ children, condensed = false, ...rest }: TagProps) => ( + { children } ); diff --git a/src/components/Tag/Tag.stories.js b/src/components/Tag/Tag.stories.js index c3951d6b..a1d4176b 100644 --- a/src/components/Tag/Tag.stories.js +++ b/src/components/Tag/Tag.stories.js @@ -38,3 +38,22 @@ export const withLargeContent = () => ( withLargeContent.story = { name: 'with large content', }; + +export const condensed = () => ( + + Content + Content + Content + Content + Content + Content + Content + Content + Content + Content + +); + +condensed.story = { + name: 'condensed tag', +}; diff --git a/src/components/Tag/Tag.theme.js b/src/components/Tag/Tag.theme.js index 7258047c..2c6c09c6 100644 --- a/src/components/Tag/Tag.theme.js +++ b/src/components/Tag/Tag.theme.js @@ -28,6 +28,10 @@ const [TagOuter, themeOuter] = createThemeTag(name, ({ COLORS, FONTS }: *): * => color, } : null) , COLORS), + condensed: { + borderRadius: '5px', + minHeight: '16px', + }, }, }));