From 79b8b3fd51840ffb9ddef2435045def14ba26a1d Mon Sep 17 00:00:00 2001 From: "Kartik Nuli (Zen3 Infosolutions America Inc)" Date: Wed, 20 Jun 2018 16:17:00 -0700 Subject: [PATCH 01/12] Card apiCallonDidMount and ref,GridList and CBS v1.1 changes --- .../components/Card/ActionBar/ActionBar.tsx | 8 ++--- .../src/components/Card/Card.styles.ts | 31 +++++-------------- .../experiments/src/components/Card/Card.tsx | 24 +++++++++++--- .../src/components/Card/Card.types.ts | 14 +++++++++ .../CompoundButton.styles.ts | 6 ++-- .../CompoundButtonStack.tsx | 17 ++++++++-- .../CompoundButtonStack.types.ts | 18 +++++++++++ .../src/components/Card/GridList/GridList.tsx | 17 +++++++--- .../Card/GridList/GridList.types.ts | 2 +- .../src/components/Card/Layout/Layout.tsx | 4 +-- 10 files changed, 99 insertions(+), 42 deletions(-) diff --git a/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx b/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx index 6a1dc3a88a715a..b600ada5d725a9 100644 --- a/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx +++ b/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx @@ -56,9 +56,9 @@ export class ActionBar extends React.Component { ); }; - private _onReduceData = (currentdata: IOverflowSetItemProps): {} => { + private _onReduceData = (currentdata: IOverflowSetItemProps): {} | void => { if (currentdata.primary.length === 0) { - return {}; + return; } const overflow = [...currentdata.primary.slice(-1), ...currentdata.overflow]; @@ -67,9 +67,9 @@ export class ActionBar extends React.Component { return { primary, overflow }; }; - private _onGrowData = (currentdata: IOverflowSetItemProps): {} => { + private _onGrowData = (currentdata: IOverflowSetItemProps): {} | void => { if (currentdata.overflow.length === 0) { - return {}; + return; } const overflow = currentdata.overflow.slice(1); diff --git a/packages/experiments/src/components/Card/Card.styles.ts b/packages/experiments/src/components/Card/Card.styles.ts index 3b0633b5fd30b2..1fbdec2126f5f7 100644 --- a/packages/experiments/src/components/Card/Card.styles.ts +++ b/packages/experiments/src/components/Card/Card.styles.ts @@ -1,24 +1,9 @@ -import { memoizeFunction } from '../../Utilities'; -import { mergeStyleSets, IStyle } from '../../Styling'; +import { ICardStyles } from './Card.types'; -export interface ICardStyles { - /** - * Style for the root element in the default enabled/unchecked state. - */ - root?: IStyle; -} - -export interface ICardNames { - /** - * Root html container for this component. - */ - root?: string; -} - -export const getClassNames = memoizeFunction( - (): ICardNames => { - return mergeStyleSets({ - root: [] - }); - } -); +export const getStyles = (): ICardStyles => { + return { + root: { + backgroundColor: '#ffffff' + } + }; +}; diff --git a/packages/experiments/src/components/Card/Card.tsx b/packages/experiments/src/components/Card/Card.tsx index 93dee3f44b2da7..92d410bb355155 100644 --- a/packages/experiments/src/components/Card/Card.tsx +++ b/packages/experiments/src/components/Card/Card.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { ICardProps, ICardState } from './Card.types'; +import { ICardProps, ICardState, ICardStyles } from './Card.types'; import { CardFrame } from './CardFrame/CardFrame'; import { Layout } from './Layout/Layout'; +import { getStyles } from './Card.styles'; +import { classNamesFunction } from 'office-ui-fabric-react/lib/Utilities'; export class Card extends React.Component { constructor(props: ICardProps) { @@ -11,12 +13,26 @@ export class Card extends React.Component { }; } + public updateState(): void { + this.setState({}); + } + + public componentDidMount(): void { + if (this.props.callOnDidMount !== undefined) { + this.props.callOnDidMount(); + } + } + public render(): JSX.Element { const { cardFrameContent, header, cardContentList, actions } = this.props; + const getClassNames = classNamesFunction(); + const classNames = getClassNames(getStyles); return ( - - - +
+ + + +
); } } diff --git a/packages/experiments/src/components/Card/Card.types.ts b/packages/experiments/src/components/Card/Card.types.ts index 17123eba441bb0..6a65fe2ec5f7c4 100644 --- a/packages/experiments/src/components/Card/Card.types.ts +++ b/packages/experiments/src/components/Card/Card.types.ts @@ -2,6 +2,7 @@ import { ICardHeaderProps } from './CardHeader/CardHeader.types'; import { ICardContentDetails } from './Layout/Layout.types'; import { IAction } from './ActionBar/ActionBar.types'; import { ICardDropDownOption } from './CardFrame/CardFrame.types'; +import { IStyle } from 'office-ui-fabric-react/lib/Styling'; /** * Card size that we want to build. @@ -105,6 +106,12 @@ export interface ICardProps { * The card size (small | medium tall | medium wide | large) */ cardSize: CardSize; + + /** + * This props takes in a function that needs to be called upon componentDidMount. + * One of its use could be to fetch server data here + */ + callOnDidMount?: VoidFunction; } export interface ICardState { @@ -113,3 +120,10 @@ export interface ICardState { */ cardSize: CardSize; } + +export interface ICardStyles { + /** + * Styles for root element of the card + */ + root: IStyle; +} diff --git a/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButton.styles.ts b/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButton.styles.ts index caf6bfd875bf16..00a1e1999890fd 100644 --- a/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButton.styles.ts +++ b/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButton.styles.ts @@ -1,14 +1,16 @@ import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities'; import { IButtonStyles } from 'office-ui-fabric-react/lib/Button'; +import { ButtonSize } from './CompoundButtonStack.types'; export const getCustomCompoundButtonStyles = memoizeFunction( - (): IButtonStyles => { + (cardSize: number | undefined): IButtonStyles => { return { root: { width: '100%', marginBottom: '16px', maxWidth: 'none', - minHeight: '68px', + minHeight: cardSize === ButtonSize.small ? '40px' : '68px', + maxHeight: '68px', padding: '14px' }, textContainer: { diff --git a/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButtonStack.tsx b/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButtonStack.tsx index fb492c896952b7..79ad08233f8351 100644 --- a/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButtonStack.tsx +++ b/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButtonStack.tsx @@ -1,18 +1,31 @@ import * as React from 'react'; import { CompoundButton } from 'office-ui-fabric-react/lib/Button'; import { classNamesFunction } from 'office-ui-fabric-react/lib/Utilities'; -import { ICompoundButtonStackProps, ICompoundButtonStackStyles, ICompoundAction } from './CompoundButtonStack.types'; +import { + ICompoundButtonStackProps, + ICompoundButtonStackStyles, + ICompoundAction, + ButtonSize +} from './CompoundButtonStack.types'; import { getStyles } from './CompoundButtonStack.styles'; import { getCustomCompoundButtonStyles } from './CompoundButton.styles'; export class CompoundButtonStack extends React.Component { + public static defaultProps = { + buttonSize: ButtonSize.normal + }; + public render(): JSX.Element { const getClassNames = classNamesFunction(); const classNames = getClassNames(getStyles!); - const customStyles = getCustomCompoundButtonStyles(); + const { buttonSize } = this.props; + const customStyles = getCustomCompoundButtonStyles(buttonSize); const renderCompoundButtons = () => { return this.props.actions.map((action: ICompoundAction, index: number) => { + if (buttonSize === ButtonSize.small) { + action.description = ''; + } return ( { isHeaderVisible={this.props.isHeaderVisible} checkboxVisibility={CheckboxVisibility.hidden} onItemInvoked={this._onItemInvoked} + layoutMode={DetailsListLayoutMode.justified} + constrainMode={ConstrainMode.unconstrained} /> {actionButton} @@ -106,9 +114,9 @@ export class GridList extends React.Component { iconName: gridRow.c1.iconName }, c2: { - content: gridRow.c2.content, - facepileImageSrc: gridRow.c2.facepileImageSrc, - iconName: gridRow.c2.iconName + content: gridRow.c2 !== undefined ? gridRow.c2.content : undefined, + facepileImageSrc: gridRow.c2 !== undefined ? gridRow.c2.facepileImageSrc : undefined, + iconName: gridRow.c2 !== undefined ? gridRow.c2.iconName : undefined }, c3: { content: gridRow.c3 !== undefined ? gridRow.c3.content : undefined, @@ -128,6 +136,7 @@ export class GridList extends React.Component { const column: IColumn = { key: GridColumnContentType[gridColumn.key], name: gridColumn.name, + columnActionsMode: ColumnActionsMode.disabled, minWidth: 150, isResizable: false, fieldName: 'c' + (index + 1) diff --git a/packages/experiments/src/components/Card/GridList/GridList.types.ts b/packages/experiments/src/components/Card/GridList/GridList.types.ts index a0e3ac3b3a4168..f7d0279899964a 100644 --- a/packages/experiments/src/components/Card/GridList/GridList.types.ts +++ b/packages/experiments/src/components/Card/GridList/GridList.types.ts @@ -68,7 +68,7 @@ export interface IGridRow { /** * Column 2 contents for a single row */ - c2: IGridCellItem; + c2?: IGridCellItem; /** * Column 3 content for a single row diff --git a/packages/experiments/src/components/Card/Layout/Layout.tsx b/packages/experiments/src/components/Card/Layout/Layout.tsx index 819773544585f3..335811073c4033 100644 --- a/packages/experiments/src/components/Card/Layout/Layout.tsx +++ b/packages/experiments/src/components/Card/Layout/Layout.tsx @@ -62,8 +62,8 @@ export class Layout extends React.Component { break; } case CardContentType.CompoundButtonStack: { - const { actions } = cardContent.content as ICompoundButtonStackProps; - contentArea.push(); + const { actions, buttonSize } = cardContent.content as ICompoundButtonStackProps; + contentArea.push(); break; } case CardContentType.GridList: { From 031b7e081e6a9f0964d3b79d7fc72c6711d1c2b8 Mon Sep 17 00:00:00 2001 From: "Kartik Nuli (Zen3 Infosolutions America Inc)" Date: Wed, 20 Jun 2018 16:28:59 -0700 Subject: [PATCH 02/12] button size variation for CompoundButtonStack component --- .../Card/examples/Card.MediumTall.Basic.Example.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx b/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx index 5342acf72dc2b2..d1b3ed7e821c6f 100644 --- a/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx +++ b/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { ICardProps, CardSize, Priority, CardContentType } from '../Card.types'; import { Card } from '../Card'; -import { ICompoundAction } from '../CompoundButtonStack/CompoundButtonStack.types'; +import { ICompoundAction, ButtonSize } from '../CompoundButtonStack/CompoundButtonStack.types'; export class MediumTallCardBasicExample extends React.Component<{}, {}> { constructor(props: ICardProps) { @@ -55,7 +55,8 @@ export class MediumTallCardBasicExample extends React.Component<{}, {}> { priority: Priority.Priority2, cardContentType: CardContentType.CompoundButtonStack, content: { - actions: compoundButtonStack + actions: compoundButtonStack, + buttonSize: ButtonSize.small } } ]; From f99c2bca51bccdb953cf990b3b6cffc97331e4d1 Mon Sep 17 00:00:00 2001 From: "Kartik Nuli (Zen3 Infosolutions America Inc)" Date: Wed, 20 Jun 2018 16:31:56 -0700 Subject: [PATCH 03/12] change log file --- .../experiments/master_2018-06-20-23-30.json | 11 +++++++++++ .../Card/examples/Card.MediumTall.Basic.Example.tsx | 3 +-- 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 common/changes/@uifabric/experiments/master_2018-06-20-23-30.json diff --git a/common/changes/@uifabric/experiments/master_2018-06-20-23-30.json b/common/changes/@uifabric/experiments/master_2018-06-20-23-30.json new file mode 100644 index 00000000000000..695d63ddb95095 --- /dev/null +++ b/common/changes/@uifabric/experiments/master_2018-06-20-23-30.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "CardDidMount callback for making api calls, additional ref incase there is a use case where there is no state, compoundButtonStack size variation and gridList component v1.1 changes", + "type": "patch" + } + ], + "packageName": "@uifabric/experiments", + "email": "v-kanuli@microsoft.com" +} \ No newline at end of file diff --git a/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx b/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx index d1b3ed7e821c6f..a9e720507573c2 100644 --- a/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx +++ b/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx @@ -55,8 +55,7 @@ export class MediumTallCardBasicExample extends React.Component<{}, {}> { priority: Priority.Priority2, cardContentType: CardContentType.CompoundButtonStack, content: { - actions: compoundButtonStack, - buttonSize: ButtonSize.small + actions: compoundButtonStack } } ]; From 03c483a735d214ec99e360702f83e655dd456642 Mon Sep 17 00:00:00 2001 From: "Kartik Nuli (Zen3 Infosolutions America Inc)" Date: Thu, 21 Jun 2018 10:23:31 -0700 Subject: [PATCH 04/12] Removing redundant import --- .../components/Card/examples/Card.MediumTall.Basic.Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx b/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx index a9e720507573c2..5342acf72dc2b2 100644 --- a/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx +++ b/packages/experiments/src/components/Card/examples/Card.MediumTall.Basic.Example.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { ICardProps, CardSize, Priority, CardContentType } from '../Card.types'; import { Card } from '../Card'; -import { ICompoundAction, ButtonSize } from '../CompoundButtonStack/CompoundButtonStack.types'; +import { ICompoundAction } from '../CompoundButtonStack/CompoundButtonStack.types'; export class MediumTallCardBasicExample extends React.Component<{}, {}> { constructor(props: ICardProps) { From acbe4bb7fced7d73073516b79353b1c9e7990b1e Mon Sep 17 00:00:00 2001 From: "Kartik Nuli (Zen3 Infosolutions America Inc)" Date: Mon, 25 Jun 2018 22:35:57 -0700 Subject: [PATCH 05/12] css fixes for action bar,seperator,frame and header --- .../Card/ActionBar/ActionBar.styles.ts | 15 +++++- .../components/Card/ActionBar/ActionBar.tsx | 8 +-- .../src/components/Card/Card.styles.ts | 3 +- .../Card/CardFrame/CardFrame.styles.ts | 50 +++++++++++++------ .../components/Card/CardFrame/CardFrame.tsx | 7 +-- .../Card/CardFrame/CardFrame.types.ts | 5 -- .../Card/CardHeader/CardHeader.styles.ts | 2 +- .../CompoundButton.styles.ts | 5 +- .../components/Card/Layout/Layout.styles.ts | 1 - 9 files changed, 64 insertions(+), 32 deletions(-) diff --git a/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts b/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts index 2e18405142c687..53f6e572593a9d 100644 --- a/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts +++ b/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts @@ -1,11 +1,22 @@ import { IActionBarStyles } from './ActionBar.types'; +import { IButtonStyles } from 'office-ui-fabric-react/lib/Button'; export const getStyles = (): IActionBarStyles => { return { root: { whiteSpace: 'nowrap', - width: '100%', - padding: '10px' + width: '100%' } }; }; + +export const overflowButtonStyles: IButtonStyles = { + root: { + height: '32px', + width: '0', + minWidth: '0px' + }, + flexContainer: { + backgroundColor: 'black' + } +}; diff --git a/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx b/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx index b600ada5d725a9..3e156dd30581d7 100644 --- a/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx +++ b/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import { DefaultButton, IconButton } from 'office-ui-fabric-react/lib/Button'; +import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu'; import { classNamesFunction } from 'office-ui-fabric-react/lib/Utilities'; import { ResizeGroup } from 'office-ui-fabric-react/lib/ResizeGroup'; import { OverflowSet, IOverflowSetItemProps } from 'office-ui-fabric-react/lib/OverflowSet'; import { IAction, IActionBarProps, IActionBarStyles, IActionOverflowData, IActionItem } from './ActionBar.types'; -import { getStyles } from './ActionBar.styles'; +import { getStyles, overflowButtonStyles } from './ActionBar.styles'; import { getCustomActionBarButtonStyles } from './ActionBarButton.styles'; export class ActionBar extends React.Component { @@ -87,7 +87,9 @@ export class ActionBar extends React.Component { overflowItems.forEach((action: IAction, i: number) => { items.push({ key: i.toString(), name: action.title, onClick: action.action }); }); - return ; + return ( + + ); }; private _renderButton = (action: IOverflowSetItemProps) => { diff --git a/packages/experiments/src/components/Card/Card.styles.ts b/packages/experiments/src/components/Card/Card.styles.ts index 1fbdec2126f5f7..fb3867b25518e6 100644 --- a/packages/experiments/src/components/Card/Card.styles.ts +++ b/packages/experiments/src/components/Card/Card.styles.ts @@ -3,7 +3,8 @@ import { ICardStyles } from './Card.types'; export const getStyles = (): ICardStyles => { return { root: { - backgroundColor: '#ffffff' + backgroundColor: '#ffffff', + height: '100%' } }; }; diff --git a/packages/experiments/src/components/Card/CardFrame/CardFrame.styles.ts b/packages/experiments/src/components/Card/CardFrame/CardFrame.styles.ts index 618f54efe59f0b..1daef7f7063aac 100644 --- a/packages/experiments/src/components/Card/CardFrame/CardFrame.styles.ts +++ b/packages/experiments/src/components/Card/CardFrame/CardFrame.styles.ts @@ -1,4 +1,5 @@ import { ICardFrameStyles, ICardFrameProps } from './CardFrame.types'; +import { IButtonStyles } from 'office-ui-fabric-react'; const cardTitleBox = 40; @@ -13,17 +14,33 @@ export const getStyles = (props: ICardFrameProps): ICardFrameStyles => { display: 'flex', flexDirection: 'column' }, - cardTitleBox: [ - { - height: cardTitleBox, - overflow: 'hidden' - } - ], + cardTitleBox: { + height: cardTitleBox, + overflow: 'hidden', + borderBottom: '1px solid', + borderBottomColor: seperatorColor ? seperatorColor : 'rgba(0,0,0,0.1)' + }, cardTitleEllipsisButton: { width: 40, float: 'right', height: '100%', - textAlign: 'center' + textAlign: 'center', + selectors: { + div: { + selectors: { + div: { + width: '40px', + selectors: { + button: { + width: '40px', + minWidth: '40px', + padding: '0px' + } + } + } + } + } + } }, cardTitle: { overflow: 'hidden', @@ -32,19 +49,24 @@ export const getStyles = (props: ICardFrameProps): ICardFrameStyles => { fontFamily: fontFamily ? fontFamily : 'Segoe UI Semibold', color: titleTextColor ? titleTextColor : 'rgba(0,0,0,1)' }, - seperator: { - margin: '0px', - width: '100%', - height: '1px', - backgroundColor: seperatorColor ? seperatorColor : 'rgba(0,0,0,0.1)' - }, ellipsisIcon: { paddingTop: 12 }, layout: { display: 'flex', flex: 1, - padding: '0 16px 16px 16px' + padding: '0 16px 0 16px' } }; }; + +export const customOverflowStyle: IButtonStyles = { + root: { + height: '40px', + width: '40px', + backgroundColor: 'inherit' + }, + rootHovered: { + backgroundColor: 'rgba(0, 0, 0, 0.1)' + } +}; diff --git a/packages/experiments/src/components/Card/CardFrame/CardFrame.tsx b/packages/experiments/src/components/Card/CardFrame/CardFrame.tsx index 5a5dab33e676f8..1f9e0b0538a0fa 100644 --- a/packages/experiments/src/components/Card/CardFrame/CardFrame.tsx +++ b/packages/experiments/src/components/Card/CardFrame/CardFrame.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { ICardFrameProps, ICardFrameStyles, ICardDropDownOption } from './CardFrame.types'; -import { IconButton } from 'office-ui-fabric-react/lib/Button'; +import { IconButton, DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { getStyles } from './CardFrame.styles'; import { classNamesFunction } from 'office-ui-fabric-react/lib/Utilities'; import { IOverflowSetItemProps, OverflowSet } from 'office-ui-fabric-react/lib/OverflowSet'; +import { customOverflowStyle } from './CardFrame.styles'; export class CardFrame extends React.Component { constructor(props: ICardFrameProps) { @@ -41,7 +42,6 @@ export class CardFrame extends React.Component {
{cardTitle}
-
{this.props.children}
); @@ -60,11 +60,12 @@ export class CardFrame extends React.Component { private _onRenderOverflowButton(overflowItems: IOverflowSetItemProps[] | undefined): JSX.Element { return ( - ); } diff --git a/packages/experiments/src/components/Card/CardFrame/CardFrame.types.ts b/packages/experiments/src/components/Card/CardFrame/CardFrame.types.ts index 1c9ebce1947875..d844b745b5d22a 100644 --- a/packages/experiments/src/components/Card/CardFrame/CardFrame.types.ts +++ b/packages/experiments/src/components/Card/CardFrame/CardFrame.types.ts @@ -85,11 +85,6 @@ export interface ICardFrameStyles { */ cardTitle: IStyle; - /** - * Style for root seperator - */ - seperator: IStyle; - /** * Style for card frame layout(children) */ diff --git a/packages/experiments/src/components/Card/CardHeader/CardHeader.styles.ts b/packages/experiments/src/components/Card/CardHeader/CardHeader.styles.ts index 665df7e4fc1d7d..e6f93326f53c44 100644 --- a/packages/experiments/src/components/Card/CardHeader/CardHeader.styles.ts +++ b/packages/experiments/src/components/Card/CardHeader/CardHeader.styles.ts @@ -10,7 +10,7 @@ export const getStyles = (props: ICardHeaderProps): ICardHeaderStyles => { display: 'flex', flexWrap: 'wrap', marginTop: '21px', - marginBottom: '30px' + marginBottom: '21px' }, headerText: { fontSize: fontSize === FontSize.medium ? '16px' : '28px', diff --git a/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButton.styles.ts b/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButton.styles.ts index 00a1e1999890fd..74cd5e77ff0538 100644 --- a/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButton.styles.ts +++ b/packages/experiments/src/components/Card/CompoundButtonStack/CompoundButton.styles.ts @@ -10,8 +10,9 @@ export const getCustomCompoundButtonStyles = memoizeFunction( marginBottom: '16px', maxWidth: 'none', minHeight: cardSize === ButtonSize.small ? '40px' : '68px', - maxHeight: '68px', - padding: '14px' + height: cardSize === ButtonSize.small ? '40px' : '68px', + padding: '14px', + marginLeft: '0px' }, textContainer: { overflow: 'hidden' diff --git a/packages/experiments/src/components/Card/Layout/Layout.styles.ts b/packages/experiments/src/components/Card/Layout/Layout.styles.ts index 086c7eb3a7d23d..2223bf0d9e7622 100644 --- a/packages/experiments/src/components/Card/Layout/Layout.styles.ts +++ b/packages/experiments/src/components/Card/Layout/Layout.styles.ts @@ -6,7 +6,6 @@ export const getStyles = (props: ILayoutProps): ILayoutStyles => { const isMediumTall: boolean = cardSize === CardSize.mediumTall; return { root: { - height: '500px', width: '100%', overflow: 'hidden', display: 'flex', From 6dc93144fba4170efc9547e3a3974448faf4a202 Mon Sep 17 00:00:00 2001 From: "Kartik Nuli (Zen3 Infosolutions America Inc)" Date: Tue, 26 Jun 2018 10:39:04 -0700 Subject: [PATCH 06/12] css changes for actionBar --- .../src/components/Card/ActionBar/ActionBar.styles.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts b/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts index 53f6e572593a9d..9463a3579df223 100644 --- a/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts +++ b/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts @@ -15,8 +15,5 @@ export const overflowButtonStyles: IButtonStyles = { height: '32px', width: '0', minWidth: '0px' - }, - flexContainer: { - backgroundColor: 'black' } }; From 47429f38aa165e9c926e167ffb547e8e32ef78c2 Mon Sep 17 00:00:00 2001 From: "Kartik Nuli (Zen3 Infosolutions America Inc)" Date: Tue, 26 Jun 2018 15:41:12 -0700 Subject: [PATCH 07/12] updated snapshot recommendationCard --- .../Recommendation.test.tsx.snap | 144 ++++++++++-------- 1 file changed, 78 insertions(+), 66 deletions(-) diff --git a/packages/experiments/src/components/Recommendation/__snapshots__/Recommendation.test.tsx.snap b/packages/experiments/src/components/Recommendation/__snapshots__/Recommendation.test.tsx.snap index 8e1f4a9932462a..950b500359ab78 100644 --- a/packages/experiments/src/components/Recommendation/__snapshots__/Recommendation.test.tsx.snap +++ b/packages/experiments/src/components/Recommendation/__snapshots__/Recommendation.test.tsx.snap @@ -24,6 +24,8 @@ exports[`RecommendationCard renders basic example correctly 1`] = ` className= { + border-bottom-color: rgba(0, 120, 215, 1); + border-bottom: 1px solid; height: 40px; overflow: hidden; } @@ -37,6 +39,17 @@ exports[`RecommendationCard renders basic example correctly 1`] = ` text-align: center; width: 40px; } + & div div { + width: 40px; + } + & div div button { + min-width: 40px; + padding-bottom: 0px; + padding-left: 0px; + padding-right: 0px; + padding-top: 0px; + width: 40px; + } >
-
-
-
Date: Tue, 26 Jun 2018 16:19:45 -0700 Subject: [PATCH 08/12] Css changes --- .../src/components/Card/CardFrame/CardFrame.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/experiments/src/components/Card/CardFrame/CardFrame.styles.ts b/packages/experiments/src/components/Card/CardFrame/CardFrame.styles.ts index 1daef7f7063aac..77fd3f0c9dbd09 100644 --- a/packages/experiments/src/components/Card/CardFrame/CardFrame.styles.ts +++ b/packages/experiments/src/components/Card/CardFrame/CardFrame.styles.ts @@ -55,7 +55,7 @@ export const getStyles = (props: ICardFrameProps): ICardFrameStyles => { layout: { display: 'flex', flex: 1, - padding: '0 16px 0 16px' + padding: '0 16px 16px 16px' } }; }; From 51edbc9a372735a8dfef68581ce83b40aea357c0 Mon Sep 17 00:00:00 2001 From: "Kartik Nuli (Zen3 Infosolutions America Inc)" Date: Tue, 26 Jun 2018 17:19:20 -0700 Subject: [PATCH 09/12] updated snapshot --- .../__snapshots__/Recommendation.test.tsx.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/experiments/src/components/Recommendation/__snapshots__/Recommendation.test.tsx.snap b/packages/experiments/src/components/Recommendation/__snapshots__/Recommendation.test.tsx.snap index 950b500359ab78..d9fb9ce88e6e93 100644 --- a/packages/experiments/src/components/Recommendation/__snapshots__/Recommendation.test.tsx.snap +++ b/packages/experiments/src/components/Recommendation/__snapshots__/Recommendation.test.tsx.snap @@ -219,7 +219,7 @@ exports[`RecommendationCard renders basic example correctly 1`] = ` { display: flex; flex: 1; - padding-bottom: 0; + padding-bottom: 16px; padding-left: 16px; padding-right: 16px; padding-top: 0; @@ -679,7 +679,7 @@ exports[`RecommendationCard renders dlp example correctly 1`] = ` { display: flex; flex: 1; - padding-bottom: 0; + padding-bottom: 16px; padding-left: 16px; padding-right: 16px; padding-top: 0; @@ -1426,7 +1426,7 @@ exports[`RecommendationCard renders imageillustration example correctly 1`] = ` { display: flex; flex: 1; - padding-bottom: 0; + padding-bottom: 16px; padding-left: 16px; padding-right: 16px; padding-top: 0; From 84f3d9b717b8a0d0cfe0b955f00a15408bcad908 Mon Sep 17 00:00:00 2001 From: "Kartik Nuli (Zen3 Infosolutions America Inc)" Date: Thu, 28 Jun 2018 12:36:00 -0700 Subject: [PATCH 10/12] css changes --- .../src/components/Card/ActionBar/ActionBar.styles.ts | 3 ++- .../experiments/src/components/Card/ActionBar/ActionBar.tsx | 4 +--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts b/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts index 9463a3579df223..d4975c37300c69 100644 --- a/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts +++ b/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts @@ -5,7 +5,8 @@ export const getStyles = (): IActionBarStyles => { return { root: { whiteSpace: 'nowrap', - width: '100%' + width: '100%', + height: '32px' } }; }; diff --git a/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx b/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx index 3e156dd30581d7..4979d09592dcf6 100644 --- a/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx +++ b/packages/experiments/src/components/Card/ActionBar/ActionBar.tsx @@ -87,9 +87,7 @@ export class ActionBar extends React.Component { overflowItems.forEach((action: IAction, i: number) => { items.push({ key: i.toString(), name: action.title, onClick: action.action }); }); - return ( - - ); + return ; }; private _renderButton = (action: IOverflowSetItemProps) => { From 5f55b04e2a38da32c0e72adb19ebcbd54c94287b Mon Sep 17 00:00:00 2001 From: "Kartik Nuli (Zen3 Infosolutions America Inc)" Date: Fri, 29 Jun 2018 13:57:31 -0700 Subject: [PATCH 11/12] actionbar height css --- .../src/components/Card/ActionBar/ActionBar.styles.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts b/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts index 9463a3579df223..d4975c37300c69 100644 --- a/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts +++ b/packages/experiments/src/components/Card/ActionBar/ActionBar.styles.ts @@ -5,7 +5,8 @@ export const getStyles = (): IActionBarStyles => { return { root: { whiteSpace: 'nowrap', - width: '100%' + width: '100%', + height: '32px' } }; }; From 08dd4692a00b1a49c02bdc432685f74fcdf51f04 Mon Sep 17 00:00:00 2001 From: nulikartik Date: Fri, 29 Jun 2018 14:00:45 -0700 Subject: [PATCH 12/12] Update master_2018-06-20-23-30.json --- .../@uifabric/experiments/master_2018-06-20-23-30.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/common/changes/@uifabric/experiments/master_2018-06-20-23-30.json b/common/changes/@uifabric/experiments/master_2018-06-20-23-30.json index 695d63ddb95095..6677f996905431 100644 --- a/common/changes/@uifabric/experiments/master_2018-06-20-23-30.json +++ b/common/changes/@uifabric/experiments/master_2018-06-20-23-30.json @@ -2,10 +2,10 @@ "changes": [ { "packageName": "@uifabric/experiments", - "comment": "CardDidMount callback for making api calls, additional ref incase there is a use case where there is no state, compoundButtonStack size variation and gridList component v1.1 changes", + "comment": "css changes for action bar", "type": "patch" } ], "packageName": "@uifabric/experiments", "email": "v-kanuli@microsoft.com" -} \ No newline at end of file +}