Merge pull request #1992 from Shopify/my-datefield-timefield-docs

update timefield and datefield docs

packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/DateField.doc.ts

@@ -1,4 +1,5 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateCodeBlock} from '../helpers/generateCodeBlock';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'DateField',
@@ -15,6 +16,19 @@ const data: ReferenceEntityTemplateSchema = {
   ],
   category: 'Components',
   related: [],
+  defaultExample: {
+    codeblock: generateCodeBlock('Date input', 'date-field', 'date-input'),
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'guidelines',
+      title: 'Guidelines',
+      sectionContent: `
+- Use a smart default date for common selections.
+      `,
+    },
+  ],
 };
 
 export default data;

packages/ui-extensions/docs/surfaces/point-of-sale/reference/components/TimeField.doc.ts

@@ -1,4 +1,5 @@
 import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+import {generateCodeBlock} from '../helpers/generateCodeBlock';
 
 const data: ReferenceEntityTemplateSchema = {
   name: 'TimeField',
@@ -15,6 +16,19 @@ const data: ReferenceEntityTemplateSchema = {
   ],
   category: 'Components',
   related: [],
+  defaultExample: {
+    codeblock: generateCodeBlock('Time input', 'time-field', 'time-input'),
+  },
+  subSections: [
+    {
+      type: 'Generic',
+      anchorLink: 'guidelines',
+      title: 'Guidelines',
+      sectionContent: `
+- Use a smart default time for common selections.
+      `,
+    },
+  ],
 };
 
 export default data;

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/date-field/date-input.ts

@@ -0,0 +1,46 @@
+import {
+  Navigator,
+  Screen,
+  ScrollView,
+  Text,
+  DateField,
+  extension,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root, api) => {
+  const clearHandler = () => {
+    dateField.updateProps({value: ''});
+    textBox.replaceChildren('');
+  };
+  const dateField = root.createComponent(DateField, {
+    label: 'Select Date',
+    value: '',
+    action: {label: 'Clear', onPress: clearHandler},
+  });
+
+  const textBox = root.createComponent(Text);
+
+  const onChangeHandler = (newValue: string) => {
+    dateField.updateProps({value: newValue});
+
+    const textContent = `Selected Date: ${newValue}`;
+    textBox.replaceChildren(textContent);
+  };
+
+  dateField.updateProps({onChange: onChangeHandler});
+
+  const scrollView = root.createComponent(ScrollView);
+  scrollView.append(dateField);
+  scrollView.append(textBox);
+
+  const screen = root.createComponent(Screen, {
+    name: 'DateField',
+    title: 'Date Field Example',
+  });
+  screen.append(scrollView);
+
+  const navigator = root.createComponent(Navigator);
+  navigator.append(screen);
+
+  root.append(navigator);
+});

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/date-field/date-input.tsx

@@ -0,0 +1,35 @@
+import React, {useState} from 'react';
+import {
+  DateField,
+  Screen,
+  ScrollView,
+  Navigator,
+  Text,
+  reactExtension,
+} from '@shopify/ui-extensions-react/point-of-sale';
+
+const SmartGridModal = () => {
+  const [date, setDate] = useState('');
+  return (
+    <Navigator>
+      <Screen name="DateField" title="DateField Example">
+        <ScrollView>
+          <DateField
+            label="Date"
+            value={date}
+            onChange={setDate}
+            action={{
+              label: 'Clear',
+              onPress: () => setDate(''),
+            }}
+          />
+          <Text>Selected Date: {date}</Text>
+        </ScrollView>
+      </Screen>
+    </Navigator>
+  );
+};
+
+export default reactExtension('pos.home.modal.render', () => (
+  <SmartGridModal />
+));

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/time-field/time-input.ts

@@ -0,0 +1,41 @@
+import {
+  Navigator,
+  Screen,
+  ScrollView,
+  Text,
+  TimeField,
+  extension,
+} from '@shopify/ui-extensions/point-of-sale';
+
+export default extension('pos.home.modal.render', (root, api) => {
+  const timeField = root.createComponent(TimeField, {
+    label: 'Select Time',
+    value: '',
+  });
+
+  const textBox = root.createComponent(Text);
+
+  const onChangeHandler = (newValue: string) => {
+    timeField.updateProps({value: newValue});
+
+    const textContent = `Selected Time: ${newValue}`;
+    textBox.replaceChildren(textContent);
+  };
+
+  timeField.updateProps({onChange: onChangeHandler});
+
+  const scrollView = root.createComponent(ScrollView);
+  scrollView.append(timeField);
+  scrollView.append(textBox);
+
+  const screen = root.createComponent(Screen, {
+    name: 'TimeField',
+    title: 'Time Field Example',
+  });
+  screen.append(scrollView);
+
+  const navigator = root.createComponent(Navigator);
+  navigator.append(screen);
+
+  root.append(navigator);
+});

packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/time-field/time-input.tsx

@@ -0,0 +1,27 @@
+import React, {useState} from 'react';
+import {
+  TimeField,
+  Screen,
+  ScrollView,
+  Navigator,
+  Text,
+  reactExtension,
+} from '@shopify/ui-extensions-react/point-of-sale';
+
+const SmartGridModal = () => {
+  const [time, setTime] = useState('');
+  return (
+    <Navigator>
+      <Screen name="TimeField" title="TimeField Example">
+        <ScrollView>
+          <TimeField label="Time" value={time} onChange={setTime} />
+          <Text>Selected Time: {time}</Text>
+        </ScrollView>
+      </Screen>
+    </Navigator>
+  );
+};
+
+export default reactExtension('pos.home.modal.render', () => (
+  <SmartGridModal />
+));

packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.ts

@@ -14,6 +14,10 @@ export interface TimeFieldProps
     | 'action'
     | 'helpText'
   > {
+  /**
+   * (Android only) Whether the clock displays in 24 hour time instead of 12 hour time.
+   * @defaultValue false
+   */
   is24Hour?: boolean;
 }
 

packages/ui-extensions/src/surfaces/point-of-sale/components/shared/InputField.ts

@@ -87,7 +87,7 @@ export interface InputProps {
    */
   action?: InputAction;
   /**
-   * The maximum number of characters  allowed in the input field.
+   * The maximum number of characters allowed in the input field.
    */
   maxLength?: number;
 }