From 6edb7e29fffda00297c9bb869caf6908ea82810d Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 3 Dec 2018 17:44:20 +0100 Subject: [PATCH 1/6] -fix truncate styling for the content when defined as element --- src/themes/teams/components/Button/buttonStyles.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/themes/teams/components/Button/buttonStyles.ts b/src/themes/teams/components/Button/buttonStyles.ts index eec81e2301..b1d5c43f43 100644 --- a/src/themes/teams/components/Button/buttonStyles.ts +++ b/src/themes/teams/components/Button/buttonStyles.ts @@ -280,9 +280,8 @@ const buttonStyles: ComponentSlotStylesInput = { } }, - content: ({ props }) => ({ - overflow: 'hidden', - ...(typeof props.content === 'string' && truncateStyle), + content: () => ({ + ...truncateStyle, }), } From de3e81c765428cdf44629f500aa2a9df0f51c1a6 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 3 Dec 2018 18:39:12 +0100 Subject: [PATCH 2/6] -fix truncate styling for the content when defined as element as well as children API --- src/themes/teams/components/Button/buttonStyles.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/themes/teams/components/Button/buttonStyles.ts b/src/themes/teams/components/Button/buttonStyles.ts index b1d5c43f43..055b43f8c9 100644 --- a/src/themes/teams/components/Button/buttonStyles.ts +++ b/src/themes/teams/components/Button/buttonStyles.ts @@ -76,7 +76,7 @@ const buttonStyles: ComponentSlotStylesInput = { color, backgroundColor, borderRadius, - display: 'inline-flex', + display: 'inline', justifyContent: 'center', alignItems: 'center', position: 'relative', @@ -84,6 +84,7 @@ const buttonStyles: ComponentSlotStylesInput = { margin: `0 ${pxToRem(8)} 0 0`, verticalAlign: 'middle', cursor: 'pointer', + ...truncateStyle, // rectangular button defaults ...(!text && { @@ -279,10 +280,6 @@ const buttonStyles: ComponentSlotStylesInput = { }), } }, - - content: () => ({ - ...truncateStyle, - }), } export default buttonStyles From d3e6b5a47dfa72dd29bd2ce0900eb189b5a6bcd1 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 3 Dec 2018 18:47:39 +0100 Subject: [PATCH 3/6] -updated changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 29983b1462..85952050ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Prevent blind props forwarding if `Input`'s wrapper is defined as React element @kuzhelov ([#453](https://github.com/stardust-ui/react/pull/453)) - Fix invalid whatInput import @miroslavstastny ([#541](https://github.com/stardust-ui/react/pull/541)) - Fix invalid typings and propTypes for the content prop @mnajdova ([#528](https://github.com/stardust-ui/react/pull/528)) +- Fix truncate styles for the `Button`'s `content` as element and `children` API @mnajdova ([#551](https://github.com/stardust-ui/react/pull/551)) ### Features - Add all default size Teams icons processed & ready to be consumed by Stardust as needed @codepretty ([#478](https://github.com/stardust-ui/react/pull/478)) From ce13503440d344d2b608f2b3a3c0d80186a65415 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 3 Dec 2018 19:07:09 +0100 Subject: [PATCH 4/6] -fixed vertical alignment when icon is together with a content --- src/themes/teams/components/Button/buttonStyles.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/themes/teams/components/Button/buttonStyles.ts b/src/themes/teams/components/Button/buttonStyles.ts index 055b43f8c9..94e61f9fcc 100644 --- a/src/themes/teams/components/Button/buttonStyles.ts +++ b/src/themes/teams/components/Button/buttonStyles.ts @@ -76,9 +76,7 @@ const buttonStyles: ComponentSlotStylesInput = { color, backgroundColor, borderRadius, - display: 'inline', - justifyContent: 'center', - alignItems: 'center', + display: 'inline-block', position: 'relative', padding: `0 ${pxToRem(paddingLeftRightValue)}`, margin: `0 ${pxToRem(8)} 0 0`, @@ -280,6 +278,13 @@ const buttonStyles: ComponentSlotStylesInput = { }), } }, + icon: ({ props: { icon, iconPosition, content } }) => ({ + // added for correct vertical alignment if the icon is used together with the content + ...(icon && + content && { + float: iconPosition === 'after' ? 'right' : 'left', + }), + }), } export default buttonStyles From 695bcae6d8baa694cdfdceac9a32e7e5c8ce4620 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 3 Dec 2018 19:55:59 +0100 Subject: [PATCH 5/6] -reverted changes for children API because of lots of regressions --- CHANGELOG.md | 2 +- src/themes/teams/components/Button/buttonStyles.ts | 14 ++++++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 85952050ba..afa3de931a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,7 +21,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Prevent blind props forwarding if `Input`'s wrapper is defined as React element @kuzhelov ([#453](https://github.com/stardust-ui/react/pull/453)) - Fix invalid whatInput import @miroslavstastny ([#541](https://github.com/stardust-ui/react/pull/541)) - Fix invalid typings and propTypes for the content prop @mnajdova ([#528](https://github.com/stardust-ui/react/pull/528)) -- Fix truncate styles for the `Button`'s `content` as element and `children` API @mnajdova ([#551](https://github.com/stardust-ui/react/pull/551)) +- Fix truncate styles for the `Button`'s `content` prop used as element @mnajdova ([#551](https://github.com/stardust-ui/react/pull/551)) ### Features - Add all default size Teams icons processed & ready to be consumed by Stardust as needed @codepretty ([#478](https://github.com/stardust-ui/react/pull/478)) diff --git a/src/themes/teams/components/Button/buttonStyles.ts b/src/themes/teams/components/Button/buttonStyles.ts index 94e61f9fcc..b1d5c43f43 100644 --- a/src/themes/teams/components/Button/buttonStyles.ts +++ b/src/themes/teams/components/Button/buttonStyles.ts @@ -76,13 +76,14 @@ const buttonStyles: ComponentSlotStylesInput = { color, backgroundColor, borderRadius, - display: 'inline-block', + display: 'inline-flex', + justifyContent: 'center', + alignItems: 'center', position: 'relative', padding: `0 ${pxToRem(paddingLeftRightValue)}`, margin: `0 ${pxToRem(8)} 0 0`, verticalAlign: 'middle', cursor: 'pointer', - ...truncateStyle, // rectangular button defaults ...(!text && { @@ -278,12 +279,9 @@ const buttonStyles: ComponentSlotStylesInput = { }), } }, - icon: ({ props: { icon, iconPosition, content } }) => ({ - // added for correct vertical alignment if the icon is used together with the content - ...(icon && - content && { - float: iconPosition === 'after' ? 'right' : 'left', - }), + + content: () => ({ + ...truncateStyle, }), } From 09199931c39e5fef518847b221a4028a58b93688 Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 4 Dec 2018 11:03:08 +0100 Subject: [PATCH 6/6] -updated changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1bba529889..4a732729fd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,7 +18,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] ### Fixes -- Fix truncate styles for the `Button`'s `content` prop used as element @mnajdova ([#551](https://github.com/stardust-ui/react/pull/551)) +- Fix truncate styles in Teams team for the `Button`'s `content` prop used as element @mnajdova ([#551](https://github.com/stardust-ui/react/pull/551)) ## [v0.13.1](https://github.com/stardust-ui/react/tree/v0.13.1) (2018-12-03)