Datepicker: Add styles

This commit is contained in:
Paul Sealock 2018-06-29 12:34:17 +12:00
parent 323807c074
commit a4305347ce
10 changed files with 3601 additions and 3468 deletions

View File

@ -10,6 +10,7 @@ import { Component, Fragment } from '@wordpress/element';
*/
import Header from 'layout/header';
import DatePicker from 'components/date-picker';
import DropdownButton from 'components/dropdown-button';
export default class extends Component {
render() {
@ -18,6 +19,8 @@ export default class extends Component {
<Fragment>
<Header sections={ [ __( 'Analytics', 'woo-dash' ) ] } />
<DatePicker query={ query } path={ path } />
<p>Example single line button - default width 100% of container</p>
<DropdownButton labels={ [ 'All Products Sold' ] } />
</Fragment>
);
}

View File

@ -93,14 +93,14 @@ class DatePickerContent extends Component {
<ComparePeriods onSelect={ onSelect } compare={ compare } />
{ isValidSelection( selectedTab ) ? (
<Link
className="woocommerce-date-picker__update-btn"
className="woocommerce-date-picker__update-btn components-button is-button is-primary"
to={ getUpdatePath( selectedTab ) }
onClick={ onClose }
>
{ __( 'Update', 'woo-dash' ) }
</Link>
) : (
<Button className="woocommerce-date-picker__update-btn" disabled>
<Button className="woocommerce-date-picker__update-btn" isPrimary disabled>
{ __( 'Update', 'woo-dash' ) }
</Button>
) }

View File

@ -2,8 +2,9 @@
/**
* External dependencies
*/
import { Component } from '@wordpress/element';
import { Button, Dropdown } from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Dropdown } from '@wordpress/components';
import { stringify as stringifyQueryObject } from 'qs';
import moment from 'moment';
import PropTypes from 'prop-types';
@ -12,6 +13,7 @@ import PropTypes from 'prop-types';
* Internal dependencies
*/
import './style.scss';
import DropdownButton from 'components/dropdown-button';
import DatePickerContent from './content';
import { getCurrentDates, isoDateFormat } from 'lib/date';
@ -68,16 +70,10 @@ class DatePicker extends Component {
getButtonLabel() {
const queryWithDefaults = this.addQueryDefaults( this.props.query );
const { primary, secondary } = getCurrentDates( queryWithDefaults );
return (
<div className="woocommerce-date-picker__toggle-label">
<p>
{ primary.label } ({ primary.range })
</p>
<p>
vs. { secondary.label } ({ secondary.range })
</p>
</div>
);
return [
`${ primary.label } (${ primary.range })`,
`${ __( 'vs.', 'woo-dash' ) } ${ secondary.label } (${ secondary.range })`,
];
}
isValidSelection( selectedTab ) {
@ -91,33 +87,34 @@ class DatePicker extends Component {
render() {
const { period, compare, after, before } = this.state;
return (
<Dropdown
className="woocommerce-date-picker"
contentClassName="woocommerce-date-picker__content"
position="bottom"
expandOnMobile
renderToggle={ ( { isOpen, onToggle } ) => (
<Button
className="woocommerce-date-picker__toggle"
onClick={ onToggle }
aria-expanded={ isOpen }
>
{ this.getButtonLabel() }
</Button>
) }
renderContent={ ( { onClose } ) => (
<DatePickerContent
period={ period }
compare={ compare }
after={ after }
before={ before }
onSelect={ this.select }
onClose={ onClose }
getUpdatePath={ this.getUpdatePath }
isValidSelection={ this.isValidSelection }
/>
) }
/>
<Fragment>
<p>{ __( 'Date Range', 'woo-dash' ) }:</p>
<Dropdown
className="woocommerce-date-picker"
contentClassName="woocommerce-date-picker__content"
position="bottom"
expandOnMobile
renderToggle={ ( { isOpen, onToggle } ) => (
<DropdownButton
onClick={ onToggle }
isOpen={ isOpen }
labels={ this.getButtonLabel() }
/>
) }
renderContent={ ( { onClose } ) => (
<DatePickerContent
period={ period }
compare={ compare }
after={ after }
before={ before }
onSelect={ this.select }
onClose={ onClose }
getUpdatePath={ this.getUpdatePath }
isValidSelection={ this.isValidSelection }
/>
) }
/>
</Fragment>
);
}
}

View File

@ -1,13 +1,20 @@
/** @format */
.woocommerce-date-picker {
width: 100%;
max-width: 360px;
width: 33.3%;
@include breakpoint( '<1100px' ) {
width: 50%;
}
@include breakpoint( '<782px' ) {
width: 100%;
}
}
.woocommerce-date-picker__content {
.components-popover__content {
width: 360px;
width: 320px;
padding: 1em 0;
border: 1px solid $gray;
background-color: $white;
@ -74,7 +81,7 @@
.woocommerce-date-picker__tab {
outline: none;
border: 1px solid $black;
border: 1px solid $woocommerce;
padding: 10px;
margin: 0;
border-radius: 5px 0 0 5px;
@ -85,7 +92,7 @@
}
&.is-active {
background-color: $black;
background-color: $woocommerce;
color: $white;
}
@ -106,57 +113,9 @@
}
.woocommerce-date-picker__text {
@include font-size( 14 );
font-weight: 200;
@include font-size( 12 );
font-weight: 100;
text-transform: uppercase;
text-align: center;
color: $gray-text;
}
.woocommerce-date-picker__toggle {
background-color: $white;
position: relative;
border: 1px solid $gray;
border-radius: 5px;
padding: 0 40px 0 0;
&::after {
content: '';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #444 transparent transparent transparent;
}
}
.woocommerce-date-picker__toggle-label {
text-align: left;
padding: 2px 7px;
border-right: 1px solid $gray;
p:first-child {
margin: 0 0 3px 0;
@include font-size( 14 );
}
p:last-child {
@include font-size( 12 );
margin: 0;
color: $gray-text;
}
@include breakpoint( '<400px' ) {
p:first-child {
@include font-size( 12 );
}
p:last-child {
@include font-size( 10 );
}
}
color: $core-grey-dark-500;
}

View File

@ -0,0 +1,34 @@
Dropdown Button
====
A button meant for use as the launching button in Gutenberg's `<Dropdown />` component. The button is 100% width of its container and displays single or multiple lines rendered as `<p/>` elments.
## How to use:
```jsx
import { Dropdown } from '@wordpress/components';
import DropdownButton from 'components/dropdown-button';
render: function() {
return (
<Dropdown
renderToggle={ ( { isOpen, onToggle } ) => (
<DropdownButton
onClick={ onToggle }
isOpen={ isOpen }
labels={ [ 'All Products Sold' ] }
/>
) }
renderContent={ () => (
<p>Dropdown content here</p>
) }
/>
);
}
```
## Props
* `labels`: An array of elements to be rendered as the content of the button
* `isOpen`: boolean describing if the dropdown in open or not
* `*`: All other props are passed to Gutenberg's `<Button />` component

View File

@ -0,0 +1,34 @@
/** @format */
/**
* External dependencies
*/
import { Button } from '@wordpress/components';
import PropTypes from 'prop-types';
import classnames from 'classnames';
/**
* Internal dependencies
*/
import './style.scss';
const DropdownButton = props => {
const { labels, isOpen, ...otherProps } = props;
const buttonClasses = classnames( 'woocommerce-dropdown-button', {
'is-open': isOpen,
'is-multi-line': labels.length > 1,
} );
return (
<Button className={ buttonClasses } aria-expanded={ isOpen } { ...otherProps }>
<div className="woocommerce-dropdown-button__labels">
{ labels.map( label => <p>{ label }</p> ) }
</div>
</Button>
);
};
DropdownButton.propTypes = {
labels: PropTypes.array,
isOpen: PropTypes.bool,
};
export default DropdownButton;

View File

@ -0,0 +1,73 @@
/** @format */
.woocommerce-dropdown-button {
background-color: $white;
position: relative;
border: 1px solid $core-grey-light-500;
color: $core-grey-dark-500;
border-radius: 5px;
padding: 0 40px 0 0;
width: 100%;
&::after {
content: '';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: $core-grey-dark-500 transparent transparent transparent;
}
&:hover,
&:active,
&.is-open {
background-color: $core-grey-light-100;
}
&.is-multi-line .woocommerce-dropdown-button__labels {
flex-direction: column;
}
}
.woocommerce-dropdown-button__labels {
text-align: left;
padding: 5px 10px;
min-height: 52px;
display: flex;
align-items: center;
width: 100%;
@include breakpoint( '<400px' ) {
min-height: 46px;
}
p {
width: 100%;
text-align: left;
&:last-child {
@include font-size( 12 );
margin: 0;
}
&:first-child {
margin: 0 0 3px 0;
@include font-size( 14 );
font-weight: 500;
}
@include breakpoint( '<400px' ) {
&:last-child {
@include font-size( 10 );
}
&:first-child {
@include font-size( 12 );
}
}
}
}

View File

@ -2,24 +2,33 @@
.woocommerce-segmented-selection {
width: 100%;
color: $core-grey-dark-500;
}
.woocommerce-segmented-selection__container {
width: 100%;
grid-template-columns: 1fr 1fr;
display: grid;
border-top: 1px solid $gray;
border-bottom: 1px solid $gray;
border-top: 1px solid $core-grey-light-700;
border-bottom: 1px solid $core-grey-light-700;
grid-gap: 1px;
background-color: $gray;
background-color: $core-grey-light-700;
}
.woocommerce-segmented-selection__label {
background-color: $white;
padding: 1em;
background-color: $core-grey-light-100;
padding: 12px 12px 12px 24px;
position: relative;
display: block;
height: 100%;
&:active {
background-color: $core-grey-light-300;
}
&:hover {
background-color: $core-grey-light-200;
}
}
.woocommerce-segmented-selection__input {
@ -27,23 +36,36 @@
position: absolute;
left: -9999px;
&:active + label .woocommerce-segmented-selection__label {
background-color: $core-grey-light-300;
}
&:checked + label .woocommerce-segmented-selection__label {
background-color: $gray-light-10;
padding-left: calc(1em + 20px);
background-color: $white;
&::before {
content: '';
width: 8px;
height: 8px;
background-color: #444;
border-radius: 4px;
background-color: $woocommerce;
position: absolute;
top: 50%;
transform: translate(-20px, -50%);
transform: translate(-16px, -50%);
}
}
&:focus + label .woocommerce-segmented-selection__label {
outline: 1px solid lightseagreen;
/**
Must use outline instead of border here to avoid having the
elements below shift by 2 pixel on focus. This trickery is needed
so that left and right edges can be seen as those borders are actually
part of the parent CSS grid.
*/
outline: 1px solid $black;
width: calc(100% - 1px);
}
&:nth-child(4n + 1):focus + label .woocommerce-segmented-selection__label {
transform: translateX(1px);
}
}

View File

@ -2,16 +2,24 @@
$white: rgba(255, 255, 255, 1);
// Grays
// Grays (deprecated. Use greys below as we move to HiFi designs)
$gray: #ccc;
$gray-darken-10: darken($gray, 10%);
$gray-darken-20: darken($gray, 20%);
$gray-darken-30: darken($gray, 30%);
$gray-darken-40: darken($gray, 40%);
$gray-text: $gray-darken-40;
$gray-light-10: lighten($gray, 10%);
// Greys
$core-grey-light-100: #f8f9f9;
$core-grey-light-200: #f3f4f5;
$core-grey-light-300: #f3f4f5; // same as 200? By accident?
$core-grey-light-500: #e2e4e7;
$core-grey-light-700: #ccd0d4;
//$core-grey-dark-500: #E8EAEB;
$core-grey-dark-500: #3c3d3e; // This seems really light, so I made one up
$wp-admin-background: #f1f1f1;
// Black

File diff suppressed because it is too large Load Diff