From 030f9d5ea4c46b67cfd82d7add54762b9fef0b66 Mon Sep 17 00:00:00 2001 From: Zack Litzsinger Date: Tue, 4 Dec 2018 16:23:17 -0500 Subject: [PATCH 1/4] fixed some styles for disabled state of select component --- package-lock.json | 2 +- src/components/Select/SearchableSelect.js | 48 ++- src/components/Select/styles/Controls.js | 3 + src/components/Select/styles/CurrentValue.js | 7 +- src/components/Select/styles/LoadingState.js | 8 +- .../Select/styles/SearchableCurrentValue.js | 4 +- src/components/Select/styles/SelectWrapper.js | 394 ------------------ src/components/Select/styles/index.js | 1 - 8 files changed, 54 insertions(+), 413 deletions(-) delete mode 100644 src/components/Select/styles/SelectWrapper.js diff --git a/package-lock.json b/package-lock.json index 74bcf0be..3138198d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bandwidth/shared-components", - "version": "6.0.0-canary10", + "version": "6.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/components/Select/SearchableSelect.js b/src/components/Select/SearchableSelect.js index a333d2dc..964f63e5 100644 --- a/src/components/Select/SearchableSelect.js +++ b/src/components/Select/SearchableSelect.js @@ -40,31 +40,65 @@ export default class SearchableSelect extends React.Component { handleSelectStateChange = (changes, downshiftState) => { const { filterOptions, options, onStateChange } = this.props; - if (changes.hasOwnProperty('isOpen') && changes.isOpen) { + console.log( + 'downshiftState', + downshiftState, + downshiftState.getInputProps(), + ); + + // if (changes.hasOwnProperty('isOpen') && !changes.isOpen) { + // const el = document.querySelector( + // `[aria-labelledby=${ + // downshiftState.getInputProps()['aria-labelledby'] + // }] input`,`` + // ); + // console.log('EL: ', el); + // el.blur(); + // } + + console.log('changes', changes); + + if ( + changes.hasOwnProperty('isOpen') && + changes.isOpen && + !changes.inputValue + ) { this.setState({ inputValue: changes.selectedItem || '', filteredOptions: options, }); } - if (changes.hasOwnProperty('inputValue')) { - this.setState({ - inputValue: changes.inputValue, - filteredOptions: filterOptions(options, changes.inputValue, this.props), - }); - } + // if (changes.hasOwnProperty('inputValue')) { + // this.setState({ + // inputValue: changes.inputValue, + // filteredOptions: filterOptions(options, changes.inputValue, this.props), + // }); + // } onStateChange && onStateChange(changes, downshiftState); }; + handleInputValueChange = inputValue => { + const { filterOptions, options } = this.props; + console.log('INPUT VALUE: ', inputValue); + this.setState({ + inputValue: inputValue, + filteredOptions: filterOptions(options, inputValue, this.props), + }); + }; + render() { const { options, onStateChange, CurrentValue, ...rest } = this.props; + console.log('STATE: ', this.state); + return ( + {!!inputValue && !disabled && !required && } setState({ inputValue: '' }), diff --git a/src/components/Select/styles/SelectWrapper.js b/src/components/Select/styles/SelectWrapper.js deleted file mode 100644 index 8a76377f..00000000 --- a/src/components/Select/styles/SelectWrapper.js +++ /dev/null @@ -1,394 +0,0 @@ -import styled, { css, keyframes } from 'styled-components'; -import get from 'extensions/themeGet'; - -const fadeIn = keyframes` - from { - opacity: 0; - } - to { - opacity: 1; - } -`; - -const expand = keyframes` - from { - transform: translateY(-50%) scaleY(0); - opacity: 0; - } - to { - transform: translateY(0) scaleY(1); - opacity: 1; - } -`; - -const SelectWrapper = styled.div` - width: 100%; - color: ${get('colors.text.default')}; - - .Select { - position: relative; - font-size: 1em; - } - - .Select, - .Select div, - .Select input, - .Select span { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - .Select.is-disabled > .Select-control { - background-color: ${get('colors.background.disabled')}; - } - .Select.is-disabled > .Select-control:hover { - box-shadow: none; - } - .Select.is-disabled .Select-arrow-zone { - cursor: default; - pointer-events: none; - opacity: 0.5; - } - - .Select-placeholder ~ .Select-input, - .Select-value ~ .Select-input { - position: absolute; - left: 0; - top: 0; - bottom: 0; - } - - .Select-control { - background-color: ${get('colors.background.default')}; - border-color: ${props => - props.invalid - ? get('colors.negative.border') - : get('colors.border.light')}; - border-radius: 0; - border-width: ${get('thicknesses.wide')}; - border-style: solid; - color: inherit; - cursor: default; - border-spacing: 0; - border-collapse: separate; - outline: none; - overflow: hidden; - position: relative; - width: 100%; - min-height: 53px; - display: flex; - & > * { - flex: 0 1 auto; - } - & > .Select-multi-value-wrapper { - flex: 1 1 auto; - } - } - - ${props => - props.invalid - ? css` - .Select:not(.is-open) > .Select-control { - box-shadow: inset 0 -5px 0 ${get('colors.negative.light')}; - } - ` - : ''} .Select-control .Select-input:focus { - outline: none; - } - - .is-searchable.is-open > .Select-control { - cursor: text; - } - .is-open > .Select-control .Select-arrow { - transform: rotate(180deg); - } - .is-searchable.is-focused:not(.is-open) > .Select-control { - cursor: text; - } - - .is-focused > .Select-control { - border-color: ${get('colors.border.medium')}; - } - - .is-focused:not(.is-open) > .Select-control { - box-shadow: inset 0 -5px 0 ${get('colors.primary.light')}; - } - - .Select-placeholder, - .Select--single > .Select-control .Select-value { - color: ${({ value }) => (value ? 'inherit' : get('colors.text.disabled'))}; - font-size: inherit; - line-height: 1.5; - padding: calc(${get('spacing.medium')} - 1px) ${get('spacing.medium')}; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .has-value.Select--single > .Select-control .Select-value .Select-value-label, - .has-value.is-pseudo-focused.Select--single - > .Select-control - .Select-value - .Select-value-label { - color: inherit; - cursor: pointer; - text-decoration: none; - } - .has-value.Select--single - > .Select-control - .Select-value - a.Select-value-label:hover, - .has-value.is-pseudo-focused.Select--single - > .Select-control - .Select-value - a.Select-value-label:hover { - color: ${get('colors.primary.default')}; - outline: none; - } - .has-value.Select--single - > .Select-control - .Select-value - a.Select-value-label:focus, - .has-value.is-pseudo-focused.Select--single - > .Select-control - .Select-value - a.Select-value-label:focus { - color: ${get('colors.primary.default')}; - outline: none; - } - - & .is-open .Select-control .Select-value .Select-value-label { - /* the library owner used !important on theirs... bah */ - - color: inherit !important; - } - - .Select-input { - font-size: inherit; - line-height: 1.5; - padding: calc(${get('spacing.medium')} - 1px) ${get('spacing.medium')}; - vertical-align: middle; - } - .Select-input > input { - padding: 0; - width: 100%; - background: none transparent; - border: 0 none; - box-shadow: none; - cursor: default; - display: block; - margin: 0; - outline: none; - line-height: 1; - font-size: inherit; - min-height: 1em; - font: ${get('fonts.brand')}; - /* For IE 8 compatibility */ - -webkit-appearance: none; - } - .is-focused .Select-input > input { - cursor: text; - } - .has-value.is-pseudo-focused .Select-input { - opacity: 0; - } - .Select-control:not(.is-searchable) > .Select-input { - outline: none; - } - .Select-loading-zone { - position: absolute; - right: 35px; - top: 50%; - transform: translateY(-50%); - } - .Select-loading { - width: 0; - height: 0; - } - .is-loading .Select-placeholder { - width: 100%; - display: flex; - - & > * { - margin: auto; - } - } - - .Select-clear-zone { - animation: ${fadeIn} 200ms; - color: inherit; - opacity: 0.5; - cursor: pointer; - text-align: center; - padding: 9px 10px; - } - .Select-clear-zone:hover { - opacity: 1; - } - .Select-clear { - font-size: 20px; - display: block; - height: 26px; - } - .Select--multi .Select-clear-zone { - width: 17px; - } - .Select-arrow-zone { - cursor: pointer; - display: inline-block; - } - .Select-arrow { - display: block; - padding: calc(${get('spacing.medium')} - 1px) ${get('spacing.medium')}; - transition: transform 200ms; - &::before { - font-family: ${get('fonts.icon')}; - content: '\\f117'; - } - } - .is-open .Select-arrow, - .Select-arrow-zone:hover > .Select-arrow { - border-top-color: ${get('colors.gray.default')}; - } - .Select--multi .Select-multi-value-wrapper { - display: flex; - flex-direction: row; - } - .Select .Select-aria-only { - display: inline-block; - height: 1px; - width: 1px; - margin: -1px; - clip: rect(0, 0, 0, 0); - overflow: hidden; - float: left; - } - - .Select-menu-outer { - background-color: ${get('colors.background.default')}; - border: ${get('thicknesses.wide')} solid ${get('colors.border.medium')}; - border-top-width: 0; - box-shadow: ${get('shadows.short')}; - box-sizing: border-box; - max-height: 200px; - position: absolute; - top: 100%; - width: 100%; - z-index: 1000000; - -webkit-overflow-scrolling: touch; - overflow: hidden; - animation: ${expand} 200ms; - } - .Select-menu { - max-height: 198px; - overflow-y: auto; - } - .Select-option { - box-sizing: border-box; - border-bottom: ${get('thicknesses.normal')} solid - ${get('colors.gray.border')}; - background-color: ${get('colors.background.default')}; - color: ${get('colors.text.default')}; - cursor: pointer; - display: block; - padding: calc(${get('spacing.extraSmall')} - 1px) ${get('spacing.medium')}; - } - .Select-option.is-geted { - color: ${get('colors.primary.default')}; - } - .Select-option.is-focused { - background-color: ${get('colors.primary.light')}; - color: ${get('colors.text.default')}; - } - .Select-option.is-disabled { - color: ${get('colors.gray.medium')}; - cursor: default; - } - .Select-noresults { - box-sizing: border-box; - color: ${get('colors.text.default')}; - cursor: default; - display: block; - padding: calc(${get('spacing.extraSmall')} - 1px) ${get('spacing.medium')}; - } - .Select--multi .Select-input { - vertical-align: middle; - margin-left: 10px; - padding: 0; - } - .Select--multi.has-value .Select-input { - margin-left: 5px; - } - .Select--multi .Select-value { - background-color: ${get('colors.primary.light')}; - border-radius: 5px; - color: ${get('colors.primary.default')}; - display: flex; - flex-direction: row; - justify-content: flex-start; - font-size: 0.9em; - line-height: 1.4; - margin-left: 5px; - margin-top: 5px; - vertical-align: top; - padding: ${get('spacing.extraSmall')}; - border-width: ${get('thicknesses.wide')}; - border-style: solid; - border-color: ${get('colors.primary.default')}; - } - .Select--multi .Select-value-icon, - .Select--multi .Select-value-label { - flex: 0 0 auto; - margin: auto 4px; - } - - .Select--multi .Select-value-label { - border-bottom-right-radius: 2px; - border-top-right-radius: 2px; - cursor: default; - } - .Select--multi a.Select-value-label { - color: ${get('colors.primary.default')}; - cursor: pointer; - text-decoration: none; - } - .Select--multi a.Select-value-label:hover { - text-decoration: underline; - } - .Select--multi .Select-value-icon { - cursor: pointer; - border-bottom-left-radius: 2px; - border-top-left-radius: 2px; - border-right-width: ${get('thicknesses.wide')}; - border-right-style: solid; - border-right-color: ${get('colors.primary.default')}; - padding-right: 5px; - } - .Select--multi .Select-value-icon:hover, - .Select--multi .Select-value-icon:focus, - .Select--multi .Select-value-icon:active { - color: ${get('colors.text.inverted')}; - background: ${get('colors.primary.default')}; - } - .Select--multi.is-disabled .Select-value { - background-color: ${get('colors.background.disabled')}; - border-color: ${get('colors.gray.default')}; - border-style: solid; - border-width: ${get('thicknesses.wide')}; - color: ${get('colors.text.disabled')}; - } - .Select--multi.is-disabled .Select-value-icon { - cursor: not-allowed; - border-right-color: ${get('colors.gray.default')}; - border-right-style: solid; - border-right-width: ${get('thicknesses.wide')}; - } - .Select--multi.is-disabled .Select-value-icon:hover, - .Select--multi.is-disabled .Select-value-icon:focus, - .Select--multi.is-disabled .Select-value-icon:active { - background-color: ${get('colors.background.disabled')}; - color: ${get('colors.text.disabled')}; - } -`; - -export default SelectWrapper; diff --git a/src/components/Select/styles/index.js b/src/components/Select/styles/index.js index a1d2d2b7..a1d5db41 100644 --- a/src/components/Select/styles/index.js +++ b/src/components/Select/styles/index.js @@ -5,7 +5,6 @@ export { default as Option } from './Option'; export { default as OptionsList } from './OptionsList'; export { default as OptionsListContainer } from './OptionsListContainer'; export { default as SearchableCurrentValue } from './SearchableCurrentValue'; -export { default as SelectWrapper } from './SelectWrapper'; export { default as CurrentValue } from './CurrentValue'; export { default as Options } from './Options'; export { default as LoadingState } from './LoadingState'; From c60ba470fb6b4aff79b3d34a728630f5d3594196 Mon Sep 17 00:00:00 2001 From: Zack Litzsinger Date: Tue, 4 Dec 2018 16:32:27 -0500 Subject: [PATCH 2/4] fixed select pointer styles and onClick vs onFocus issues --- src/components/Select/styles/CurrentValue.js | 8 ++++++-- src/components/Select/styles/SearchableCurrentValue.js | 1 + 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Select/styles/CurrentValue.js b/src/components/Select/styles/CurrentValue.js index d0973e79..5af1c501 100644 --- a/src/components/Select/styles/CurrentValue.js +++ b/src/components/Select/styles/CurrentValue.js @@ -25,6 +25,10 @@ const DefaultWrapper = styled.div` } `; +const StyledInput = styled(DefaultInput)` + cursor: ${({ disabled }) => (disabled ? 'text' : 'pointer')}; +`; + const Unsearchable = forwardRef( ( { @@ -82,7 +86,7 @@ const Unsearchable = forwardRef( Unsearchable.defaultProps = { Wrapper: DefaultWrapper, - Input: DefaultInput, + Input: StyledInput, Controls: DefaultControls, Arrow: DefaultArrow, ClearButton: DefaultClearButton, @@ -91,7 +95,7 @@ Unsearchable.defaultProps = { Unsearchable.styles = { Wrapper: DefaultWrapper, - Input: DefaultInput, + Input: StyledInput, Controls: DefaultControls, Arrow: DefaultArrow, ClearButton: DefaultClearButton, diff --git a/src/components/Select/styles/SearchableCurrentValue.js b/src/components/Select/styles/SearchableCurrentValue.js index f76fcfa6..93fba34f 100644 --- a/src/components/Select/styles/SearchableCurrentValue.js +++ b/src/components/Select/styles/SearchableCurrentValue.js @@ -44,6 +44,7 @@ const Searchable = forwardRef( required, invalid, onFocus: openMenu, + onClick: openMenu, value: inputValue, })} {...rest} From 2b261a690b4850a2792452b08e3f0b6edd3ea304 Mon Sep 17 00:00:00 2001 From: Zack Litzsinger Date: Tue, 4 Dec 2018 16:40:22 -0500 Subject: [PATCH 3/4] removed cursor for normal select type component --- src/components/Input/Input.js | 5 +++++ src/components/Input/styles/InputStyles.js | 5 ++++- src/components/Select/styles/CurrentValue.js | 1 + stories/Input.js | 5 ++++- 4 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/Input/Input.js b/src/components/Input/Input.js index 8d69b958..cbddb36f 100644 --- a/src/components/Input/Input.js +++ b/src/components/Input/Input.js @@ -127,6 +127,10 @@ class Input extends React.PureComponent { * change the focus state of the element) */ appearFocused: PropTypes.bool, + /** + * Hides the cursor from view + */ + hideCursor: PropTypes.bool, }; static defaultProps = { @@ -154,6 +158,7 @@ class Input extends React.PureComponent { autoComplete: true, spellCheck: 'false', appearFocused: false, + hideCursor: false, }; static styles = styles; diff --git a/src/components/Input/styles/InputStyles.js b/src/components/Input/styles/InputStyles.js index 86c67416..1318d309 100644 --- a/src/components/Input/styles/InputStyles.js +++ b/src/components/Input/styles/InputStyles.js @@ -12,7 +12,10 @@ const InputStyles = styled.input` border-style: solid; text-align: left; - color: ${get('colors.text.default')}; + color: ${({ hideCursor }) => + hideCursor ? 'transparent' : 'var(--colors-text-default)'}; + text-shadow: ${({ hideCursor }) => + hideCursor ? '0 0 0 var(--colors-text-default)' : 'none'}; background: ${get('colors.background.default')}; opacity: 1; border-color: ${props => diff --git a/src/components/Select/styles/CurrentValue.js b/src/components/Select/styles/CurrentValue.js index 5af1c501..f8d8f6f6 100644 --- a/src/components/Select/styles/CurrentValue.js +++ b/src/components/Select/styles/CurrentValue.js @@ -71,6 +71,7 @@ const Unsearchable = forwardRef( invalid={invalid} placeholder={placeholder} value={inputValue} + hideCursor {...rest} /> diff --git a/stories/Input.js b/stories/Input.js index 8c27285e..390cb055 100644 --- a/stories/Input.js +++ b/stories/Input.js @@ -1,6 +1,5 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; import Input from 'components/Input'; import Grid from 'layouts/Grid'; @@ -13,6 +12,10 @@ storiesOf('Input', module)

Password

+

Appear focused

+ +

Without Cursor

+ )) .add('invalid', () => ( From 03a2a1d241743cd36fdee3b65cc73eeb39c7c585 Mon Sep 17 00:00:00 2001 From: Zack Litzsinger Date: Wed, 5 Dec 2018 11:00:02 -0500 Subject: [PATCH 4/4] cleaned up, removed comments --- src/components/Select/SearchableSelect.js | 32 ++--------------------- src/components/Select/styles/Options.js | 2 +- stories/Input.js | 20 +++++++++++--- 3 files changed, 19 insertions(+), 35 deletions(-) diff --git a/src/components/Select/SearchableSelect.js b/src/components/Select/SearchableSelect.js index 964f63e5..c46d77ec 100644 --- a/src/components/Select/SearchableSelect.js +++ b/src/components/Select/SearchableSelect.js @@ -38,25 +38,7 @@ export default class SearchableSelect extends React.Component { }; handleSelectStateChange = (changes, downshiftState) => { - const { filterOptions, options, onStateChange } = this.props; - - console.log( - 'downshiftState', - downshiftState, - downshiftState.getInputProps(), - ); - - // if (changes.hasOwnProperty('isOpen') && !changes.isOpen) { - // const el = document.querySelector( - // `[aria-labelledby=${ - // downshiftState.getInputProps()['aria-labelledby'] - // }] input`,`` - // ); - // console.log('EL: ', el); - // el.blur(); - // } - - console.log('changes', changes); + const { options, onStateChange } = this.props; if ( changes.hasOwnProperty('isOpen') && @@ -69,19 +51,11 @@ export default class SearchableSelect extends React.Component { }); } - // if (changes.hasOwnProperty('inputValue')) { - // this.setState({ - // inputValue: changes.inputValue, - // filteredOptions: filterOptions(options, changes.inputValue, this.props), - // }); - // } - onStateChange && onStateChange(changes, downshiftState); }; - handleInputValueChange = inputValue => { + handleInputValueChange = (inputValue, downshiftState) => { const { filterOptions, options } = this.props; - console.log('INPUT VALUE: ', inputValue); this.setState({ inputValue: inputValue, filteredOptions: filterOptions(options, inputValue, this.props), @@ -91,8 +65,6 @@ export default class SearchableSelect extends React.Component { render() { const { options, onStateChange, CurrentValue, ...rest } = this.props; - console.log('STATE: ', this.state); - return ( -

Appear focused

- -

Without Cursor

- )) .add('invalid', () => ( @@ -37,4 +33,20 @@ storiesOf('Input', module)

Password

+ )) + .add('appear focused', () => ( + + )) + .add('hide cursor', () => ( + ));