Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Card: Improving styling and adding compact Card styling and examples #8247

Merged
merged 39 commits into from
Mar 29, 2019
Merged

Card: Improving styling and adding compact Card styling and examples #8247

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
15eacf1
Adding pre-copy.json creation step and template when using create-pac…
khmakoto Mar 7, 2019
f652242
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Mar 7, 2019
fa82413
Improving styling of basic Cards and adding example of compact Card.
khmakoto Mar 7, 2019
b544d3c
Adding compact Card styling and examples.
khmakoto Mar 8, 2019
5ae2539
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Mar 8, 2019
a3e7d7e
Adding change file.
khmakoto Mar 8, 2019
6d57ee1
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
Mar 13, 2019
c0ae063
Adding margin as token to StackItem and removing CardItem types.
Mar 13, 2019
499aade
Removing gaps and paddings from examples
Mar 13, 2019
85e4866
Leaving margin token as undefined.
Mar 13, 2019
752a7ad
Adding OUFR change file.
Mar 14, 2019
d92c479
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
Mar 14, 2019
5969ffc
Adding childrenGap token to Stack and Card.
Mar 15, 2019
31f5cb5
Changing styling of Card and extending IStackTokens in ICardTokens
Mar 15, 2019
59bd6df
Adding @uifabric/experiments change file.
khmakoto Mar 18, 2019
18891f4
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Mar 18, 2019
b664e14
Merge branch 'cardApi' of github.com:khmakoto/office-ui-fabric-react …
khmakoto Mar 18, 2019
a25888c
Updating create component to be able to pass tokens in view.
Mar 20, 2019
6649eed
Adding foundation change file.
Mar 20, 2019
050767b
Merge branch 'cardApi' of github.com:khmakoto/office-ui-fabric-react …
Mar 20, 2019
47e2432
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
Mar 20, 2019
ae12317
Removing console.log statement and updating webpack config.
Mar 20, 2019
178c748
Styling changes to adhere more to design guideline and example updates.
khmakoto Mar 21, 2019
8d99cb8
Getting rid of alt prop in Image.
khmakoto Mar 21, 2019
b322345
Updating snapshots.
khmakoto Mar 21, 2019
3bafbf7
Merge branch 'master' into khmakoto/cardApi
natalieethell Mar 26, 2019
a2d05cb
Delete merge-styles.api.ts
natalieethell Mar 26, 2019
4ae5511
Fixing merge conflict.
khmakoto Mar 27, 2019
ad720fb
Merge branch 'cardApi' of github.com:khmakoto/office-ui-fabric-react …
khmakoto Mar 28, 2019
9b2290b
Updating examples to centralize tokens instead of using them inline.
khmakoto Mar 28, 2019
bb7bc1e
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Mar 28, 2019
834b48d
Updating Dropdown examples to have token centralization.
khmakoto Mar 28, 2019
db83ae5
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Mar 28, 2019
0d1e5b2
Adding merge-styles change file.
khmakoto Mar 28, 2019
90a58d5
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Mar 28, 2019
3256fc1
Updating TextField examples.
khmakoto Mar 29, 2019
93442a2
Updating Spinner and Slider examples.
khmakoto Mar 29, 2019
249fade
Removing deprecation detection for Stack.
khmakoto Mar 29, 2019
4434317
Using path.resolve instead of path.join in webpack.serve.config.js.
khmakoto Mar 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/@uifabric/react-cards/cardApi_2019-03-08-22-08.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]"
}
2 changes: 2 additions & 0 deletions packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10683,6 +10683,8 @@ interface IStackItemSlots {

// @public (undocumented)
interface IStackItemTokens {
// (undocumented)
margin?: number | string;
}

// @public (undocumented)
Expand Down
15 changes: 11 additions & 4 deletions packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { getGlobalClassNames } from '../../../Styling';
import { IStackItemComponent, IStackItemStyles, IStackItemStylesReturnType } from './StackItem.types';
import { IStackItemComponent, IStackItemStyles, IStackItemStylesReturnType, IStackItemTokenReturnType } from './StackItem.types';

const GlobalClassNames = {
root: 'ms-StackItem'
Expand All @@ -10,7 +10,13 @@ const alignMap: { [key: string]: string } = {
end: 'flex-end'
};

export const styles: IStackItemComponent['styles'] = (props, theme): IStackItemStylesReturnType => {
const baseTokens: IStackItemComponent['tokens'] = {
margin: 0
khmakoto marked this conversation as resolved.
Show resolved Hide resolved
};

export const StackItemTokens: IStackItemComponent['tokens'] = (props, theme): IStackItemTokenReturnType => [baseTokens];
khmakoto marked this conversation as resolved.
Show resolved Hide resolved

export const StackItemStyles: IStackItemComponent['styles'] = (props, theme, tokens): IStackItemStylesReturnType => {
const { grow, shrink, disableShrink, align, verticalFill, className } = props;

const classNames = getGlobalClassNames(GlobalClassNames, theme);
Expand All @@ -20,8 +26,9 @@ export const styles: IStackItemComponent['styles'] = (props, theme): IStackItemS
theme.fonts.medium,
classNames.root,
{
width: 'auto',
height: verticalFill ? '100%' : 'auto'
margin: tokens.margin,
height: verticalFill ? '100%' : 'auto',
width: 'auto'
},
grow && { flexGrow: grow === true ? 1 : grow },
(disableShrink || (!grow && !shrink)) && {
Expand Down
3 changes: 2 additions & 1 deletion packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import * as React from 'react';
import { withSlots, createComponent, getSlots } from '../../../Foundation';
import { IStackItemComponent, IStackItemProps, IStackItemSlots } from './StackItem.types';
import { styles } from './StackItem.styles';
import { StackItemStyles as styles, StackItemTokens as tokens } from './StackItem.styles';

const view: IStackItemComponent['view'] = props => {
const { children } = props;
Expand All @@ -20,6 +20,7 @@ const view: IStackItemComponent['view'] = props => {
export const StackItem: React.StatelessComponent<IStackItemProps> = createComponent({
displayName: 'StackItem',
styles,
tokens,
view
});

Expand Down
4 changes: 3 additions & 1 deletion packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ export interface IStackItemProps extends IStackItemSlots, IStyleableComponentPro
verticalFill?: boolean;
}

export interface IStackItemTokens {}
export interface IStackItemTokens {
margin?: number | string;
}

export type IStackItemStyles = IComponentStyles<IStackItemSlots>;
Loading