Skip to content

Commit 1fa706b

Browse files
xinyao27xinyao27
committed
feat(Command): almost done
1 parent ee610e3 commit 1fa706b

File tree

22 files changed

+590
-54
lines changed

22 files changed

+590
-54
lines changed

‎packages/fluent-ui-icons/src/Icon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ interface IconProps {
88
}
99

1010
const SvgIconStyled = styled.svg`
11-
width: 1em;
12-
height: 1em;
11+
width: 0.83em;
12+
height: 0.83em;
1313
display: inline-block;
1414
user-select: none;
1515
font-size: 1.5rem;

‎packages/fluent-ui.com/src/components/playground.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { ReactElement, SFC } from 'react'
22
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
33
import * as Fluent from '@fluent-ui/core'
44
import * as Icon from '@fluent-ui/icons'
5+
import { theme } from '../utils/theme'
56

67
const scope = { ...Fluent, ...Icon }
78

@@ -12,15 +13,22 @@ interface PlaygroundProps {
1213
const Playground: SFC<PlaygroundProps> = ({ children }: PlaygroundProps): ReactElement => {
1314
return (
1415
<section>
15-
<LiveProvider code={children.props.children} scope={scope}>
16+
<LiveProvider code={children.props.children} scope={scope} theme={theme}>
1617
<LivePreview
1718
css={`
1819
> * {
1920
margin: 8px;
2021
}
2122
`}
2223
/>
23-
<LiveEditor className="markdown-pre" />
24+
<LiveEditor
25+
css={`
26+
font-size: 14px;
27+
textarea {
28+
outline: none;
29+
}
30+
`}
31+
/>
2432
<LiveError />
2533
</LiveProvider>
2634
</section>

‎packages/fluent-ui.com/src/docs/components/Box/README.md

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,38 @@ components: Box
77

88
<p class="description">Box</p>
99

10-
## Use Acrylic
10+
## Default
11+
12+
```jsx
13+
<Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
14+
<Box padding={{ sm: 15, lg: 25 }}>
15+
<Button style={{margin: 5}}>Button 1</Button>
16+
<Button style={{margin: 5}}>Button 2</Button>
17+
<Button style={{margin: 5}}>Button 3</Button>
18+
</Box>
19+
</Box>
20+
```
21+
22+
## Acrylic
1123

1224
Backdrop filter is currently baked under CSS Filters Level 2, and at the time of the writing, it only works work in Safari 9 with the `-webkit-` prefix, and Chrome as well as Opera by enabling the “Experimental Web Platform Features” [under the chrome://flags menu](https://webdesign.tutsplus.com/tutorials/css-backdrop-filters--cms-27314).
1325

1426
```jsx
15-
<div style={{
16-
padding: '6em 8em',
17-
background: 'url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover'
18-
}}>
19-
<Box acrylic={true} padding={{ sm: 15, lg: 25 }} color='#fff'>
27+
<Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
28+
<Box acrylic={true} padding={{ sm: 15, lg: 25 }}>
2029
Acrylic
2130
</Box>
22-
</div>
31+
</Box>
2332
```
2433

2534
## Reveal
2635

2736
```jsx
28-
<div style={{
29-
padding: '6em 8em',
30-
background: 'url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover'
31-
}}>
32-
<Box acrylic={true} padding={{ sm: 15, lg: 25 }} color='#fff' bg='#fff'>
37+
<Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
38+
<Box acrylic={true} padding={{ sm: 15, lg: 25 }}>
3339
<Button style={{margin: 5}}>Button 1</Button>
3440
<Button style={{margin: 5}}>Button 2</Button>
3541
<Button style={{margin: 5}}>Button 3</Button>
3642
</Box>
37-
</div>
43+
</Box>
3844
```

‎packages/fluent-ui.com/src/docs/components/Button/README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Button default style
2020
Highlighted button
2121

2222
```jsx
23-
<Button variant='accent'>Accent</Button>
23+
<Button variant="accent">Accent</Button>
2424
```
2525

2626
## Disabled
@@ -37,8 +37,8 @@ Use the `size` property.
3737

3838
```jsx
3939
<>
40-
<Button size='small'>small</Button>
41-
<Button size='medium'>medium</Button>
42-
<Button size='large'>large</Button>
40+
<Button size="small">small</Button>
41+
<Button size="medium">medium</Button>
42+
<Button size="large">large</Button>
4343
</>
4444
```

‎packages/fluent-ui.com/src/docs/components/Command/README.md

Lines changed: 56 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,62 @@ components: Command
99

1010
## Default
1111

12-
Command default style
12+
```jsx
13+
<Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
14+
<Command acrylic>
15+
<CommandButton icon="Back" />
16+
<CommandButton icon="Play" />
17+
<CommandButton icon="Forward" />
18+
19+
<Command.Content>
20+
Now Playing...
21+
</Command.Content>
22+
23+
<Command.Secondary>
24+
<CommandButton>Like</CommandButton>
25+
<CommandButton>Dislike</CommandButton>
26+
</Command.Secondary>
27+
</Command>
28+
</Box>
29+
```
30+
31+
## With label
32+
33+
```jsx
34+
<Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
35+
<Command acrylic>
36+
<CommandButton icon="Back">
37+
Back
38+
</CommandButton>
39+
<CommandButton icon="Play">
40+
Play
41+
</CommandButton>
42+
<CommandButton icon="Forward">
43+
Forward
44+
</CommandButton>
45+
46+
<Command.Content>
47+
Now Playing...
48+
</Command.Content>
49+
50+
<Command.Secondary>
51+
<CommandButton>Like</CommandButton>
52+
<CommandButton>Dislike</CommandButton>
53+
</Command.Secondary>
54+
</Command>
55+
</Box>
56+
```
57+
58+
## Without Content and Secondary
1359

1460
```jsx
15-
<Command>
16-
<Command.Item>
17-
<Icon type=""/>
18-
</Command.Item>
19-
</Command>
61+
<Box padding="6em 8em" background="url(https://i.loli.net/2019/06/08/5cfb6d5a7456419123.jpg) center/cover">
62+
<Box backgroundColor="none" display="flex" justifyContent="center">
63+
<Command acrylic>
64+
<CommandButton icon="Back" />
65+
<CommandButton icon="Play" />
66+
<CommandButton icon="Forward" />
67+
</Command>
68+
</Box>
69+
</Box>
2070
```

‎packages/fluent-ui.com/src/utils/theme.ts

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { PrismTheme } from 'prism-react-renderer'
2+
3+
export const theme: PrismTheme = {
4+
plain: {
5+
color: '#393A34',
6+
backgroundColor: 'transparent'
7+
},
8+
styles: [
9+
{
10+
types: ['comment', 'prolog', 'doctype', 'cdata'],
11+
style: {
12+
color: '#999988',
13+
fontStyle: 'italic'
14+
}
15+
},
16+
{
17+
types: ['namespace'],
18+
style: {
19+
opacity: 0.7
20+
}
21+
},
22+
{
23+
types: ['string', 'attr-value'],
24+
style: {
25+
color: '#e3116c'
26+
}
27+
},
28+
{
29+
types: ['punctuation', 'operator'],
30+
style: {
31+
color: '#393A34'
32+
}
33+
},
34+
{
35+
types: [
36+
'entity',
37+
'url',
38+
'symbol',
39+
'number',
40+
'boolean',
41+
'variable',
42+
'constant',
43+
'property',
44+
'regex',
45+
'inserted'
46+
],
47+
style: {
48+
color: '#36acaa'
49+
}
50+
},
51+
{
52+
types: ['atrule', 'keyword', 'attr-name', 'selector'],
53+
style: {
54+
color: '#00a4db'
55+
}
56+
},
57+
{
58+
types: ['function', 'deleted', 'tag'],
59+
style: {
60+
color: '#d73a49'
61+
}
62+
},
63+
{
64+
types: ['function-variable'],
65+
style: {
66+
color: '#6f42c1'
67+
}
68+
},
69+
{
70+
types: ['tag', 'selector', 'keyword'],
71+
style: {
72+
color: '#00009f'
73+
}
74+
}
75+
]
76+
}

‎packages/fluent-ui/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"styled-components": ">= 4.X"
4242
},
4343
"dependencies": {
44+
"@fluent-ui/icons": "^0.0.1",
4445
"@xstyled/styled-components": "^1.1.1",
4546
"fluent-reveal-effect": "^1.0.0",
4647
"normalize.css": "^8.0.1"
@@ -53,6 +54,7 @@
5354
"@types/styled-components": "4.1.8",
5455
"codecov": "^3.5.0",
5556
"cross-env": "^5.2.0",
57+
"csstype": "^2.6.5",
5658
"eslint-plugin-jest": "^22.6.4",
5759
"jest": "^23.6.0",
5860
"jest-config": "^23.6.0",

‎packages/fluent-ui/src/components/Box/Box.tsx

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
1-
import React, { SFC, ReactElement, forwardRef } from 'react'
2-
import styled, { Box as BaseBox } from '@xstyled/styled-components'
1+
import React, {
2+
ReactElement,
3+
forwardRef,
4+
ReactNode,
5+
ComponentPropsWithoutRef
6+
} from 'react'
7+
import styled, { Box as Base } from '@xstyled/styled-components'
8+
import { omit } from '../../utils'
9+
import { StylesProps } from './style'
310

4-
interface BoxProps {
5-
as?: string
11+
interface BoxProps extends StylesProps, ComponentPropsWithoutRef<'div'> {
612
acrylic?: boolean
7-
bg?: string
813
reveal?: boolean
14+
children?: ReactNode
15+
as?: keyof JSX.IntrinsicElements
916
}
1017

1118
const Acrylic = styled.box`
1219
position: relative;
1320
overflow: hidden;
1421
@supports (backdrop-filter: blur(10px)) {
22+
background: none !important;
1523
backdrop-filter: blur(10px);
1624
&::before,
1725
&::after {
@@ -25,7 +33,8 @@ const Acrylic = styled.box`
2533
&::before {
2634
z-index: -2;
2735
opacity: 0.5;
28-
background: ${(props: BoxProps): string => props.bg!};
36+
background-color: ${({ backgroundColor }: BoxProps): string =>
37+
backgroundColor!};
2938
}
3039
&::after {
3140
z-index: -1;
@@ -35,18 +44,21 @@ const Acrylic = styled.box`
3544
}
3645
`
3746

38-
const Box: SFC<BoxProps> = forwardRef<{}, BoxProps>(
47+
const BaseBox = Base as any
48+
49+
const Box = forwardRef<HTMLDivElement, BoxProps>(
3950
(props: BoxProps, ref): ReactElement => {
4051
if (props.acrylic) {
4152
return <Acrylic ref={ref} {...props} />
4253
}
43-
return <BaseBox ref={ref} {...props} />
54+
const otherProps = omit(props, ['acrylic'])
55+
return <BaseBox ref={ref} {...otherProps} />
4456
}
4557
)
4658

4759
Box.defaultProps = {
4860
acrylic: false,
49-
bg: '#000'
61+
backgroundColor: '#e6e6e6'
5062
}
5163

5264
Box.displayName = 'FBox'

0 commit comments

Comments
 (0)