tokens

microsoft · Mar 29, 2019 · e947e2e · e947e2e
1 parent 00edd67
commit e947e2e
Show file tree

Hide file tree

Showing 9 changed files with 81 additions and 75 deletions.
diff --git a/...ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx b/...ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
@@ -34,8 +34,8 @@ export class FocusTrapZoneBoxClickExample extends React.Component<{}, IFocusTrap
 
     return (
       <Stack
-        gap={15}
         horizontalAlign="start"
+        tokens={{ childrenGap: 15 }}
         styles={{
           root: { border: `2px dashed ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
         }}

diff --git a/...ffice-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx b/...ffice-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
@@ -35,8 +35,8 @@ export class FocusTrapZoneBoxExample extends React.Component<{}, IFocusTrapZoneB
 
     return (
       <Stack
-        gap={15}
         horizontalAlign="start"
+        tokens={{ childrenGap: 15 }}
         styles={{
           root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
         }}

diff --git a/.../src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx b/.../src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx
@@ -36,8 +36,8 @@ export class FocusTrapZoneBoxCustomElementExample extends React.Component<{}, IF
 
     return (
       <Stack
-        gap={15}
         horizontalAlign="start"
+        tokens={{ childrenGap: 15 }}
         styles={{
           root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
         }}

diff --git a/...ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx b/...ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx
@@ -4,7 +4,7 @@ import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
 
 export interface IFocusTrapZoneFocusZoneExampleState {
   useTrapZone: boolean;
@@ -36,9 +36,10 @@ export class FocusTrapZoneFocusZoneExample extends React.Component<{}, IFocusTra
     const padding = 10;
     const border = '2px dashed #ababab';
     const rootBorder = `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`;
+    const tokens: IStackTokens = { childrenGap: 10 };
 
     return (
-      <Stack gap={15} horizontalAlign="start" styles={{ root: { border: rootBorder, padding } }}>
+      <Stack tokens={tokens} horizontalAlign="start" styles={{ root: { border: rootBorder, padding } }}>
         <Toggle
           label="Use trap zone"
           componentRef={this._toggle}
@@ -49,7 +50,7 @@ export class FocusTrapZoneFocusZoneExample extends React.Component<{}, IFocusTra
         />
 
         <FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
-          <Stack horizontal gap={10} styles={{ root: { border, padding } }}>
+          <Stack horizontal tokens={tokens} styles={{ root: { border, padding } }}>
             <DefaultButton text="FZ1" />
             <DefaultButton text="FZ1" />
             <DefaultButton text="FZ1" />
@@ -59,7 +60,7 @@ export class FocusTrapZoneFocusZoneExample extends React.Component<{}, IFocusTra
         <DefaultButton text="No FZ" />
 
         <FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
-          <Stack horizontal gap={10} styles={{ root: { border, padding } }}>
+          <Stack horizontal tokens={tokens} styles={{ root: { border, padding } }}>
             <DefaultButton text="FZ2" />
             <DefaultButton text="FZ2" />
             <DefaultButton text="FZ2" />

diff --git a/...ce-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx b/...ce-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx
@@ -16,9 +16,9 @@ class FocusTrapComponent extends React.Component<IFocusTrapComponentProps> {
     const { isActive, zoneNumber, children } = this.props;
     const contents = (
       <Stack
-        gap={10}
         horizontal={zoneNumber === 2}
         horizontalAlign="start"
+        tokens={{ childrenGap: 10 }}
         styles={{
           root: { border: `2px solid ${isActive ? '#ababab' : 'transparent'}`, padding: 10 }
         }}

diff --git a/...i-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx b/...i-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
@@ -34,8 +33,8 @@ export class FocusTrapZoneNoTabbableExample extends React.Component<{}, IFocusTr
 
     return (
       <Stack
-        gap={15}
         horizontalAlign="start"
+        tokens={{ childrenGap: 15 }}
         styles={{
           root: { border: `2px solid ${useTrapZone ? '#ababab' : 'transparent'}`, padding: 10 }
         }}

diff --git a/...s/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx b/...s/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx
@@ -5,25 +5,28 @@ import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZ
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
-export const FocusZoneDisabledExample: React.StatelessComponent = () => (
-  <Stack gap={20} horizontalAlign="start">
-    <FocusZone direction={FocusZoneDirection.horizontal}>
-      <Stack gap={20} horizontal>
-        <span>Enabled FocusZone: </span>
-        <DefaultButton>Button 1</DefaultButton>
-        <DefaultButton>Button 2</DefaultButton>
-        <TextField value="FocusZone TextField" styles={{ root: { width: 200 } }} />
-        <DefaultButton>Button 3</DefaultButton>
-      </Stack>
-    </FocusZone>
-    <DefaultButton>Tabbable Element 1</DefaultButton>
-    <FocusZone disabled={true}>
-      <Stack gap={20} horizontal>
-        <span>Disabled FocusZone: </span>
-        <DefaultButton>Button 1</DefaultButton>
-        <DefaultButton>Button 2</DefaultButton>
-      </Stack>
-    </FocusZone>
-    <TextField value="Tabbable Element 2" />
-  </Stack>
-);
+export const FocusZoneDisabledExample: React.StatelessComponent = () => {
+  const tokens = { childrenGap: 20 };
+  return (
+    <Stack tokens={tokens} horizontalAlign="start">
+      <FocusZone direction={FocusZoneDirection.horizontal}>
+        <Stack tokens={tokens} horizontal>
+          <span>Enabled FocusZone: </span>
+          <DefaultButton>Button 1</DefaultButton>
+          <DefaultButton>Button 2</DefaultButton>
+          <TextField value="FocusZone TextField" styles={{ root: { width: 200 } }} />
+          <DefaultButton>Button 3</DefaultButton>
+        </Stack>
+      </FocusZone>
+      <DefaultButton>Tabbable Element 1</DefaultButton>
+      <FocusZone disabled={true}>
+        <Stack tokens={tokens} horizontal>
+          <span>Disabled FocusZone: </span>
+          <DefaultButton>Button 1</DefaultButton>
+          <DefaultButton>Button 2</DefaultButton>
+        </Stack>
+      </FocusZone>
+      <TextField value="Tabbable Element 2" />
+    </Stack>
+  );
+};
diff --git a/...s/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx b/...s/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx
@@ -8,45 +8,48 @@ const alertClicked = (): void => {
   alert('Clicked');
 };
 
-export const FocusZoneTabbableExample: React.StatelessComponent = () => (
-  <Stack gap={20} horizontalAlign="start">
-    <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.all} isCircularNavigation={true}>
-      <Stack gap={20} horizontal>
-        <span>Circular Tabbable FocusZone: </span>
-        <DefaultButton>Button 1</DefaultButton>
-        <DefaultButton>Button 2</DefaultButton>
-        <TextField value="FocusZone TextField" styles={{ root: { width: 200 } }} />
-        <DefaultButton>Button 3</DefaultButton>
-        <DefaultButton
-          text="Create account"
-          split={true}
-          onClick={alertClicked}
-          splitButtonAriaLabel="See 2 sample options"
-          menuProps={{
-            items: [
-              {
-                key: 'emailMessage',
-                text: 'Email message',
-                iconProps: { iconName: 'Mail' }
-              },
-              {
-                key: 'calendarEvent',
-                text: 'Calendar event',
-                iconProps: { iconName: 'Calendar' }
-              }
-            ]
-          }}
-        />
-      </Stack>
-    </FocusZone>
-    <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.inputOnly} isCircularNavigation={false}>
-      <Stack gap={20} horizontal>
-        <span>Input Only FocusZone: </span>
-        <DefaultButton>Button 1</DefaultButton>
-        <DefaultButton>Button 2</DefaultButton>
-        <TextField value="FocusZone TextField" styles={{ root: { width: 200 } }} />
-        <DefaultButton>Button 3</DefaultButton>
-      </Stack>
-    </FocusZone>
-  </Stack>
-);
+export const FocusZoneTabbableExample: React.StatelessComponent = () => {
+  const tokens = { childrenGap: 20 };
+  return (
+    <Stack tokens={tokens} horizontalAlign="start">
+      <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.all} isCircularNavigation={true}>
+        <Stack tokens={tokens} horizontal>
+          <span>Circular Tabbable FocusZone: </span>
+          <DefaultButton>Button 1</DefaultButton>
+          <DefaultButton>Button 2</DefaultButton>
+          <TextField value="FocusZone TextField" styles={{ root: { width: 200 } }} />
+          <DefaultButton>Button 3</DefaultButton>
+          <DefaultButton
+            text="Create account"
+            split={true}
+            onClick={alertClicked}
+            splitButtonAriaLabel="See 2 sample options"
+            menuProps={{
+              items: [
+                {
+                  key: 'emailMessage',
+                  text: 'Email message',
+                  iconProps: { iconName: 'Mail' }
+                },
+                {
+                  key: 'calendarEvent',
+                  text: 'Calendar event',
+                  iconProps: { iconName: 'Calendar' }
+                }
+              ]
+            }}
+          />
+        </Stack>
+      </FocusZone>
+      <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.inputOnly} isCircularNavigation={false}>
+        <Stack tokens={tokens} horizontal>
+          <span>Input Only FocusZone: </span>
+          <DefaultButton>Button 1</DefaultButton>
+          <DefaultButton>Button 2</DefaultButton>
+          <TextField value="FocusZone TextField" styles={{ root: { width: 200 } }} />
+          <DefaultButton>Button 3</DefaultButton>
+        </Stack>
+      </FocusZone>
+    </Stack>
+  );
+};
diff --git a/...ice-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.FocusZone.Example.tsx.shot b/...ice-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.FocusZone.Example.tsx.shot
@@ -23,7 +23,7 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl
           text-overflow: ellipsis;
         }
         & > *:not(:first-child) {
-          margin-top: 15px;
+          margin-top: 10px;
         }
         & > *:not(.ms-StackItem) {
           flex-shrink: 1;