docs(ActivitiesJsonAdapter): split horizontal space equally in adapti…

…ve card example
webex · Mar 7, 2022 · 560cfab · 560cfab
1 parent 3f4e2ca
commit 560cfab
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 86 deletions.
diff --git a/src/adapters/ActivitiesJSONAdapter.test.js b/src/adapters/ActivitiesJSONAdapter.test.js
@@ -248,21 +248,33 @@ describe('Activities JSON Adapter', () => {
             type: 'ColumnSet',
             columns: [
               {
-                type: 'Input.Date',
-                id: 'arrivalDate',
-                height: 'auto',
-                isRequired: true,
-                errorMessage: 'Arrival Date is required',
-                label: 'Arrival Date',
+                type: 'Column',
+                width: 1,
+                items: [
+                  {
+                    type: 'Input.Date',
+                    id: 'arrivalDate',
+                    height: 'auto',
+                    isRequired: true,
+                    errorMessage: 'Arrival Date is required',
+                    label: 'Arrival Date',
+                  },
+                ],
               },
               {
-                type: 'Input.Time',
-                id: 'arrivalTime',
-                label: 'Arrival Time',
-                isRequired: true,
-                min: '10:00',
-                max: '23:59',
-                value: '10:00',
+                type: 'Column',
+                width: 1,
+                items: [
+                  {
+                    type: 'Input.Time',
+                    id: 'arrivalTime',
+                    label: 'Arrival Time',
+                    isRequired: true,
+                    min: '10:00',
+                    max: '23:59',
+                    value: '10:00',
+                  },
+                ],
               },
             ],
           },

diff --git a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
@@ -478,41 +478,58 @@ Array [
             }
           />
           <div
-            className="wxc wxc-label wxc wxc-input-field wxc wxc-date-input wxc wxc-adaptive-cards-input-date wxc wxc-ac wxc-ac-is-visible--true wxc-ac-height--auto"
-            style={Object {}}
+            className="wxc wxc-adaptive-cards-column wxc wxc-ac wxc-ac-is-visible--true wxc-ac-vertical-content-alignment--top wxc-ac-container--vertical"
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
           >
-            <label
-              className="wxc-label__label-text"
-              htmlFor="wxc-0-control"
-              id="wxc-0-label"
-            >
-              <span>
-                Arrival Date
-              </span>
-              <span
-                className="wxc-label__required"
-              >
-                 *
-              </span>
-            </label>
             <div
-              className="wxc-label__control"
+              className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
+              style={
+                Object {
+                  "style": undefined,
+                }
+              }
+            />
+            <div
+              className="wxc wxc-label wxc wxc-input-field wxc wxc-date-input wxc wxc-adaptive-cards-input-date wxc wxc-ac wxc-ac-is-visible--true wxc-ac-height--auto"
+              style={Object {}}
             >
+              <label
+                className="wxc-label__label-text"
+                htmlFor="wxc-0-control"
+                id="wxc-0-label"
+              >
+                <span>
+                  Arrival Date
+                </span>
+                <span
+                  className="wxc-label__required"
+                >
+                   *
+                </span>
+              </label>
               <div
-                className="wxc-input-field__form-control"
+                className="wxc-label__control"
               >
-                <input
-                  aria-labelledby="wxc-0-label"
-                  autoFocus={false}
-                  className="wxc-input-field__input"
-                  disabled={false}
-                  id="wxc-0-control"
-                  onChange={[Function]}
-                  required={true}
-                  tabIndex={0}
-                  type="date"
-                  value=""
-                />
+                <div
+                  className="wxc-input-field__form-control"
+                >
+                  <input
+                    aria-labelledby="wxc-0-label"
+                    autoFocus={false}
+                    className="wxc-input-field__input"
+                    disabled={false}
+                    id="wxc-0-control"
+                    onChange={[Function]}
+                    required={true}
+                    tabIndex={0}
+                    type="date"
+                    value=""
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -525,41 +542,58 @@ Array [
             }
           />
           <div
-            className="wxc wxc-label wxc wxc-input-field wxc wxc-time-input wxc wxc-adaptive-cards-input-time wxc wxc-ac wxc-ac-is-visible--true"
-            style={Object {}}
+            className="wxc wxc-adaptive-cards-column wxc wxc-ac wxc-ac-is-visible--true wxc-ac-vertical-content-alignment--top wxc-ac-container--vertical"
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
           >
-            <label
-              className="wxc-label__label-text"
-              htmlFor="wxc-0-control"
-              id="wxc-0-label"
-            >
-              <span>
-                Arrival Time
-              </span>
-              <span
-                className="wxc-label__required"
-              >
-                 *
-              </span>
-            </label>
             <div
-              className="wxc-label__control"
+              className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
+              style={
+                Object {
+                  "style": undefined,
+                }
+              }
+            />
+            <div
+              className="wxc wxc-label wxc wxc-input-field wxc wxc-time-input wxc wxc-adaptive-cards-input-time wxc wxc-ac wxc-ac-is-visible--true"
+              style={Object {}}
             >
+              <label
+                className="wxc-label__label-text"
+                htmlFor="wxc-0-control"
+                id="wxc-0-label"
+              >
+                <span>
+                  Arrival Time
+                </span>
+                <span
+                  className="wxc-label__required"
+                >
+                   *
+                </span>
+              </label>
               <div
-                className="wxc-input-field__form-control"
+                className="wxc-label__control"
               >
-                <input
-                  aria-labelledby="wxc-0-label"
-                  autoFocus={false}
-                  className="wxc-input-field__input"
-                  disabled={false}
-                  id="wxc-0-control"
-                  onChange={[Function]}
-                  required={true}
-                  tabIndex={0}
-                  type="time"
-                  value="10:00"
-                />
+                <div
+                  className="wxc-input-field__form-control"
+                >
+                  <input
+                    aria-labelledby="wxc-0-label"
+                    autoFocus={false}
+                    className="wxc-input-field__input"
+                    disabled={false}
+                    id="wxc-0-control"
+                    onChange={[Function]}
+                    required={true}
+                    tabIndex={0}
+                    type="time"
+                    value="10:00"
+                  />
+                </div>
               </div>
             </div>
           </div>

diff --git a/src/data/activities.js b/src/data/activities.js
@@ -160,21 +160,33 @@ export default {
               type: 'ColumnSet',
               columns: [
                 {
-                  type: 'Input.Date',
-                  id: 'arrivalDate',
-                  height: 'auto',
-                  isRequired: true,
-                  errorMessage: 'Arrival Date is required',
-                  label: 'Arrival Date',
+                  type: 'Column',
+                  width: 1,
+                  items: [
+                    {
+                      type: 'Input.Date',
+                      id: 'arrivalDate',
+                      height: 'auto',
+                      isRequired: true,
+                      errorMessage: 'Arrival Date is required',
+                      label: 'Arrival Date',
+                    },
+                  ],
                 },
                 {
-                  type: 'Input.Time',
-                  id: 'arrivalTime',
-                  label: 'Arrival Time',
-                  isRequired: true,
-                  min: '10:00',
-                  max: '23:59',
-                  value: '10:00',
+                  type: 'Column',
+                  width: 1,
+                  items: [
+                    {
+                      type: 'Input.Time',
+                      id: 'arrivalTime',
+                      label: 'Arrival Time',
+                      isRequired: true,
+                      min: '10:00',
+                      max: '23:59',
+                      value: '10:00',
+                    },
+                  ],
                 },
               ],
             },