diff --git a/src/redesign/_style.scss b/src/redesign/_style.scss index 8cdc322d..117d48ee 100644 --- a/src/redesign/_style.scss +++ b/src/redesign/_style.scss @@ -528,12 +528,11 @@ select.form-control { } .username-suggestion { - padding: 0.15rem 0.5rem; + padding: 2px 0.5rem; margin: 0.25rem; border-radius: 0.5rem; - line-height: 2rem; - font-weight: 400; - font-size: 0.875rem; + line-height: 24px; + font-size: 12px; } .username-suggestion-label { diff --git a/src/redesign/register/CountryDropdown.jsx b/src/redesign/register/CountryDropdown.jsx index c7c1a762..94bd816a 100644 --- a/src/redesign/register/CountryDropdown.jsx +++ b/src/redesign/register/CountryDropdown.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Icon } from '@edx/paragon'; +import { Icon, IconButton } from '@edx/paragon'; import { ExpandMore, ExpandLess } from '@edx/paragon/icons'; import onClickOutside from 'react-onclickoutside'; import PropTypes from 'prop-types'; @@ -11,7 +11,7 @@ class CountryDropdown extends React.Component { super(props); this.state = { displayValue: '', - icon: ExpandMore, + icon: this.expandMoreButton(), errorMessage: '', showFieldError: true, }; @@ -83,22 +83,18 @@ class CountryDropdown extends React.Component { this.setState({ displayValue: opt[this.props.displayValueKey], showFieldError: false }); } else { this.setValue(null); - this.setState({ displayValue: value, showFieldError: !value }); + this.setState({ displayValue: value, showFieldError: true }); } } handleClick = (e) => { - let dropDownItems = this.getItems(e.target.value); - - if (dropDownItems?.length === 1) { - dropDownItems = this.getItems(); + const dropDownItems = this.getItems(e.target.value); + if (dropDownItems?.length > 1) { + this.setState({ dropDownItems, icon: this.expandLessButton(), errorMessage: '' }); } - this.setState({ - dropDownItems, icon: ExpandLess, errorMessage: '', showFieldError: false, - }); if (this.state.dropDownItems?.length > 0) { - this.setState({ dropDownItems: '', icon: ExpandMore }); + this.setState({ dropDownItems: '', icon: this.expandMoreButton(), errorMessage: '' }); } } @@ -107,9 +103,9 @@ class CountryDropdown extends React.Component { if (findstr.length > 0) { const filteredItems = this.getItems(findstr); - this.setState({ dropDownItems: filteredItems, icon: ExpandLess, errorMessage: '' }); + this.setState({ dropDownItems: filteredItems, icon: this.expandLessButton(), errorMessage: '' }); } else { - this.setState({ dropDownItems: '', icon: ExpandMore, errorMessage: this.props.errorMessage }); + this.setState({ dropDownItems: '', icon: this.expandMoreButton(), errorMessage: this.props.errorMessage }); } this.setDisplayValue(e.target.value); @@ -119,13 +115,24 @@ class CountryDropdown extends React.Component { if (this.state.dropDownItems?.length > 0) { const msg = this.state.displayValue === '' ? this.props.errorMessage : ''; this.setState(() => ({ - icon: ExpandMore, + icon: this.expandMoreButton(), dropDownItems: '', errorMessage: msg, })); } } + handleExpandLess() { + this.setState({ dropDownItems: '', icon: this.expandMoreButton() }); + } + + handleExpandMore(e) { + const dropDownItems = this.getItems(e.target.value); + this.setState({ + dropDownItems, icon: this.expandLessButton(), errorMessage: '', showFieldError: false, + }); + } + handleFocus(e) { if (this.props.handleFocus) { this.props.handleFocus(e); } } @@ -136,7 +143,35 @@ class CountryDropdown extends React.Component { handleItemClick(e) { this.setValue(e.target.value); - this.setState({ dropDownItems: '', icon: ExpandMore }); + this.setState({ dropDownItems: '', icon: this.expandMoreButton() }); + } + + expandMoreButton() { + return ( + { this.handleExpandMore(e); }} + /> + ); + } + + expandLessButton() { + return ( + { this.handleExpandLess(e); }} + /> + ); } render() { @@ -147,7 +182,7 @@ class CountryDropdown extends React.Component { name={this.props.name} autoComplete="off" floatingLabel={this.props.floatingLabel} - trailingElement={} + trailingElement={this.state.icon} handleChange={this.handleOnChange} handleClick={this.handleClick} handleBlur={this.handleOnBlur}