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

Jump to bottom

Stack: Promoting stack from experiments package to OUFR package. #7222

Closed
wants to merge 49 commits into from
Closed

Stack: Promoting stack from experiments package to OUFR package. #7222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
49 commits
Select commit Hold shift + click to select a range
408542c
Removing some of the deprecated components flaged when turning the ts…
khmakoto Oct 22, 2018
9a70bf7
Adding corresponding change file.
khmakoto Oct 22, 2018
9ad7683
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Oct 23, 2018
8e5a757
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Oct 23, 2018
9e4a643
Reverting changes that affected backwards compatibility because it re…
khmakoto Oct 23, 2018
146d37a
Adding missing deprecation reversion in BaseButton.
khmakoto Oct 23, 2018
06c99b4
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Oct 23, 2018
efd8396
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Oct 24, 2018
4dfa320
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Oct 29, 2018
e5e4743
Adding changes in oufr api.
khmakoto Oct 29, 2018
2b418eb
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Oct 29, 2018
28fd352
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Oct 30, 2018
113d4ca
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Nov 26, 2018
df9519f
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Nov 26, 2018
43e7c8b
Adding Stack component to OUFR package.
khmakoto Nov 26, 2018
64615c0
Adding codepen directive at the beginning of examples.
khmakoto Nov 26, 2018
d238462
Adding rest plugin to codepen example generation.
khmakoto Nov 26, 2018
a59cff2
Making StackItem pass Conformance test.
khmakoto Nov 27, 2018
6c83917
Deleting Stack component from experiments package.
khmakoto Nov 27, 2018
dc9e461
Adding change files.
khmakoto Nov 27, 2018
782d9a3
Delete master_2018-10-22-23-24.json
khmakoto Nov 27, 2018
6b29385
Updating change file.
khmakoto Nov 27, 2018
c8a012f
Adding Stack to index file in oufr package.
khmakoto Nov 27, 2018
e829f98
Merge branch 'stackPromotion' of github.com:khmakoto/office-ui-fabric…
khmakoto Nov 27, 2018
71c8569
Adding api changes.
khmakoto Nov 27, 2018
730e6e1
Changing imports so they reference ourf and not oufr/lib.
khmakoto Nov 27, 2018
d068354
Changing vr-tests to take oufr's Stack and not experiments' Stack.
khmakoto Nov 28, 2018
fcb6659
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Nov 28, 2018
18117ca
Fixing to pass tests.
khmakoto Nov 29, 2018
f0eb4c2
Fixing merge conflict.
khmakoto Nov 29, 2018
d714979
Changing horizontalAlign prop to use 'start' and 'end' instead of 'le…
khmakoto Nov 29, 2018
fcc4faa
Adding change file to @uifabric/fabric-website-resources.
khmakoto Nov 29, 2018
7a21220
Fixing left/right to start/end in vr-tests.
khmakoto Nov 29, 2018
e214430
Adding horizontal property to horizontal stack snapshots.
khmakoto Dec 4, 2018
a1e4a4b
Comprising HorizontalStack and VerticalStack into only one component …
khmakoto Dec 5, 2018
bdcdaee
Changing oufr api.
khmakoto Dec 5, 2018
0c20cef
Changing @default tags to @defaultvalue to adhere to api-extractor gu…
khmakoto Dec 5, 2018
c370aea
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
khmakoto Dec 5, 2018
8473180
Updating vr-tests.
khmakoto Dec 5, 2018
23c4975
Updating oufr api.
khmakoto Dec 5, 2018
9e80cb0
Deprecating the separate HorizontalStack and VerticalStack in favor o…
khmakoto Dec 5, 2018
1912b97
Deleting HorizontalStack and VerticalStack snapshots.
khmakoto Dec 5, 2018
09967ff
Removing HorizontalStack and VerticalStack pages from app website.
khmakoto Dec 5, 2018
0f54834
Replacing references to HorizontalStack and VerticalStack to referenc…
khmakoto Dec 5, 2018
927f860
Removing 'horizontal' and 'wrap' from DOM in snapshots.
khmakoto Dec 5, 2018
8f71919
Adding HorizontalStack and VerticalStack tests to Stack.test.tsx and …
khmakoto Dec 5, 2018
68d241d
Removing font styling from Stack component.
khmakoto Dec 5, 2018
15decec
Adding wrap to vertical stack and adding examples and snapshots. Nest…
khmakoto Dec 6, 2018
e8319a9
Making nested wrapping work on Vertical Stacks (Microsoft Edge only).
khmakoto Dec 7, 2018
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
6 changes: 6 additions & 0 deletions apps/fabric-website-resources/src/AppDefinition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,6 +384,12 @@ export const AppDefinition: IAppDefinition = {
name: 'Spinner',
url: '#/examples/spinner'
},
{
component: require<any>('./components/pages/StackPage').StackPage,
key: 'Stack',
name: 'Stack',
url: '#/examples/stack'
},
{
component: require<any>('./components/pages/SwatchColorPickerPage').SwatchColorPickerPage,
key: 'SwatchColorPicker',
Expand Down
6 changes: 6 additions & 0 deletions apps/fabric-website-resources/src/components/pages/StackPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import * as React from 'react';
import { DemoPage } from '../DemoPage';

import { StackPageProps } from 'office-ui-fabric-react/lib/components/Stack/Stack.doc';

export const StackPage = (props: { isHeaderVisible: boolean }) => <DemoPage {...{ ...StackPageProps, ...props }} />;
210 changes: 111 additions & 99 deletions apps/vr-tests/src/stories/HorizontalStack.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import * as React from 'react';
import Screener, { Steps } from 'screener-storybook/src/screener';
import { storiesOf } from '@storybook/react';
import { FabricDecoratorFullWidth } from '../utilities';
import { HorizontalStack } from '@uifabric/experiments/lib/Stack';
import { Stack } from 'office-ui-fabric-react';
import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';

const rootStyles = {
Expand Down Expand Up @@ -52,110 +52,122 @@ const styles = mergeStyleSets({
const defaultProps = {
className: styles.root,
children: [
<span key={1} className={styles.boxItem}>1</span>,
<span key={2} className={styles.boxItem}>2</span>,
<span key={3} className={styles.boxItem}>3</span>
<span key={1} className={styles.boxItem}>
1
</span>,
<span key={2} className={styles.boxItem}>
2
</span>,
<span key={3} className={styles.boxItem}>
3
</span>
]
};

storiesOf('HorizontalStack', module)
.addDecorator(FabricDecoratorFullWidth)
.addDecorator(story => (
<Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
))
.addStory('Default', () => (
<HorizontalStack {...defaultProps} />
), { rtl: true })
.addStory('Padding', () => (
<HorizontalStack {...defaultProps} padding={10} />
))
.addStory('Gap', () => (
<HorizontalStack {...defaultProps} gap={10} />
), { rtl: true })
.addStory('Horizontally centered', () => (
<HorizontalStack {...defaultProps} horizontalAlign="center" />
))
.addStory('Right-aligned', () => (
<HorizontalStack {...defaultProps} horizontalAlign="right" />
), { rtl: true })
.addStory('Space around', () => (
<HorizontalStack {...defaultProps} horizontalAlign="space-around" />
))
.addStory('Space between', () => (
<HorizontalStack {...defaultProps} horizontalAlign="space-between" />
))
.addStory('Space evenly', () => (
<HorizontalStack {...defaultProps} horizontalAlign="space-evenly" />
))
.addStory('Vertically centered', () => (
<HorizontalStack {...defaultProps} verticalAlign="center" className={styles.fixedHeight} />
))
.addStory('Bottom-aligned', () => (
<HorizontalStack {...defaultProps} verticalAlign="bottom" className={styles.fixedHeight} />
))
.addStory('Item alignments', () => (
<HorizontalStack {...defaultProps} gap={10} className={styles.fixedHeight}>
<HorizontalStack.Item align="auto" className={styles.item}>Auto-aligned item</HorizontalStack.Item>
<HorizontalStack.Item align="stretch" className={styles.item}>Stretch-aligned item</HorizontalStack.Item>
<HorizontalStack.Item align="baseline" className={styles.item}>Baseline-aligned item</HorizontalStack.Item>
<HorizontalStack.Item align="start" className={styles.item}>Start-aligned item</HorizontalStack.Item>
<HorizontalStack.Item align="center" className={styles.item}>Center-aligned item</HorizontalStack.Item>
<HorizontalStack.Item align="end" className={styles.item}>End-aligned item</HorizontalStack.Item>
</HorizontalStack>
), { rtl: true })
.addDecorator(story => <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>)
.addStory('Default', () => <Stack horizontal {...defaultProps} />, { rtl: true })
.addStory('Padding', () => <Stack horizontal {...defaultProps} padding={10} />)
.addStory('Gap', () => <Stack horizontal {...defaultProps} gap={10} />, { rtl: true })
.addStory('Horizontally centered', () => <Stack horizontal {...defaultProps} horizontalAlignment="center" />)
.addStory('Right-aligned', () => <Stack horizontal {...defaultProps} horizontalAlignment="end" />, { rtl: true })
.addStory('Space around', () => <Stack horizontal {...defaultProps} horizontalAlignment="space-around" />)
.addStory('Space between', () => <Stack horizontal {...defaultProps} horizontalAlignment="space-between" />)
.addStory('Space evenly', () => <Stack horizontal {...defaultProps} horizontalAlignment="space-evenly" />)
.addStory('Vertically centered', () => <Stack horizontal {...defaultProps} verticalAlignment="center" className={styles.fixedHeight} />)
.addStory('Bottom-aligned', () => <Stack horizontal {...defaultProps} verticalAlignment="bottom" className={styles.fixedHeight} />)
.addStory(
'Item alignments',
() => (
<Stack horizontal {...defaultProps} gap={10} className={styles.fixedHeight}>
<Stack.Item align="auto" className={styles.item}>
Auto-aligned item
</Stack.Item>
<Stack.Item align="stretch" className={styles.item}>
Stretch-aligned item
</Stack.Item>
<Stack.Item align="baseline" className={styles.item}>
Baseline-aligned item
</Stack.Item>
<Stack.Item align="start" className={styles.item}>
Start-aligned item
</Stack.Item>
<Stack.Item align="center" className={styles.item}>
Center-aligned item
</Stack.Item>
<Stack.Item align="end" className={styles.item}>
End-aligned item
</Stack.Item>
</Stack>
),
{ rtl: true }
)
.addStory('Growing items', () => (
<HorizontalStack {...defaultProps} gap={10}>
<HorizontalStack.Item grow={3} className={styles.item}>Grow is 3</HorizontalStack.Item>
<HorizontalStack.Item grow={2} className={styles.item}>Grow is 2</HorizontalStack.Item>
<HorizontalStack.Item grow className={styles.item}>Grow is 1</HorizontalStack.Item>
</HorizontalStack>
<Stack horizontal {...defaultProps} gap={10}>
<Stack.Item grow={3} className={styles.item}>
Grow is 3
</Stack.Item>
<Stack.Item grow={2} className={styles.item}>
Grow is 2
</Stack.Item>
<Stack.Item grow className={styles.item}>
Grow is 1
</Stack.Item>
</Stack>
))
.addStory('Shrinking items', () => (
<HorizontalStack {...defaultProps} gap={10} shrinkItems>
<HorizontalStack.Item className={styles.shrinkItem}>1</HorizontalStack.Item>
<HorizontalStack.Item preventShrink className={styles.shrinkItem}>2 (does not shrink)</HorizontalStack.Item>
<HorizontalStack.Item className={styles.shrinkItem}>3</HorizontalStack.Item>
<HorizontalStack.Item className={styles.shrinkItem}>4</HorizontalStack.Item>
<HorizontalStack.Item className={styles.shrinkItem}>5</HorizontalStack.Item>
<HorizontalStack.Item className={styles.shrinkItem}>6</HorizontalStack.Item>
<HorizontalStack.Item className={styles.shrinkItem}>7</HorizontalStack.Item>
</HorizontalStack>
<Stack horizontal {...defaultProps} gap={10} shrinkItems>
<Stack.Item className={styles.shrinkItem}>1</Stack.Item>
<Stack.Item preventShrink className={styles.shrinkItem}>
2 (does not shrink)
</Stack.Item>
<Stack.Item className={styles.shrinkItem}>3</Stack.Item>
<Stack.Item className={styles.shrinkItem}>4</Stack.Item>
<Stack.Item className={styles.shrinkItem}>5</Stack.Item>
<Stack.Item className={styles.shrinkItem}>6</Stack.Item>
<Stack.Item className={styles.shrinkItem}>7</Stack.Item>
</Stack>
))
.addStory('Wrap', () => (
<HorizontalStack {...defaultProps} gap={10} wrap>
<span className={styles.boxItem}>1</span>
<span className={styles.boxItem}>2</span>
<span className={styles.boxItem}>3</span>
<span className={styles.boxItem}>4</span>
<span className={styles.boxItem}>5</span>
<span className={styles.boxItem}>6</span>
<span className={styles.boxItem}>7</span>
<span className={styles.boxItem}>8</span>
<span className={styles.boxItem}>9</span>
<span className={styles.boxItem}>10</span>
<span className={styles.boxItem}>11</span>
<span className={styles.boxItem}>12</span>
<span className={styles.boxItem}>13</span>
<span className={styles.boxItem}>14</span>
<span className={styles.boxItem}>15</span>
<span className={styles.boxItem}>16</span>
<span className={styles.boxItem}>17</span>
<span className={styles.boxItem}>18</span>
<span className={styles.boxItem}>19</span>
<span className={styles.boxItem}>20</span>
<span className={styles.boxItem}>22</span>
<span className={styles.boxItem}>23</span>
<span className={styles.boxItem}>24</span>
<span className={styles.boxItem}>25</span>
<span className={styles.boxItem}>26</span>
<span className={styles.boxItem}>27</span>
<span className={styles.boxItem}>28</span>
<span className={styles.boxItem}>29</span>
<span className={styles.boxItem}>30</span>
</HorizontalStack>
), { rtl: true })
.addStory(
'Wrap',
() => (
<Stack horizontal {...defaultProps} gap={10} wrap>
<span className={styles.boxItem}>1</span>
<span className={styles.boxItem}>2</span>
<span className={styles.boxItem}>3</span>
<span className={styles.boxItem}>4</span>
<span className={styles.boxItem}>5</span>
<span className={styles.boxItem}>6</span>
<span className={styles.boxItem}>7</span>
<span className={styles.boxItem}>8</span>
<span className={styles.boxItem}>9</span>
<span className={styles.boxItem}>10</span>
<span className={styles.boxItem}>11</span>
<span className={styles.boxItem}>12</span>
<span className={styles.boxItem}>13</span>
<span className={styles.boxItem}>14</span>
<span className={styles.boxItem}>15</span>
<span className={styles.boxItem}>16</span>
<span className={styles.boxItem}>17</span>
<span className={styles.boxItem}>18</span>
<span className={styles.boxItem}>19</span>
<span className={styles.boxItem}>20</span>
<span className={styles.boxItem}>22</span>
<span className={styles.boxItem}>23</span>
<span className={styles.boxItem}>24</span>
<span className={styles.boxItem}>25</span>
<span className={styles.boxItem}>26</span>
<span className={styles.boxItem}>27</span>
<span className={styles.boxItem}>28</span>
<span className={styles.boxItem}>29</span>
<span className={styles.boxItem}>30</span>
</Stack>
),
{ rtl: true }
)
.addStory('Wrap with specified vertical gap', () => (
<HorizontalStack {...defaultProps} wrap gap={10} verticalGap={40}>
<Stack horizontal {...defaultProps} wrap gap={10} verticalGap={40}>
<span className={styles.boxItem}>1</span>
<span className={styles.boxItem}>2</span>
<span className={styles.boxItem}>3</span>
Expand Down Expand Up @@ -185,14 +197,14 @@ storiesOf('HorizontalStack', module)
<span className={styles.boxItem}>28</span>
<span className={styles.boxItem}>29</span>
<span className={styles.boxItem}>30</span>
</HorizontalStack>
</Stack>
))
.addStory('Box shadow around items', () => (
<HorizontalStack {...defaultProps} gap={25}>
<Stack horizontal {...defaultProps} gap={25}>
<span className={styles.shadowItem}>1</span>
<span className={styles.shadowItem}>2</span>
<span className={styles.shadowItem}>3</span>
<span className={styles.shadowItem}>4</span>
<span className={styles.shadowItem}>5</span>
</HorizontalStack>
));
</Stack>
));
Loading