Card: Improving styling and adding compact Card styling and examples

apps/vr-tests/src/stories/Stack.stories.tsx

@@ -106,7 +106,7 @@ storiesOf('Stack', module)
   ))
   .addStory('Vertical Stack - Gap', () => (
     <Fabric>
-      <Stack {...defaultProps} gap={10} />
+      <Stack {...defaultProps} tokens={{ childrenGap: 10 }} />
     </Fabric>
   ))
   .addStory('Vertical Stack - Vertically centered', () => (
@@ -151,7 +151,7 @@ storiesOf('Stack', module)
   .addStory(
     'Vertical Stack - Item alignments',
     () => (
-      <Stack {...defaultProps} gap={10}>
+      <Stack {...defaultProps} tokens={{ childrenGap: 10 }}>
         <Stack.Item align="auto" className={styles.item}>
           Auto-aligned item
         </Stack.Item>
@@ -175,7 +175,7 @@ storiesOf('Stack', module)
     { rtl: true }
   )
   .addStory('Vertical Stack - Growing items', () => (
-    <Stack {...defaultProps} gap={10} className={styles.fixedHeight}>
+    <Stack {...defaultProps} tokens={{ childrenGap: 10 }} className={styles.fixedHeight}>
       <Stack.Item grow={3} className={styles.item}>
         Grow is 3
       </Stack.Item>
@@ -188,7 +188,7 @@ storiesOf('Stack', module)
     </Stack>
   ))
   .addStory('Vertical Stack - Shrinking items', () => (
-    <Stack {...defaultProps} gap={10} className={styles.fixedHeight}>
+    <Stack {...defaultProps} tokens={{ childrenGap: 10 }} className={styles.fixedHeight}>
       <Stack.Item className={styles.verticalShrinkItem}>1</Stack.Item>
       <Stack.Item disableShrink className={styles.verticalShrinkItem}>
         2 (does not shrink)
@@ -202,7 +202,12 @@ storiesOf('Stack', module)
     'Vertical Stack - Wrap',
     () => (
       <Fabric>
-        <Stack {...defaultProps} gap={'10 0'} wrap className={styles.fixedHeight}>
+        <Stack
+          {...defaultProps}
+          tokens={{ childrenGap: '10 0' }}
+          wrap
+          className={styles.fixedHeight}
+        >
           <span className={styles.boxItem}>1</span>
           <span className={styles.boxItem}>2</span>
           <span className={styles.boxItem}>3</span>
@@ -225,7 +230,7 @@ storiesOf('Stack', module)
   )
   .addStory('Vertical Stack - Box shadow around items', () => (
     <Fabric>
-      <Stack {...defaultProps} gap={25}>
+      <Stack {...defaultProps} tokens={{ childrenGap: 25 }}>
         <span className={styles.shadowItem}>1</span>
         <span className={styles.shadowItem}>2</span>
         <span className={styles.shadowItem}>3</span>
@@ -261,7 +266,7 @@ storiesOf('Stack', module)
     'Horizontal Stack - Gap',
     () => (
       <Fabric>
-        <Stack horizontal {...defaultProps} gap={10} />
+        <Stack horizontal {...defaultProps} tokens={{ childrenGap: 10 }} />
       </Fabric>
     ),
     { rtl: true }
@@ -308,7 +313,12 @@ storiesOf('Stack', module)
   .addStory(
     'Horizontal Stack - Item alignments',
     () => (
-      <Stack horizontal {...defaultProps} gap={10} className={styles.fixedHeight}>
+      <Stack
+        horizontal
+        {...defaultProps}
+        tokens={{ childrenGap: 10 }}
+        className={styles.fixedHeight}
+      >
         <Stack.Item align="auto" className={styles.item}>
           Auto-aligned item
         </Stack.Item>
@@ -332,7 +342,7 @@ storiesOf('Stack', module)
     { rtl: true }
   )
   .addStory('Horizontal Stack - Growing items', () => (
-    <Stack horizontal {...defaultProps} gap={10}>
+    <Stack horizontal {...defaultProps} tokens={{ childrenGap: 10 }}>
       <Stack.Item grow={3} className={styles.item}>
         Grow is 3
       </Stack.Item>
@@ -345,7 +355,7 @@ storiesOf('Stack', module)
     </Stack>
   ))
   .addStory('Horizontal Stack - Shrinking items', () => (
-    <Stack horizontal {...defaultProps} gap={10}>
+    <Stack horizontal {...defaultProps} tokens={{ childrenGap: 10 }}>
       <Stack.Item className={styles.horizontalShrinkItem}>1</Stack.Item>
       <Stack.Item disableShrink className={styles.horizontalShrinkItem}>
         2 (does not shrink)
@@ -361,7 +371,7 @@ storiesOf('Stack', module)
     'Horizontal Stack - Wrap',
     () => (
       <Fabric>
-        <Stack horizontal {...defaultProps} gap={10} wrap>
+        <Stack horizontal {...defaultProps} tokens={{ childrenGap: 10 }} wrap>
           <span className={styles.boxItem}>1</span>
           <span className={styles.boxItem}>2</span>
           <span className={styles.boxItem}>3</span>
@@ -398,7 +408,7 @@ storiesOf('Stack', module)
   )
   .addStory('Horizontal Stack - Wrap with specified vertical gap', () => (
     <Fabric>
-      <Stack horizontal {...defaultProps} wrap gap={'40 10'}>
+      <Stack horizontal {...defaultProps} wrap tokens={{ childrenGap: '40 10' }}>
         <span className={styles.boxItem}>1</span>
         <span className={styles.boxItem}>2</span>
         <span className={styles.boxItem}>3</span>
@@ -433,7 +443,7 @@ storiesOf('Stack', module)
   ))
   .addStory('Horizontal Stack - Box shadow around items', () => (
     <Fabric>
-      <Stack horizontal {...defaultProps} gap={25}>
+      <Stack horizontal {...defaultProps} tokens={{ childrenGap: 25 }}>
         <span className={styles.shadowItem}>1</span>
         <span className={styles.shadowItem}>2</span>
         <span className={styles.shadowItem}>3</span>

common/changes/@uifabric/foundation/cardApi_2019-03-20-21-17.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/foundation",
+      "comment": "Passing styling and tokens to view.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/foundation",
+  "email": "[email protected]"
+}

common/changes/@uifabric/merge-styles/cardApi_2019-03-28-20-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/merge-styles",
+      "comment": "Deleting .api.ts file.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/merge-styles",
+  "email": "[email protected]"
+}

common/changes/@uifabric/react-cards/cardApi_2019-03-08-22-08.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/react-cards",
+      "comment": "Card: Improving styling and adding compact Card styling and examples.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/react-cards",
+  "email": "[email protected]"
+}

common/changes/@uifabric/react-cards/cardApi_2019-03-18-15-59.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Updating examples using Stack to use childrenGap token instead of gap prop.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]"
+}

common/changes/office-ui-fabric-react/cardApi_2019-03-14-18-48.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Stack: Adding margin as a token of StackItem and childrenGap as a token of Stack and updating examples accordingly.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/experiments/src/components/Button/Button.view.tsx

@@ -37,7 +37,7 @@ export const ButtonView: IButtonComponent['view'] = props => {
       {...buttonProps}
       aria-disabled={disabled}
     >
-      <Slots.stack horizontal as="span" gap={8} verticalAlign="center" horizontalAlign="center" verticalFill>
+      <Slots.stack horizontal as="span" tokens={{ childrenGap: 8 }} verticalAlign="center" horizontalAlign="center" verticalFill>
         {icon && <Slots.icon />}
         {content && <Slots.content />}
         {children}

packages/experiments/src/components/Button/MenuButton/examples/MenuButton.Example.tsx

@@ -5,12 +5,20 @@ import { Stack, Text } from 'office-ui-fabric-react';
 const menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];
 const buttonMenu: IMenuButtonProps['menu'] = render => render((MenuType, props) => <MenuType {...props} items={menuItems} />);
 
-const sectionGap = 32;
-const headingGap = 16;
-const buttonGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  buttonStack: {
+    childrenGap: 12
+  }
+};
 
 const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
-  <Stack horizontal disableShrink gap={buttonGap}>
+  <Stack horizontal disableShrink tokens={tokens.buttonStack}>
     {props.children}
   </Stack>
 );
@@ -19,10 +27,10 @@ const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
 export class MenuButtonExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
           <div>
-            <Stack gap={buttonGap}>
+            <Stack tokens={tokens.buttonStack}>
               <ButtonStack>
                 <MenuButton content="Menu button" menu={buttonMenu} />
                 <MenuButton primary content="Menu primary button" menu={buttonMenu} />

packages/experiments/src/components/Button/SplitMenuButton/examples/SplitMenuButton.Example.tsx

@@ -5,16 +5,24 @@ import { Stack } from 'office-ui-fabric-react';
 const menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];
 const buttonMenu: ISplitMenuButtonProps['menu'] = render => render((MenuType, props) => <MenuType {...props} items={menuItems} />);
 
-const sectionGap = 32;
-const headingGap = 16;
-const buttonGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  buttonStack: {
+    childrenGap: 12
+  }
+};
 
 const alertClicked = (): void => {
   alert('Clicked');
 };
 
 const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
-  <Stack horizontal disableShrink gap={buttonGap}>
+  <Stack horizontal disableShrink tokens={tokens.buttonStack}>
     {props.children}
   </Stack>
 );
@@ -23,10 +31,10 @@ const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
 export class SplitMenuButtonExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
           <div>
-            <Stack gap={buttonGap}>
+            <Stack tokens={tokens.buttonStack}>
               <ButtonStack>
                 <SplitMenuButton icon="Add" content="Default split button" menu={buttonMenu} onClick={alertClicked} />
                 <SplitMenuButton disabled icon="Add" content="Disabled split button" menu={buttonMenu} onClick={alertClicked} />

packages/experiments/src/components/Button/examples/Button.Example.tsx

@@ -2,16 +2,24 @@ import * as React from 'react';
 import { Button } from '../index';
 import { Icon, CommandBar, Stack, Text } from 'office-ui-fabric-react';
 
-const sectionGap = 32;
-const headingGap = 16;
-const buttonGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  buttonStack: {
+    childrenGap: 12
+  }
+};
 
 const alertClicked = (): void => {
   alert('Clicked');
 };
 
 const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
-  <Stack horizontal disableShrink gap={buttonGap}>
+  <Stack horizontal disableShrink tokens={tokens.buttonStack}>
     {props.children}
   </Stack>
 );
@@ -20,10 +28,10 @@ const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
 export class ButtonExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
           <div>
-            <Stack gap={buttonGap}>
+            <Stack tokens={tokens.buttonStack}>
               <ButtonStack>
                 <Button content="Default button" onClick={alertClicked} />
                 <Button disabled content="Disabled default button" onClick={alertClicked} />

packages/experiments/src/components/Button/examples/Button.Styles.Example.tsx

@@ -13,15 +13,23 @@ const testTheme = createTheme({
   }
 });
 
-const sectionGap = 32;
-const headingGap = 16;
-const buttonGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  buttonStack: {
+    childrenGap: 12
+  }
+};
 
 const menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];
 const buttonMenu: IMenuButtonProps['menu'] = render => render((MenuType, props) => <MenuType {...props} items={menuItems} />);
 
 const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
-  <Stack horizontal disableShrink gap={buttonGap}>
+  <Stack horizontal disableShrink tokens={tokens.buttonStack}>
     {props.children}
   </Stack>
 );
@@ -32,10 +40,10 @@ export class ButtonStylesExample extends React.Component<{}, {}> {
     const testClassName = mergeStyles({ color: 'blue' });
 
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
           <div>
-            <Stack gap={buttonGap}>
+            <Stack tokens={tokens.buttonStack}>
               <ButtonStack>
                 <Button icon="PeopleAdd" content="Button Theme: Red Icon and Text" theme={testTheme} />
                 <Button icon="PeopleAdd" content={{ children: 'Slot Theme: Purple Text', theme: testTheme }} />