Card: Improving CardItem and adding CardSection to allow Card children to fill the Card's margins

common/changes/@uifabric/react-cards/fabric7_2019-04-23-01-24.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/react-cards",
+      "comment": "Card: Improving CardItem and adding CardSection to allow Card children to fill the Card's margins.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/react-cards",
+  "email": "[email protected]"
+}

common/changes/office-ui-fabric-react/fabric7_2019-04-23-01-24.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Stack: Adding relevant Stack and StackItem tokens.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/experiments/src/components/Button/MenuButton/MenuButton.test.tsx

@@ -42,7 +42,7 @@ describe('MenuButton view', () => {
   it('renders a multiline MenuButton correctly', () => {
     const component = renderer.create(
       <MenuButton icon="Share" menu={menuProps}>
-        <Stack padding="8px 0" as="span" horizontalAlign="start">
+        <Stack as="span" horizontalAlign="start" tokens={{ padding: '8px 0' }}>
           <Text>I am a compound multiline button.</Text>
           <Text variant="small">I can have a caption.</Text>
         </Stack>

packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md

@@ -6625,20 +6625,24 @@ export type IStackItemTokenReturnType = ReturnType<Extract<IStackItemComponent['
 
 // @public (undocumented)
 export interface IStackItemTokens {
-    // (undocumented)
     margin?: number | string;
+    padding?: number | string;
 }
 
 // @public (undocumented)
 export interface IStackProps extends IStackSlots, IStyleableComponentProps<IStackProps, IStackTokens, IStackStyles>, React_2.HTMLAttributes<HTMLElement> {
     as?: React_2.ReactType<React_2.HTMLAttributes<HTMLElement>>;
     disableShrink?: boolean;
+    // @deprecated
     gap?: number | string;
     grow?: boolean | number | 'inherit' | 'initial' | 'unset';
     horizontal?: boolean;
     horizontalAlign?: Alignment;
+    // @deprecated
     maxHeight?: number | string;
+    // @deprecated
     maxWidth?: number | string;
+    // @deprecated
     padding?: number | string;
     reversed?: boolean;
     verticalAlign?: Alignment;
@@ -6667,6 +6671,9 @@ export type IStackTokenReturnType = ReturnType<Extract<IStackComponent['tokens']
 // @public (undocumented)
 export interface IStackTokens {
     childrenGap?: number | string;
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    padding?: number | string;
 }
 
 // @public (undocumented)

packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx

@@ -9,7 +9,7 @@ import {
   DocumentCardType,
   IDocumentCardActivityPerson
 } from 'office-ui-fabric-react/lib/DocumentCard';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
 import { getTheme } from 'office-ui-fabric-react/lib/Styling';
 import { TestImages } from '../../../common/TestImages';
 
@@ -96,8 +96,10 @@ export class DocumentCardCompactExample extends React.PureComponent {
       }
     };
 
+    const stackTokens: IStackTokens = { childrenGap: 20 };
+
     return (
-      <Stack gap={20}>
+      <Stack tokens={stackTokens}>
         {/* Document preview */}
         <DocumentCard type={DocumentCardType.compact} onClickHref="http://bing.com">
           <DocumentCardPreview previewImages={[previewProps.previewImages[0]]} />

packages/office-ui-fabric-react/src/components/Separator/examples/Separator.Basic.Example.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { Separator } from 'office-ui-fabric-react/lib/Separator';
 import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
 import { Text } from 'office-ui-fabric-react/lib/Text';
 
+const stackTokens: IStackTokens = { childrenGap: 12 };
+
 const HorizontalSeparatorStack = (props: { children: JSX.Element[] }) => (
   <>
     {React.Children.map(props.children, child => {
-      return <Stack gap={12}>{child}</Stack>;
+      return <Stack tokens={stackTokens}>{child}</Stack>;
     })}
   </>
 );
@@ -16,7 +18,7 @@ const VerticalSeparatorStack = (props: { children: JSX.Element[] }) => (
   <Stack horizontal horizontalAlign="space-evenly">
     {React.Children.map(props.children, child => {
       return (
-        <Stack gap={12} horizontalAlign="center">
+        <Stack horizontalAlign="center" tokens={stackTokens}>
           {child}
         </Stack>
       );
@@ -33,7 +35,7 @@ export class SeparatorBasicExample extends React.Component<{}, {}> {
     const content = 'Today';
 
     return (
-      <Stack gap={12}>
+      <Stack tokens={stackTokens}>
         <HorizontalSeparatorStack>
           <>
             <Text>Horizontal center aligned</Text>

packages/office-ui-fabric-react/src/components/Separator/examples/Separator.Icon.Example.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Separator } from 'office-ui-fabric-react/lib/Separator';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
 import { Text } from 'office-ui-fabric-react/lib/Text';
 import { Icon, IIconStyles } from 'office-ui-fabric-react/lib/Icon';
 
@@ -12,10 +12,12 @@ const iconStyles: IIconStyles = {
   }
 };
 
+const stackTokens: IStackTokens = { childrenGap: 12 };
+
 export class SeparatorIconExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <Stack gap={12}>
+      <Stack tokens={stackTokens}>
         <Text>Horizontal center aligned with an icon as content</Text>
         <Separator>
           <Icon iconName="Clock" styles={iconStyles} />

packages/office-ui-fabric-react/src/components/Separator/examples/Separator.Theming.Example.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Separator } from 'office-ui-fabric-react/lib/Separator';
 import { createTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
 import { Text } from 'office-ui-fabric-react/lib/Text';
 
 const theme: ITheme = createTheme({
@@ -13,12 +13,14 @@ const theme: ITheme = createTheme({
   }
 });
 
+const stackTokens: IStackTokens = { childrenGap: 12 };
+
 export class SeparatorThemingExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     const content = 'Today';
 
     return (
-      <Stack gap={12}>
+      <Stack tokens={stackTokens}>
         <Text>Horizontal center aligned with custom theme</Text>
         <Separator theme={theme}>{content}</Separator>
       </Stack>

packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Labeled.Example.tsx

@@ -4,10 +4,13 @@ import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export const SpinnerLabeledExample: React.StatelessComponent = () => {
-  const stackTokens: IStackTokens = { childrenGap: 20 };
+  const stackTokens: IStackTokens = {
+    childrenGap: 20,
+    maxWidth: 250
+  };
 
   return (
-    <Stack tokens={stackTokens} maxWidth={250}>
+    <Stack tokens={stackTokens}>
       <div>
         <Label>Spinner with label positioned below</Label>
         <Spinner label="I am definitely loading..." />

packages/office-ui-fabric-react/src/components/Stack/Stack.styles.ts

@@ -13,25 +13,15 @@ const GlobalClassNames = {
 };
 
 export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackStylesReturnType => {
-  const {
-    verticalFill,
-    maxWidth,
-    maxHeight,
-    horizontal,
-    reversed,
-    gap,
-    grow,
-    wrap,
-    padding,
-    horizontalAlign,
-    verticalAlign,
-    disableShrink,
-    className
-  } = props;
+  const { verticalFill, horizontal, reversed, gap, grow, wrap, horizontalAlign, verticalAlign, disableShrink, className } = props;
 
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
   const childrenGap = tokens && tokens.childrenGap ? tokens.childrenGap : gap;
+  const maxHeight = tokens && tokens.maxHeight ? tokens.maxHeight : props.maxHeight;
+  const maxWidth = tokens && tokens.maxWidth ? tokens.maxWidth : props.maxWidth;
+  const padding = tokens && tokens.padding ? tokens.padding : props.padding;
+
   const { rowGap, columnGap } = parseGap(childrenGap, theme);
 
   const horizontalMargin = `${-0.5 * columnGap.value}${columnGap.unit}`;

packages/office-ui-fabric-react/src/components/Stack/Stack.tsx

@@ -1,17 +1,24 @@
 /** @jsx withSlots */
 import * as React from 'react';
 import { withSlots, createComponent, getSlots } from '../../Foundation';
+import { getNativeProps, htmlElementProperties, warnDeprecations } from '../../Utilities';
 import StackItem from './StackItem/StackItem';
 import { IStackItemProps } from './StackItem/StackItem.types';
-import { IStackComponent, IStackProps, IStackSlots } from './Stack.types';
 import { styles } from './Stack.styles';
-import { getNativeProps, htmlElementProperties } from '../../Utilities';
+import { IStackComponent, IStackProps, IStackSlots } from './Stack.types';
 
 const StackItemType = (<StackItem /> as React.ReactElement<IStackItemProps>).type;
 
 const view: IStackComponent['view'] = props => {
   const { as: RootType = 'div', disableShrink, wrap, ...rest } = props;
 
+  warnDeprecations('Stack', props, {
+    gap: 'tokens.childrenGap',
+    maxHeight: 'tokens.maxHeight',
+    maxWidth: 'tokens.maxWidth',
+    padding: 'tokens.padding'
+  });
+
   const stackChildren: (React.ReactChild | null)[] = React.Children.map(
     props.children,
     (child: React.ReactElement<IStackItemProps>, index: number) => {

packages/office-ui-fabric-react/src/components/Stack/Stack.types.ts

@@ -105,21 +105,25 @@ export interface IStackProps
    * Defines the spacing between Stack children.
    * The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
    * If 'column gap' is omitted, it's set to the same value as 'row gap'.
+   * @deprecated Use 'childrenGap' token instead.
    */
   gap?: number | string;
 
   /**
    * Defines the maximum width that the Stack can take.
+   * @deprecated Use 'maxWidth' token instead.
    */
   maxWidth?: number | string;
 
   /**
    * Defines the maximum height that the Stack can take.
+   * @deprecated Use 'maxHeight' token instead.
    */
   maxHeight?: number | string;
 
   /**
    * Defines the inner padding of the Stack.
+   * @deprecated Use 'padding' token instead.
    */
   padding?: number | string;
 
@@ -141,6 +145,21 @@ export interface IStackTokens {
    * If 'column gap' is omitted, it's set to the same value as 'row gap'.
    */
   childrenGap?: number | string;
+
+  /**
+   * Defines a maximum height for the Stack.
+   */
+  maxHeight?: number | string;
+
+  /**
+   * Defines a maximum width for the Stack.
+   */
+  maxWidth?: number | string;
+
+  /**
+   * Defines the padding to be applied to the Stack contents relative to its border.
+   */
+  padding?: number | string;
 }
 
 /**

packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.types.ts

@@ -74,7 +74,15 @@ export interface IStackItemProps extends IStackItemSlots, IStyleableComponentPro
  * {@docCategory Stack}
  */
 export interface IStackItemTokens {
+  /**
+   * Defines the margin to be applied to the StackItem relative to its container.
+   */
   margin?: number | string;
+
+  /**
+   * Defines the padding to be applied to the StackItem contents relative to its border.
+   */
+  padding?: number | string;
 }
 
 /**

packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Basic.Example.tsx

@@ -22,6 +22,9 @@ export class HorizontalStackBasicExample extends React.Component<{}, {}> {
       },
       tenGapStack: {
         childrenGap: 10
+      },
+      tenPaddingStack: {
+        padding: 10
       }
     };
 
@@ -48,7 +51,7 @@ export class HorizontalStackBasicExample extends React.Component<{}, {}> {
         </Stack>
 
         <span>Horizontal gap between items</span>
-        <Stack horizontal disableShrink tokens={tokens.tenGapStack} padding={10} className={styles.root}>
+        <Stack horizontal disableShrink className={styles.root} tokens={{ ...tokens.tenGapStack, ...tokens.tenPaddingStack }}>
           <span>Item One</span>
           <span>Item Two</span>
           <span>Item Three</span>
@@ -58,8 +61,7 @@ export class HorizontalStackBasicExample extends React.Component<{}, {}> {
         <Stack
           horizontal
           disableShrink
-          tokens={tokens.fiveGapStack}
-          padding={10}
+          tokens={{ ...tokens.fiveGapStack, ...tokens.tenPaddingStack }}
           className={styles.root}
           styles={{ root: { height: 100 } }}
         >
@@ -84,7 +86,7 @@ export class HorizontalStackBasicExample extends React.Component<{}, {}> {
         </Stack>
 
         <span>Clickable stack</span>
-        <Stack horizontal disableShrink onClick={this._onClick} padding={10} className={styles.root}>
+        <Stack horizontal disableShrink onClick={this._onClick} className={styles.root} tokens={tokens.tenPaddingStack}>
           <span>Click inside this box</span>
         </Stack>
       </Stack>

packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Configure.Example.tsx

@@ -260,8 +260,10 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
           horizontal
           wrap={wrap}
           disableShrink={disableShrink}
-          tokens={{ childrenGap: rowGap + ' ' + columnGap }}
-          padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
+          tokens={{
+            childrenGap: rowGap + ' ' + columnGap,
+            padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`
+          }}
           horizontalAlign={horizontalAlignment}
           verticalAlign={verticalAlignment}
           className={styles.root}

packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Grow.Example.tsx

@@ -20,10 +20,13 @@ export class HorizontalStackGrowExample extends React.Component<{}, {}> {
       }
     });
 
-    const stackTokens: IStackTokens = { childrenGap: 5 };
+    const stackTokens: IStackTokens = {
+      childrenGap: 5,
+      padding: 10
+    };
 
     return (
-      <Stack horizontal tokens={stackTokens} padding={10} className={styles.root}>
+      <Stack horizontal tokens={stackTokens} className={styles.root}>
         <Stack.Item grow={3} className={styles.item}>
           Grow is 3
         </Stack.Item>