From 39bb05d8e1266ea08ca9f23238f838d404937285 Mon Sep 17 00:00:00 2001 From: Lambert W Date: Mon, 26 Feb 2018 14:19:53 -0800 Subject: [PATCH 1/4] [SpinButton] Consistent styles to Button and TextField --- .../SpinButton/SpinButton.styles.ts | 38 +++++++++++-------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts index 3bcf63e9f2a397..68c3acaa87ac7a 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts @@ -36,12 +36,16 @@ export const getArrowButtonStyles = memoizeFunction(( customSpecificArrowStyles?: Partial, ): IButtonStyles => { - const { palette } = theme; + const { + semanticColors + } = theme; - const ArrowButtonTextColor = palette.neutralPrimary; - const ArrowButtonTextColorPressed = palette.white; - const ArrowButtonBackgroundHovered = palette.neutralLight; - const ArrowButtonBackgroundPressed = palette.themePrimary; + const ArrowButtonTextColor = semanticColors.buttonText; + const ArrowButtonTextColorHovered = semanticColors.buttonTextHovered; + const ArrowButtonTextColorPressed = semanticColors.buttonTextChecked; + + const ArrowButtonBackgroundHovered = semanticColors.buttonBackgroundHovered; + const ArrowButtonBackgroundPressed = semanticColors.buttonBackgroundChecked; const defaultArrowButtonStyles: IButtonStyles = { root: { @@ -59,7 +63,8 @@ export const getArrowButtonStyles = memoizeFunction(( color: ArrowButtonTextColor }, rootHovered: { - backgroundColor: ArrowButtonBackgroundHovered + backgroundColor: ArrowButtonBackgroundHovered, + color: ArrowButtonTextColorHovered }, rootChecked: { backgroundColor: ArrowButtonBackgroundPressed, @@ -121,12 +126,12 @@ export const getStyles = memoizeFunction(( ): ISpinButtonStyles => { const { fonts, palette, semanticColors } = theme; - const SpinButtonRootBorderColor = palette.neutralTertiaryAlt; - const SpinButtonRootBorderColorHovered = palette.neutralSecondary; - const SpinButtonRootBorderColorFocused = palette.themePrimary; + const SpinButtonRootBorderColor = semanticColors.inputBorder; + const SpinButtonRootBorderColorHovered = semanticColors.inputBorderHovered; + const SpinButtonRootBorderColorFocused = semanticColors.inputFocusBorderAlt; - const SpinButtonTextColorDisabled = palette.neutralTertiaryAlt; - const SpinButtonInputTextColor = palette.neutralPrimary; + const SpinButtonTextColorDisabled = semanticColors.disabledText; + const SpinButtonInputTextColor = semanticColors.bodyText; const SpinButtonInputTextColorSelected = palette.white; const SpinButtonInputBackgroundColorSelected = palette.themePrimary; @@ -189,7 +194,8 @@ export const getStyles = memoizeFunction(( }, spinButtonWrapper: { display: 'flex', - height: '26px', + boxSizing: 'border-box', + height: '32px', minWidth: '86px', borderWidth: '1px', borderStyle: 'solid', @@ -228,10 +234,10 @@ export const getStyles = memoizeFunction(( fontSize: FontSizes.medium, color: SpinButtonInputTextColor, height: '100%', - paddingTop: '3px', - paddingRight: '3px', - paddingBottom: '4px', - paddingLeft: '4px', + paddingTop: '0px', + paddingRight: '12px', + paddingBottom: '0px', + paddingLeft: '12px', outline: '0', textOverflow: 'ellipsis', display: 'block', From 174c4451fce8f1e609955a3b47f7d06226bc113d Mon Sep 17 00:00:00 2001 From: Lambert W Date: Tue, 27 Feb 2018 13:46:12 -0800 Subject: [PATCH 2/4] Collapsed padding properties --- .../SpinButton/SpinButton.styles.ts | 31 ++++--------------- 1 file changed, 6 insertions(+), 25 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts index 68c3acaa87ac7a..cca82ee58e1992 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts @@ -53,10 +53,7 @@ export const getArrowButtonStyles = memoizeFunction(( display: 'block', height: '50%', width: '14px', - paddingTop: '0', - paddingRight: '0', - paddingBottom: '0', - paddingLeft: '0', + padding: '0', backgroundColor: 'transparent', textAlign: 'center', cursor: 'default', @@ -143,10 +140,7 @@ export const getStyles = memoizeFunction(( fontSize: FontSizes.medium, width: '100%', minWidth: '86px', - paddingTop: '2px', - paddingRight: '2px', - paddingBottom: '2px', - paddingLeft: '2px', + padding: '2px', }, labelWrapper: { display: 'inline-flex' @@ -166,11 +160,7 @@ export const getStyles = memoizeFunction(( marginTop: '10px' }, icon: { - paddingTop: '2px', - paddingRight: '5px', - paddingBottom: '2px', - paddingLeft: '5px', - + padding: '2px 5px', fontSize: '20px' }, iconDisabled: { @@ -178,10 +168,7 @@ export const getStyles = memoizeFunction(( }, label: { pointerEvents: 'none', - paddingTop: '2px', - paddingRight: '0', - paddingBottom: '2px', - paddingLeft: '0', + padding: '2px 0', }, labelDisabled: { cursor: 'default', @@ -234,10 +221,7 @@ export const getStyles = memoizeFunction(( fontSize: FontSizes.medium, color: SpinButtonInputTextColor, height: '100%', - paddingTop: '0px', - paddingRight: '12px', - paddingBottom: '0px', - paddingLeft: '12px', + padding: '0 12px', outline: '0', textOverflow: 'ellipsis', display: 'block', @@ -267,10 +251,7 @@ export const getStyles = memoizeFunction(( float: 'left', height: '100%', cursor: 'default', - paddingTop: '0', - paddingRight: '0', - paddingBottom: '0', - paddingLeft: '0', + padding: '0', boxSizing: 'border-box' }, arrowButtonsContainerDisabled: _getDisabledStyles(theme), From e8447f4d61bae41c2f40a18428ae027fbb0a8217 Mon Sep 17 00:00:00 2001 From: Lambert W Date: Tue, 27 Feb 2018 14:21:57 -0800 Subject: [PATCH 3/4] Update snapshot --- .../__snapshots__/SpinButton.test.tsx.snap | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap index a0050221b1b21f..00e7e210848b5e 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap @@ -57,15 +57,16 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` className= { - border-color: #c8c8c8; + border-color: #a6a6a6; border-style: solid; border-width: 1px; + box-sizing: border-box; display: flex; - height: 26px; + height: 32px; min-width: 86px; } &:hover { - border-color: #666666; + border-color: #212121; outline: 2px dashed transparent; } @media screen and (-ms-high-contrast: active){&:hover { @@ -98,10 +99,10 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` min-width: 72px; outline: 0; overflow: hidden; - padding-bottom: 4px; - padding-left: 4px; - padding-right: 3px; - padding-top: 3px; + padding-bottom: 0; + padding-left: 12px; + padding-right: 12px; + padding-top: 0; text-overflow: ellipsis; user-select: text; width: calc(100% - 14px); @@ -198,11 +199,11 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` } &:hover { background-color: #eaeaea; - color: #004578; + color: #000000; } &:active { - background-color: #0078d7; - color: #ffffff; + background-color: #c8c8c8; + color: #212121; } @media screen and (-ms-high-contrast: active){&:active { background-color: Highlight; @@ -303,11 +304,11 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` } &:hover { background-color: #eaeaea; - color: #004578; + color: #000000; } &:active { - background-color: #0078d7; - color: #ffffff; + background-color: #c8c8c8; + color: #212121; } @media screen and (-ms-high-contrast: active){&:active { background-color: Highlight; From 03d90d33b8191b678801ec2f704f3a639c3cce42 Mon Sep 17 00:00:00 2001 From: Lambert W Date: Tue, 27 Feb 2018 14:22:51 -0800 Subject: [PATCH 4/4] Change file --- ...n-spinButtonConsistentStyles_2018-02-27-22-22.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/magellan-spinButtonConsistentStyles_2018-02-27-22-22.json diff --git a/common/changes/office-ui-fabric-react/magellan-spinButtonConsistentStyles_2018-02-27-22-22.json b/common/changes/office-ui-fabric-react/magellan-spinButtonConsistentStyles_2018-02-27-22-22.json new file mode 100644 index 00000000000000..fe54983db3851d --- /dev/null +++ b/common/changes/office-ui-fabric-react/magellan-spinButtonConsistentStyles_2018-02-27-22-22.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "SpinButton: Updated styling to be consistent with Button and TextField", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "law@microsoft.com" +} \ No newline at end of file