Jill(feat) use tertiary button for date and navigation button in date…

… picker (#2397) * use ghost buttons * use variables * replace icon chevron by arrow * wrong tint usage * update test snap * chore(ci): prettier * month pressed style * chore(ci): prettier * remove height * use tertiary button for month-year button in date picker * chore(ci): prettier * chore(ci): update libs security audit * chore(ci): update libs security audit
Talend · Sep 18, 2019 · 563b069 · 563b069
1 parent 15ad774
commit 563b069
Show file tree

Hide file tree

Showing 14 changed files with 77 additions and 70 deletions.
diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.component.js
@@ -108,6 +108,8 @@ class DatePicker extends React.PureComponent {
 											[theme.today]: today,
 										},
 										'tc-date-picker-day',
+										'btn-tertiary',
+										'btn-default',
 									);
 
 									let ariaLabel = format(date, 'dddd DD MMMM YYYY', pickerLocale);

diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.scss b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.scss
@@ -35,7 +35,9 @@
 
 	.calendar-day {
 		&.today {
-			background-color: $concrete;
+			background-color: tint($lochmara, 90%);
+			color: $lochmara;
+			border: solid 1px $lochmara;
 		}
 
 		@include picker-action;

diff --git a/...s/components/src/DateTimePickers/pickers/DatePicker/__snapshots__/DatePicker.test.js.snap b/...s/components/src/DateTimePickers/pickers/DatePicker/__snapshots__/DatePicker.test.js.snap
@@ -144,7 +144,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Friday 01 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -160,7 +160,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Saturday 02 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -176,7 +176,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Sunday 03 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -197,7 +197,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Monday 04 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -213,7 +213,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Tuesday 05 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -229,7 +229,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Wednesday 06 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={true}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -245,7 +245,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Thursday 07 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -261,7 +261,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Friday 08 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -277,7 +277,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Saturday 09 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -293,7 +293,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Sunday 10 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -314,7 +314,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Monday 11 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -331,7 +331,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Tuesday 12 June 2018, selected"
-                className="theme-calendar-day theme-selected tc-date-picker-day"
+                className="theme-calendar-day theme-selected tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -347,7 +347,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Wednesday 13 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -363,7 +363,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Thursday 14 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -379,7 +379,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Friday 15 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={true}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -395,7 +395,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Saturday 16 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -411,7 +411,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Sunday 17 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -432,7 +432,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Monday 18 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -448,7 +448,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Tuesday 19 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -464,7 +464,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Today, Wednesday 20 June 2018"
-                className="theme-calendar-day theme-today tc-date-picker-day"
+                className="theme-calendar-day theme-today tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -480,7 +480,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Thursday 21 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -496,7 +496,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Friday 22 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -512,7 +512,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Saturday 23 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -528,7 +528,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Sunday 24 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -549,7 +549,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Monday 25 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -565,7 +565,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Tuesday 26 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -581,7 +581,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Wednesday 27 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -597,7 +597,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Thursday 28 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -613,7 +613,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Friday 29 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}
@@ -629,7 +629,7 @@ exports[`DatePicker should render a DatePicker 1`] = `
             >
               <button
                 aria-label="Saturday 30 June 2018"
-                className="theme-calendar-day tc-date-picker-day"
+                className="theme-calendar-day tc-date-picker-day btn-tertiary btn-default"
                 disabled={false}
                 onClick={[Function]}
                 onKeyDown={[Function]}

diff --git a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.scss b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.scss
@@ -33,5 +33,8 @@
 	background: transparent;
 	border: none;
 	padding: 0;
-	text-transform: uppercase;
+
+	&:active {
+		background-color: shade($concrete, 10%);
+	}
 }
diff --git a/packages/components/src/DateTimePickers/shared/styles/mixins.scss b/packages/components/src/DateTimePickers/shared/styles/mixins.scss
@@ -8,12 +8,14 @@
 	font-size: 1.2rem;
 
 	&.selected {
-		background-color: $scooter;
+		background-color: $lochmara;
 		color: $white;
+		font-weight: $font-weight-semi-bold;
 	}
 
 	&:disabled {
 		color: $silver-chalice;
+		opacity: 0.54;
 	}
 }
 

diff --git a/packages/components/src/DateTimePickers/views/DateTimeView/DateTimeView.component.js b/packages/components/src/DateTimePickers/views/DateTimeView/DateTimeView.component.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { Action } from '../../../Actions';
 import DatePicker from '../../pickers/DatePicker';
 import TimePicker from '../../pickers/TimePicker';
@@ -87,11 +88,11 @@ class DateTimeView extends React.PureComponent {
 			leftElement: (
 				<Action
 					aria-label={t('DATEPICKER_MONTH_PREVIOUS', { defaultValue: 'Go to previous month' })}
-					icon="talend-chevron-left"
+					icon="talend-arrow-left"
 					label=""
 					onClick={() => this.goToPreviousMonth()}
 					tabIndex="-1"
-					link
+					className={classNames('btn-tertiary', 'btn-info')}
 				/>
 			),
 			middleElement: (
@@ -110,12 +111,12 @@ class DateTimeView extends React.PureComponent {
 			rightElement: (
 				<Action
 					aria-label={t('DATEPICKER_MONTH_NEXT', { defaultValue: 'Go to next month' })}
-					icon="talend-chevron-left"
+					icon="talend-arrow-left"
 					iconTransform="rotate-180"
 					label=""
 					onClick={() => this.goToNextMonth()}
 					tabIndex="-1"
-					link
+					className="btn-tertiary btn-info"
 				/>
 			),
 		};