Merge pull request woocommerce/woocommerce-admin#139 from woocommerce/add/datepicker-styles

Datepicker: Add Styles

plugins/woocommerce-admin/client/analytics/index.js

@@ -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>
 		);
 	}

plugins/woocommerce-admin/client/components/date-picker/content.js

@@ -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>
 								) }

plugins/woocommerce-admin/client/components/date-picker/index.js

@@ -2,8 +2,9 @@
 /**
  * External dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
-import { Button, Dropdown } from '@wordpress/components';
+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 (
+		return [
-			<div className="woocommerce-date-picker__toggle-label">
+			`${ primary.label } (${ primary.range })`,
-				<p>
+			`${ __( 'vs.', 'woo-dash' ) } ${ secondary.label } (${ secondary.range })`,
-					{ primary.label } ({ primary.range })
+		];
-				</p>
-				<p>
-					vs. { secondary.label } ({ secondary.range })
-				</p>
-			</div>
-		);
 	}
 
 	isValidSelection( selectedTab ) {
@@ -91,19 +87,19 @@ class DatePicker extends Component {
 	render() {
 		const { period, compare, after, before } = this.state;
 		return (
+			<Fragment>
+				<p>{ __( 'Date Range', 'woo-dash' ) }:</p>
 				<Dropdown
 					className="woocommerce-date-picker"
 					contentClassName="woocommerce-date-picker__content"
 					position="bottom"
 					expandOnMobile
 					renderToggle={ ( { isOpen, onToggle } ) => (
-					<Button
+						<DropdownButton
-						className="woocommerce-date-picker__toggle"
 							onClick={ onToggle }
-						aria-expanded={ isOpen }
+							isOpen={ isOpen }
-					>
+							labels={ this.getButtonLabel() }
-						{ this.getButtonLabel() }
+						/>
-					</Button>
 					) }
 					renderContent={ ( { onClose } ) => (
 						<DatePickerContent
@@ -118,6 +114,7 @@ class DatePicker extends Component {
 						/>
 					) }
 				/>
+			</Fragment>
 		);
 	}
 }

plugins/woocommerce-admin/client/components/date-picker/style.scss

@@ -1,13 +1,20 @@
 /** @format */
 
 .woocommerce-date-picker {
+	width: 33.3%;
+
+	@include breakpoint( '<1100px' ) {
+		width: 50%;
+	}
+
+	@include breakpoint( '<782px' ) {
 		width: 100%;
-	max-width: 360px;
+	}
 }
 
 .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 );
+	@include font-size( 12 );
-	font-weight: 200;
+	font-weight: 100;
 	text-transform: uppercase;
 	text-align: center;
-	color: $gray-text;
+	color: $core-grey-dark-500;
-}
-
-.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 );
-		}
-	}
 }

plugins/woocommerce-admin/client/components/dropdown-button/README.md

@@ -0,0 +1,34 @@
+Dropdown Button
+====
+
+A button useful for a launcher of a dropdown component. The button is 100% width of its container and displays single or multiple lines rendered as `<span/>` 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

plugins/woocommerce-admin/client/components/dropdown-button/index.js

@@ -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 => <span>{ label }</span> ) }
+			</div>
+		</Button>
+	);
+};
+
+DropdownButton.propTypes = {
+	labels: PropTypes.array,
+	isOpen: PropTypes.bool,
+};
+
+export default DropdownButton;

plugins/woocommerce-admin/client/components/dropdown-button/style.scss

@@ -0,0 +1,74 @@
+/** @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%;
+	justify-content: space-around;
+
+	@include breakpoint( '<400px' ) {
+		min-height: 46px;
+	}
+
+	span {
+		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 );
+			}
+		}
+	}
+}

plugins/woocommerce-admin/client/components/segmented-selection/style.scss

@@ -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-top: 1px solid $core-grey-light-700;
-	border-bottom: 1px solid $gray;
+	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;
+	background-color: $core-grey-light-100;
-	padding: 1em;
+	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;
+		background-color: $white;
-		padding-left: calc(1em + 20px);
 
 		&::before {
 			content: '';
 			width: 8px;
 			height: 8px;
-			background-color: #444;
+			background-color: $woocommerce;
-			border-radius: 4px;
 			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);
 	}
 }

plugins/woocommerce-admin/client/stylesheets/_colors.scss

@@ -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