From 914fa61e623e96bfa5011dc6a7c027fa3b45ee57 Mon Sep 17 00:00:00 2001 From: Jarrod Flesch Date: Thu, 18 Jun 2020 10:36:42 -0400 Subject: [PATCH] removes unnecessary buttons styles previoulsy added --- .../components/elements/Button/index.js | 15 ++-- .../components/elements/Button/index.scss | 85 +++++++++---------- .../DraggableSection/ActionHandle/index.js | 24 +++--- .../DraggableSection/PositionHandle/index.js | 8 +- .../forms/field-types/Repeater/index.js | 4 +- .../forms/field-types/Repeater/index.scss | 5 ++ 6 files changed, 71 insertions(+), 70 deletions(-) diff --git a/src/client/components/elements/Button/index.js b/src/client/components/elements/Button/index.js index aa4fc934a7..fe101ed2d0 100644 --- a/src/client/components/elements/Button/index.js +++ b/src/client/components/elements/Button/index.js @@ -57,9 +57,8 @@ const Button = (props) => { onClick, disabled, icon, - removeIconBorder, + iconStyle, buttonStyle, - iconColor, round, size, iconPosition, @@ -69,9 +68,8 @@ const Button = (props) => { baseClass, className && className, buttonStyle && `${baseClass}--style-${buttonStyle}`, - iconColor && `${baseClass}--icon-color-light-gray`, icon && `${baseClass}--icon`, - removeIconBorder && `${baseClass}--icon-without-border`, + iconStyle && `${baseClass}--icon-style-${iconStyle}`, (icon && !children) && `${baseClass}--icon-only`, disabled && `${baseClass}--disabled`, round && `${baseClass}--round`, @@ -139,12 +137,11 @@ Button.defaultProps = { children: null, onClick: null, disabled: undefined, - removeIconBorder: false, icon: null, size: 'medium', round: false, - iconColor: undefined, iconPosition: 'right', + iconStyle: 'without-border', }; Button.propTypes = { @@ -159,8 +156,10 @@ Button.propTypes = { children: PropTypes.node, onClick: PropTypes.func, disabled: PropTypes.bool, - removeIconBorder: PropTypes.bool, - iconColor: PropTypes.oneOf(['light-gray', undefined]), + iconStyle: PropTypes.oneOfType([ + 'with-border', + 'without-border', + ]), icon: PropTypes.oneOfType([ PropTypes.node, PropTypes.oneOf(['chevron', 'x', 'plus']), diff --git a/src/client/components/elements/Button/index.scss b/src/client/components/elements/Button/index.scss index 7f257457e2..07e4c53631 100644 --- a/src/client/components/elements/Button/index.scss +++ b/src/client/components/elements/Button/index.scss @@ -1,39 +1,5 @@ @import '../../../scss/styles.scss'; -@mixin style-icon-color($color: $color-dark-gray, $hover-color: white, $focus-color: $color-light-gray) { - .btn__icon { - border: 1px solid $color; - border-radius: 100%; - } - - &.btn--icon-only { - .btn__icon { - margin: 0; - } - } - - &:hover { - .btn__icon { - @include color-svg($hover-color); - background: $color; - } - } - - &:focus { - .btn__icon { - @include color-svg($color); - background: $focus-color; - } - } - - &:active { - .btn__icon { - @include color-svg($hover-color); - background: lighten($color, 10%); - } - } -} - .btn { background: transparent; line-height: base(1); @@ -47,6 +13,17 @@ text-decoration: none; text-align: center; + .btn__icon { + border: 1px solid; + border-radius: 100%; + } + + &--icon-style-without-border { + .btn__icon { + border: none; + } + } + span { line-height: base(1); } @@ -111,24 +88,12 @@ &--style-icon-label { padding: 0; font-weight: 600; - - @include style-icon-color; - } - - &--icon-color-light-gray { - @include style-icon-color($color-light-gray, $color-dark-gray, $color-light-gray); } &--style-light-gray { box-shadow: inset 0 0 0 $style-stroke-width $color-dark-gray; } - &--icon-without-border { - .btn__icon { - border: none; - } - } - &--icon-position-left { .btn__content { flex-direction: row-reverse; @@ -145,6 +110,34 @@ } } + &--icon-only { + .btn__icon { + padding: 0; + margin: 0; + } + } + + &:hover { + .btn__icon { + @include color-svg(white); + background: $color-dark-gray; + } + } + + &:focus { + .btn__icon { + @include color-svg($color-dark-gray); + background: $color-light-gray; + } + } + + &:active { + .btn__icon { + @include color-svg(white); + background: lighten($color-dark-gray, 10%); + } + } + &:focus, &:active { outline: none; diff --git a/src/client/components/forms/DraggableSection/ActionHandle/index.js b/src/client/components/forms/DraggableSection/ActionHandle/index.js index 1357a408c0..17a1118957 100644 --- a/src/client/components/forms/DraggableSection/ActionHandle/index.js +++ b/src/client/components/forms/DraggableSection/ActionHandle/index.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import Button from '../../../elements/Button'; @@ -11,9 +11,6 @@ const baseClass = 'action-handle'; const ActionHandle = (props) => { const { addRow, removeRow, singularLabel } = props; - const [addRowPopupActive, setAddRowPopupActive] = useState(false); - const [removeRowPopupActive, setRemoveRowPopupActive] = useState(false); - return (
{ button={(
); }; -ActionHandle.defaultProps = {}; +ActionHandle.defaultProps = { + singularLabel: 'Row', +}; ActionHandle.propTypes = { + singularLabel: PropTypes.string, addRow: PropTypes.func.isRequired, removeRow: PropTypes.func.isRequired, }; diff --git a/src/client/components/forms/DraggableSection/PositionHandle/index.js b/src/client/components/forms/DraggableSection/PositionHandle/index.js index 228cf673fb..7fc70c1e8e 100644 --- a/src/client/components/forms/DraggableSection/PositionHandle/index.js +++ b/src/client/components/forms/DraggableSection/PositionHandle/index.js @@ -20,20 +20,20 @@ const PositionHandle = (props) => {
diff --git a/src/client/components/forms/field-types/Repeater/index.js b/src/client/components/forms/field-types/Repeater/index.js index a2cad9783b..b55d031a9e 100644 --- a/src/client/components/forms/field-types/Repeater/index.js +++ b/src/client/components/forms/field-types/Repeater/index.js @@ -183,8 +183,10 @@ const Repeater = (props) => {