From 3c4235ae1e230c58b3da0b67fbd8bef9a13648c4 Mon Sep 17 00:00:00 2001 From: Aydar Zartdinov Date: Mon, 3 Aug 2020 23:40:47 +0300 Subject: [PATCH 1/2] Add verticalAlign property --- README.md | 1 + src/enhancers/text.ts | 8 ++++++++ src/types/enhancers.ts | 1 + tools/story.tsx | 1 + 4 files changed, 11 insertions(+) diff --git a/README.md b/README.md index 95eab0d..5f2a23c 100644 --- a/README.md +++ b/README.md @@ -213,6 +213,7 @@ All of these CSS properties are supported. You can pass either a string or a num * `transitionProperty` * `transitionTimingFunction` * `userSelect` +* `verticalAlign` * `visibility` * `whiteSpace` * `width` diff --git a/src/enhancers/text.ts b/src/enhancers/text.ts index 5ef5724..de61568 100644 --- a/src/enhancers/text.ts +++ b/src/enhancers/text.ts @@ -17,6 +17,7 @@ export const propTypes: PropTypesMapping = { textOverflow: PropTypes.string, textShadow: PropTypes.string, textTransform: PropTypes.string, + verticalAlign: PropTypes.string, whiteSpace: PropTypes.string, wordBreak: PropTypes.string, wordWrap: PropTypes.string @@ -100,6 +101,12 @@ const lineHeight = { jsName: 'lineHeight', defaultUnit: '' } +const verticalAlign = { + className: 'ver-algn', + cssName: 'vertical-align', + jsName: 'verticalAlign', + safeValue: true +} const wordBreak = { className: 'wrd-brk', cssName: 'word-break', @@ -139,6 +146,7 @@ export const propEnhancers: PropEnhancers = { textOverflow: (value: PropEnhancerValueType) => getCss(textOverflow, value), textShadow: (value: PropEnhancerValueType) => getCss(textShadow, value), textTransform: (value: PropEnhancerValueType) => getCss(textTransform, value), + verticalAlign: (value: PropEnhancerValueType) => getCss(verticalAlign, value), whiteSpace: (value: PropEnhancerValueType) => getCss(whiteSpace, value), wordBreak: (value: PropEnhancerValueType) => getCss(wordBreak, value), wordWrap: (value: PropEnhancerValueType) => getCss(wordWrap, value) diff --git a/src/types/enhancers.ts b/src/types/enhancers.ts index 43d9099..a9ab753 100644 --- a/src/types/enhancers.ts +++ b/src/types/enhancers.ts @@ -131,6 +131,7 @@ type CssProps = Pick< | 'transitionProperty' | 'transitionTimingFunction' | 'userSelect' + | 'verticalAlign' | 'visibility' | 'whiteSpace' | 'width' diff --git a/tools/story.tsx b/tools/story.tsx index 8da2784..1a621f9 100644 --- a/tools/story.tsx +++ b/tools/story.tsx @@ -160,6 +160,7 @@ storiesOf('Box', module) Center Right + Middle Right sans-serif bold From d45ca70fc9a110a4ceee960452e54f7a053f4717 Mon Sep 17 00:00:00 2001 From: Aydar Zartdinov Date: Mon, 3 Aug 2020 23:56:21 +0300 Subject: [PATCH 2/2] Update snapshot tests --- test/snapshots/box.tsx.md | 6 ++++++ test/snapshots/box.tsx.snap | Bin 4786 -> 4810 bytes 2 files changed, 6 insertions(+) diff --git a/test/snapshots/box.tsx.md b/test/snapshots/box.tsx.md index d62e1f2..95bb4b5 100644 --- a/test/snapshots/box.tsx.md +++ b/test/snapshots/box.tsx.md @@ -795,6 +795,9 @@ Generated by [AVA](https://ava.li). .ub-txt-trns_inherit {␊ text-transform: inherit;␊ }␊ + .ub-ver-algn_inherit {␊ + vertical-align: inherit;␊ + }␊ .ub-wht-spc_inherit {␊ white-space: inherit;␊ }␊ @@ -1197,6 +1200,9 @@ Generated by [AVA](https://ava.li). .ub-txt-trns_initial {␊ text-transform: initial;␊ }␊ + .ub-ver-algn_initial {␊ + vertical-align: initial;␊ + }␊ .ub-wht-spc_initial {␊ white-space: initial;␊ }␊ diff --git a/test/snapshots/box.tsx.snap b/test/snapshots/box.tsx.snap index 7081b56cf91b8e914e020887f7207026e117a3ce..9078d3f177bd1e245ffd4013d97217f515d5dbf8 100644 GIT binary patch literal 4810 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