Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(app): Match wifi dropdown styles to design #2522

Merged
merged 3 commits into from
Oct 23, 2018
Merged

refactor(app): Match wifi dropdown styles to design #2522

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
988102e
refactor(app): Match wifi dropdown styles to design
Kadee80 Oct 22, 2018
dbf5a4d
fixup: limit wifi name text length
Kadee80 Oct 23, 2018
3d2a977
fixup: Increase dropdown width to match design feedback
Kadee80 Oct 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 53 additions & 2 deletions app/src/components/RobotSettings/connection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @flow
// UI components for displaying connection info
import * as React from 'react'
import Select from 'react-select'
import Select, {components} from 'react-select'
import find from 'lodash/find'
import {Icon} from '@opentrons/components'
import {CardContentHalf} from '../layout'
Expand Down Expand Up @@ -88,13 +88,64 @@ export function NetworkDropdown (props: NetworkDropdownProps) {
const options = list.map(NetworkOption)
const selectedOption = find(options, {value})

const selectStyles = {
option: base => ({
...base,
padding: '0.25rem 0',
}),
input: () => ({
marginTop: '-0.25rem',
marginLeft: 0,
}),
container: base => ({
...base,
backgroundColor: 'transparent',
height: '2rem',
overflow: 'visible',
}),
control: () => ({
backgroundColor: '#e5e2e2',
border: 'none',
padding: '0.25rem 0rem',
outline: 'none',
borderRadius: '3px',
height: '1.75rem',
boxShadow: 'none',
}),
indicatorSeparator: () => ({
display: 'none',
}),
}
// Custom dropdown indicator icon component needed to match comp lib
const DropdownIndicator = props => {
return (
components.DropdownIndicator && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of curiosity, what is this existence check for? I don't see one for components.Menu

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed so that the new dropdown indicator inherits the CommonProps from the original DropdownIndicator from react-select and Flow doesnt explode

<components.DropdownIndicator {...props}>
<div className={styles.dropdown_icon}>
<Icon name="menu-down" width="100%" />
</div>
</components.DropdownIndicator>
)
)
}
// custom Menu (options dropdown) component
const Menu = props => {
return (
<components.Menu {...props}>
<div className={styles.options_menu}>{props.children}</div>
</components.Menu>
)
}

return (
<Select
className={styles.wifi_dropdown}
isDisabled={disabled}
value={selectedOption}
onChange={onChange}
options={options}
styles={selectStyles}
components={{DropdownIndicator, Menu}}
/>
)
}
Expand Down Expand Up @@ -131,7 +182,7 @@ function NetworkOption (nw: WifiNetwork): SelectNetworkOption {
const label = (
<div className={styles.wifi_option}>
{connectedIcon}
{value}
<span className={styles.wifi_name}>{value}</span>
{signalIcon}
{securedIcon}
</div>
Expand Down
39 changes: 38 additions & 1 deletion app/src/components/RobotSettings/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,28 @@

/* TODO(mc, 2018-10-15): switch wifi select/options to flex ASAP */
.wifi_dropdown {
max-width: 75%;
max-width: 16.875rem;

/* TODO(ka, 2018-10-19): This is needed to address an inaccessible positioning element from react-select */
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately this could not be avoided due to the fact that there are a few elements react-select uses for positioning the dropdown, that are not accessible directly for styling or replacement. There is a portal option I'd like to explore further, but the documentation is lacking.
The reason this div is problematic is we moved the dropdown options up from the default position, to over the dropdown itself. Moving the Menu (which is accessible via api or custom component injection) left us with a white bg div with a drop shadow in the original location.

& > div:not(:first-child) {
box-shadow: none;
background-color: transparent;
}
}

.wifi_option {
@apply --font-body-1-dark;

width: 100%;
padding: 0.25rem 0.5rem;
}

.wifi_name {
display: inline-block;
width: calc(100% - 3rem);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.wifi_option_icon,
Expand All @@ -85,6 +102,26 @@
padding-left: 0.25rem;
}

.dropdown_icon {
position: absolute;
top: 0.2rem;
right: 0.25rem;
width: 1.25rem;
pointer-events: none;

& svg {
color: var(--c-dark-gray);
}
}

.options_menu {
background-color: var(--c-light-gray);
position: relative;
top: -2.5rem;
border-radius: 3px;
padding: 0.25rem 0 0.5rem;
}

.connection_label {
@apply --font-body-1-dark;

Expand Down