Merge pull request #2206 from matuzalemsteles/docs-time-picker

chore(next.clayui.com): add TimePicker document

Author: matuzalemsteles

next.clayui.com/content/docs/components/time-picker.mdx

@@ -0,0 +1,23 @@
+---
+title: "Time Picker"
+description: "Time pickers let users select a time for a form."
+packageNpm: "@clayui/time-picker"
+packageVersion: "3.0.0-milestone.1"
+packageStatus: "Beta"
+---
+
+import {TimePickerWithState} from '../../../src/components/clay/TimePicker';
+
+<div class="nav-toc">
+
+- [API](#api)
+
+</div>
+
+<TimePickerWithState />
+
+## API
+
+<div>
+	[APITable "clay-time-picker/src/index.tsx"]
+</div>

next.clayui.com/package.json

@@ -34,6 +34,7 @@
     "@clayui/radio-group": "^3.0.0-milestone.1",
     "@clayui/select": "^3.0.0-milestone.1",
     "@clayui/sticker": "^3.0.0-milestone.1",
+    "@clayui/time-picker": "^3.0.0-milestone.1",
     "@mdx-js/mdx": "^1.0.20",
     "@mdx-js/react": "^1.0.20",
     "@mdx-js/tag": "^0.20.3",

next.clayui.com/src/components/clay/TimePicker.js

@@ -0,0 +1,36 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import ClayTimePicker from '@clayui/time-picker';
+import Editor from './Editor';
+import React, {useState} from 'react';
+
+const spritemap = '/images/icons/icons.svg';
+
+const timePickerCode = `const Component = () => {
+	const [state, setState] = useState({
+		hours: '--',
+		minutes: '--',
+	});
+
+	return (
+		<ClayTimePicker
+			spritemap={spritemap}
+			onInputChange={setState}
+			values={state}
+			timezone="GMT+01:00"
+			use12Hours
+		/>
+	);
+}
+
+render(<Component />)`;
+
+const TimePickerWithState = () => {
+	const scope = {ClayTimePicker, spritemap, useState};
+	return <Editor code={timePickerCode} scope={scope} />;
+};
+export {TimePickerWithState};

next.clayui.com/static/css/atlas.css

@@ -10392,6 +10392,11 @@ label {
     box-shadow: 0 0 0 0.125rem #FFF, 0 0 0 0.25rem #80acff;
     color: #272833;
     outline: 0; }
+  .form-control.disabled {
+    background-color: #F1F2F5;
+    border-color: #F1F2F5;
+    color: #A7A9BC;
+    cursor: not-allowed; }
   .form-control[type="range"] {
     background-color: transparent;
     border-color: transparent; }
@@ -10510,6 +10515,11 @@ div.form-control-sm {
   padding: 0; }
   .form-control-inset:focus {
     outline: 0; }
+  .form-control-inset:disabled {
+    background-color: #F1F2F5;
+    border-color: #F1F2F5;
+    color: #A7A9BC;
+    cursor: not-allowed; }
 
 .form-control[multiple],
 .form-control[size] {
@@ -11184,6 +11194,95 @@ label.custom-control-label {
   .custom-control-inline + .custom-control-inline {
     margin-left: 1rem; }
 
+.clay-time .btn {
+  align-items: center;
+  color: #6B6C7E;
+  display: inline-flex;
+  font-size: 0.75rem;
+  height: 1.5rem;
+  justify-content: center;
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  width: 1.5rem; }
+  .clay-time .btn:focus, .clay-time .btn.focus {
+    box-shadow: 0 0 0 1px #80ACFF; }
+  .clay-time .btn:not([disabled]):not(.disabled):active:focus, .clay-time .btn:not([disabled]):not(.disabled).active:focus,
+  .show > .clay-time .btn.dropdown-toggle:focus {
+    box-shadow: 0 0 0 1px #80ACFF; }
+  .clay-time .btn .lexicon-icon {
+    margin-top: 0; }
+
+.clay-time .form-control {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  padding-bottom: 0.125rem;
+  padding-top: 0.125rem; }
+
+.clay-time .form-control-inset {
+  text-align: center;
+  width: 1.25rem; }
+
+.clay-time .input-group-text {
+  background-color: transparent;
+  border-color: transparent;
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0; }
+
+.clay-time .clay-time-ampm {
+  font-weight: 500;
+  text-transform: uppercase;
+  width: 1.5rem; }
+
+.clay-time-divider {
+  margin-left: -3px;
+  margin-right: -3px; }
+
+.clay-time-edit {
+  margin-right: auto;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem; }
+  .clay-time-edit:first-child {
+    margin-left: -0.5rem; }
+  .clay-time-edit:last-child {
+    margin-right: -0.5rem; }
+
+.clay-time-action-group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -0.125rem;
+  margin-right: -0.125rem; }
+
+.clay-time-action-group-item {
+  align-items: center;
+  display: flex;
+  margin-left: 0.125rem;
+  margin-right: 0.125rem; }
+
+.clay-time-inner-spin {
+  border-color: #cdced9;
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 1px; }
+  .clay-time-inner-spin .btn {
+    align-items: center;
+    border-radius: 8px;
+    border-width: 0;
+    display: inline-flex;
+    font-size: 8px;
+    height: auto;
+    justify-content: center;
+    padding-bottom: 2px;
+    padding-left: 2px;
+    padding-right: 2px;
+    padding-top: 2px;
+    width: auto; }
+
 .date-picker .input-group-text {
   background-color: transparent;
   border-color: transparent;
@@ -11380,8 +11479,8 @@ label.custom-control-label {
   word-wrap: break-word; }
 
 .form-feedback-indicator {
-  margin-left: 0.3125rem;
-  margin-right: 0.3125rem; }
+  margin-left: 0;
+  margin-right: 0; }
   .form-feedback-indicator:first-child {
     margin-left: 0; }
 
@@ -14824,6 +14923,9 @@ a.collapse-icon {
   @media (max-width: 1279.98px) {
     .management-bar.navbar-expand-xl.navbar-collapse-absolute .navbar-collapse {
       border-color: transparent; } }
+  .management-bar.navbar-nowrap .navbar-text {
+    white-space: normal;
+    word-wrap: break-word; }
 
 .management-bar-light {
   background-color: #FFF;

next.clayui.com/static/css/atlas.css.map

@@ -134,7 +134,7 @@ const ClayTimePicker: React.FunctionComponent<IProps> = ({
 		minutes: DEFAULT_VALUE,
 	},
 	onInputChange = () => {},
-}) => {
+}: IProps) => {
 	const useConfig: Config = config[use12Hours ? 'use12Hours' : 'use24Hours'];
 	const [actionVisible, setActionVisible] = useState(false);
 	const [isFocused, setIsFocused] = useState();