Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit f24754a

Browse files
layershiftermnajdova
layershifter
and
mnajdova
authored
chore(package): create styles package (#2222)
* chore(package): create styles package * restore some changes * restore some changes & some fixes * move callable to /styles * restore types partially * fix import * fix UT * fix deps, fix import * reconfigure to TS project references * reconfigure to TS project references * reconfigure to TS project references * -added changelog * fix dependency * fix imports issues Co-authored-by: Marija Najdova <[email protected]>
1 parent b279dba commit f24754a

File tree

195 files changed

+860
-768
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

195 files changed

+860
-768
lines changed

‎CHANGELOG.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
1717

1818
## [Unreleased]
1919

20+
### BREAKING CHANGES
21+
- Add `@fluentui/styles` package for all styles' related utilities and TS types @layershifter, @mnajdova ([#2222](https://github.com/microsoft/fluent-ui-react/pull/2222))
22+
2023
<!--------------------------------[ v0.43.0 ]------------------------------- -->
2124
## [v0.43.0](https://github.com/microsoft/fluent-ui-react/tree/v0.43.0) (2020-01-08)
2225
[Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.42.0..v0.43.0)

‎build/gulp/plugins/gulp-example-menu.ts

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import through2 from 'through2'
55
import Vinyl from 'vinyl'
66

77
import { parseDocSection } from './util'
8-
import { ObjectOf } from 'packages/react/src/types'
98

109
const SECTION_ORDER = {
1110
Types: 1,
@@ -25,11 +24,17 @@ const getSectionOrder = sectionName =>
2524
const pluginName = 'gulp-example-menu'
2625

2726
export default () => {
28-
const exampleFilesByDisplayName: ObjectOf<ObjectOf<{
29-
sectionName: string
30-
examples: ObjectOf<any>
31-
order: number
32-
}>> = {}
27+
const exampleFilesByDisplayName: Record<
28+
string,
29+
Record<
30+
string,
31+
{
32+
sectionName: string
33+
examples: Record<string, any>
34+
order: number
35+
}
36+
>
37+
> = {}
3338

3439
function bufferContents(file, enc, cb) {
3540
if (file.isNull()) {

‎docs/src/app.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react'
22
import { hot } from 'react-hot-loader/root'
33
import { Provider, Debug, themes } from '@fluentui/react'
44

5-
import { mergeThemes } from '@fluentui/react/src/utils'
5+
import { mergeThemes } from '@fluentui/styles'
66
import { ThemeContext, ThemeContextData, themeContextDefaults } from './context/ThemeContext'
77
import Routes from './routes'
88
import { PerfDataProvider } from './components/ComponentDoc/PerfChart'

‎docs/src/components/ComponentBestPractices.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react'
22
import * as _ from 'lodash'
33
import {
4+
Extendable,
45
Box,
56
Flex,
67
Header,
@@ -10,7 +11,6 @@ import {
1011
Segment,
1112
ShorthandCollection,
1213
} from '@fluentui/react'
13-
import { Extendable } from 'src/types'
1414

1515
export type ComponentBestPracticesProps = Extendable<{
1616
doList?: ShorthandCollection<ListItemProps>

‎docs/src/components/ComponentDoc/BehaviorCard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Divider, Segment, Text } from '@fluentui/react'
2+
import { Divider, ICSSInJSStyle, Segment, Text } from '@fluentui/react'
33
import * as _ from 'lodash'
44
import ComponentExampleTitle from './ComponentExample/ComponentExampleTitle'
55
import BehaviorDescription from './BehaviorDescription'
@@ -10,7 +10,7 @@ export const behaviorVariantDisplayName = (fileName: string) => {
1010
return _.upperFirst(_.lowerCase(divided))
1111
}
1212

13-
export const exampleStyle: React.CSSProperties = {
13+
export const exampleStyle: ICSSInJSStyle = {
1414
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
1515
}
1616

‎docs/src/components/ComponentDoc/BehaviorDescription.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Loader } from '@fluentui/react/src'
2+
import { Loader } from '@fluentui/react'
33

44
const AccessibilityDescription = React.lazy(() => import('./InlineMarkdown'))
55

‎docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -73,22 +73,24 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
7373
aria-label={toolbarAriaLabel || null}
7474
items={[
7575
{
76-
key: 'show-code',
7776
icon: { name: 'code', style: { width: '20px', height: '20px' } },
7877
onClick: onShowCode,
7978
active: showCode,
8079
children: (Component, props) => (
81-
<Tooltip content="Try it" trigger={<Component {...props} />} />
80+
<Tooltip content="Try it" key="show-code" trigger={<Component {...props} />} />
8281
),
8382
},
8483

8584
{
86-
key: 'show-variables',
8785
icon: { name: 'paint brush', style: { width: '20px', height: '20px' } },
8886
onClick: onShowVariables,
8987
active: showVariables,
9088
children: (Component, props) => (
91-
<Tooltip content="Theme it" trigger={<Component {...props} />} />
89+
<Tooltip
90+
content="Theme it"
91+
key="show-variables"
92+
trigger={<Component {...props} />}
93+
/>
9294
),
9395
},
9496
{
@@ -97,29 +99,30 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
9799
kind: 'divider',
98100
},
99101
{
100-
key: 'show-transparent',
101102
icon: { name: 'adjust', style: { width: '20px', height: '20px' } },
102103
onClick: onShowTransparent,
103104
active: showTransparent,
104105
children: (Component, props) => (
105-
<Tooltip content="Transparent" trigger={<Component {...props} />} />
106+
<Tooltip
107+
content="Transparent"
108+
key="show-transparent"
109+
trigger={<Component {...props} />}
110+
/>
106111
),
107112
},
108113
{
109-
key: 'show-rtl',
110114
icon: { name: 'align right', style: { width: '20px', height: '20px' } },
111115
onClick: onShowRtl,
112116
active: showRtl,
113117
children: (Component, props) => (
114-
<Tooltip content="RTL" trigger={<Component {...props} />} />
118+
<Tooltip content="RTL" key="show-rtl" trigger={<Component {...props} />} />
115119
),
116120
},
117121

118122
{
119-
key: 'maximize',
120123
icon: { name: 'external alternate', style: { width: '20px', height: '20px' } },
121124
children: (Component, props) => (
122-
<Tooltip content="Popout" trigger={<Component {...props} />} />
125+
<Tooltip content="Popout" key="maximize" trigger={<Component {...props} />} />
123126
),
124127
as: NavLink,
125128
to: `/maximize/${_.kebabCase(
@@ -137,18 +140,20 @@ const ComponentControls: React.FC<ComponentControlsProps> = props => {
137140
kind: 'divider',
138141
},
139142
{
140-
key: 'show-codesandbox',
141143
onClick: onCodeSandboxClick,
142144
icon: { name: codeSandboxIcon, style: { width: '20px', height: '20px' } },
143145
children: (Component, props) => (
144-
<Tooltip content={codeSandboxTooltip} trigger={<Component {...props} />} />
146+
<Tooltip
147+
content={codeSandboxTooltip}
148+
key="show-codesandbox"
149+
trigger={<Component {...props} />}
150+
/>
145151
),
146152
},
147153
{
148-
key: 'copy-link',
149154
icon: { name: 'linkify', style: { width: '20px', height: '20px' } },
150155
children: (Component, props) => (
151-
<CopyToClipboard value={anchorName}>
156+
<CopyToClipboard key="copy-link" value={anchorName}>
152157
{(active, onClick) => (
153158
<Tooltip
154159
content={active ? 'Copied!' : 'Permalink'}

‎docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,15 @@ import {
55
KnobProvider,
66
LogInspector,
77
} from '@fluentui/docs-components'
8-
import { Flex, ICSSInJSStyle, Menu, Provider, Segment } from '@fluentui/react'
8+
import {
9+
ComponentVariablesInput,
10+
Flex,
11+
ICSSInJSStyle,
12+
Menu,
13+
Provider,
14+
Segment,
15+
ThemeInput,
16+
} from '@fluentui/react'
917
import * as _ from 'lodash'
1018
import * as React from 'react'
1119
import { RouteComponentProps, withRouter } from 'react-router-dom'
@@ -23,7 +31,6 @@ import ComponentExampleTitle from './ComponentExampleTitle'
2331
import ComponentSourceManager, {
2432
ComponentSourceManagerRenderProps,
2533
} from '../ComponentSourceManager'
26-
import { ThemeInput } from 'packages/react/src/themes/types'
2734
import VariableResolver from 'docs/src/components/VariableResolver/VariableResolver'
2835
import ComponentExampleVariables from 'docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables'
2936

@@ -43,7 +50,7 @@ export interface ComponentExampleProps
4350

4451
interface ComponentExampleState {
4552
anchorName: string
46-
componentVariables: Object
53+
componentVariables: ComponentVariablesInput
4754
isActive: boolean
4855
isActiveHash: boolean
4956
usedVariables: Record<string, string[]>
@@ -53,7 +60,7 @@ interface ComponentExampleState {
5360
showVariables: boolean
5461
}
5562

56-
const childrenStyle: React.CSSProperties = {
63+
const childrenStyle: ICSSInJSStyle = {
5764
paddingTop: 0,
5865
paddingBottom: '10px',
5966
}

‎docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import {
2+
callable,
23
Grid,
34
Header,
45
Segment,
56
ProviderContextPrepared,
67
ThemeComponentVariablesPrepared,
78
} from '@fluentui/react'
8-
import { callable } from '@fluentui/react-bindings'
99
import * as _ from 'lodash'
1010
import * as React from 'react'
1111
// @ts-ignore
1212
import { ThemeContext } from 'react-fela'
1313

1414
import ComponentExampleVariable, { ComponentExampleVariableProps } from './ComponentExampleVariable'
15-
import { mergeThemeVariables } from '@fluentui/react/src/utils/mergeThemes'
15+
import { mergeThemeVariables } from '@fluentui/styles'
1616

1717
type ComponentExampleVariablesProps = {
1818
onChange: ComponentExampleVariableProps['onChange']

‎docs/src/components/ComponentDoc/ComponentProp/ComponentPropExtra.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { Extendable } from 'src/types'
2+
import { Extendable } from '@fluentui/react'
33

44
export interface ComponentPropExtraProps {
55
children?: JSX.Element[]

‎docs/src/components/ComponentDoc/ComponentProps/ComponentPropCard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react'
22
import ComponentTableProps from '../ComponentPropsTable'
3-
import { Divider, Segment } from '@fluentui/react/src'
3+
import { Divider, ICSSInJSStyle, Segment } from '@fluentui/react'
44

5-
export const cardStyle: React.CSSProperties = {
5+
export const cardStyle: ICSSInJSStyle = {
66
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
77
}
88

‎docs/src/components/ComponentDoc/ExampleSection.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import * as React from 'react'
2-
import { Grid, Header } from '@fluentui/react'
2+
import { Grid, Extendable, Header, ICSSInJSStyle } from '@fluentui/react'
33

4-
import { Extendable } from 'src/types'
5-
6-
const headerStyle: React.CSSProperties = {
4+
const headerStyle: ICSSInJSStyle = {
75
marginTop: '1.5em',
86
marginBottom: '0.5em',
97
color: '#999',

‎docs/src/components/DocsBehaviorRoot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as _ from 'lodash'
22
import * as PropTypes from 'prop-types'
33
import * as React from 'react'
4-
import { Header, Segment, Divider } from '@fluentui/react'
4+
import { Header, Segment, Divider, ICSSInJSStyle } from '@fluentui/react'
55
import DocumentTitle from 'react-document-title'
66
import ComponentExampleTitle from './ComponentDoc/ComponentExample/ComponentExampleTitle'
77
import BehaviorDescription from './ComponentDoc/BehaviorDescription'
@@ -24,7 +24,7 @@ class DocsBehaviorRoot extends React.Component<any, any> {
2424
}
2525

2626
render() {
27-
const exampleStyle: React.CSSProperties = {
27+
const exampleStyle: ICSSInJSStyle = {
2828
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.2)',
2929
}
3030

‎docs/src/components/DocsLayout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { withRouter } from 'react-router-dom'
66

77
import Sidebar from 'docs/src/components/Sidebar/Sidebar'
88
import { scrollToAnchor } from 'docs/src/utils'
9-
import { mergeThemes } from '@fluentui/react/src/utils'
9+
import { mergeThemes } from '@fluentui/styles'
1010

1111
const anchors = new AnchorJS({
1212
class: 'anchor-link',

‎docs/src/components/Sidebar/Sidebar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import {
1010
Input,
1111
Segment,
1212
Text,
13+
ShorthandValue,
1314
} from '@fluentui/react'
1415
import { CopyToClipboard } from '@fluentui/docs-components'
15-
import { ShorthandValue } from '../../../../packages/react/src/types'
1616
import Logo from 'docs/src/components/Logo/Logo'
1717
import { getComponentPathname } from 'docs/src/utils'
1818
import keyboardKey from 'keyboard-key'

‎docs/src/components/VariableResolver/useEnhancedRenderer.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { callable } from '@fluentui/react-bindings'
1+
import { callable } from '@fluentui/styles'
22
import { ComponentSlotStylesPrepared, Renderer } from '@fluentui/react'
33
import flat from 'flat'
44
import * as _ from 'lodash'

‎docs/src/examples/components/Slider/commonScreenerSteps.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Slider } from '@fluentui/react/src'
1+
import { Slider } from '@fluentui/react'
22

33
const selectors = {
44
input: `.${Slider.slotClassNames.input}`,

‎docs/src/prototypes/Prototypes.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import * as React from 'react'
2-
import { Box, Header, Segment } from '@fluentui/react'
2+
import { Box, Header, ICSSInJSStyle, Segment } from '@fluentui/react'
33

44
interface PrototypeSectionProps {
55
title?: React.ReactNode
6-
styles?: React.CSSProperties
6+
styles?: ICSSInJSStyle
77
}
88

99
interface ComponentPrototypeProps extends PrototypeSectionProps {

‎docs/src/prototypes/chatPane/composeMessage.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
MenuItemProps,
99
ShorthandCollection,
1010
IconXSpacing,
11+
ICSSInJSStyle,
1112
} from '@fluentui/react'
1213

1314
import { Props } from 'src/types'
@@ -52,7 +53,7 @@ const ComposeMessage: React.FunctionComponent<ComposeMessageProps> = props => (
5253
/>
5354
)
5455

55-
const getInputWrapperStyles = ({ attached }: ComposeMessageProps): React.CSSProperties => {
56+
const getInputWrapperStyles = ({ attached }: ComposeMessageProps): ICSSInJSStyle => {
5657
const borderTopRadius = '3px'
5758
const borderBottomRadius = '2px'
5859
const borderWidth = '1px'

‎docs/src/prototypes/chatPane/services/messageFactoryMock.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
Attachment,
3+
Extendable,
34
Popup,
45
Menu,
56
AvatarProps,
@@ -10,7 +11,7 @@ import {
1011
import * as React from 'react'
1112
import * as _ from 'lodash'
1213
import * as keyboardKey from 'keyboard-key'
13-
import { Extendable, ShorthandValue } from 'src/types'
14+
import { ShorthandValue } from 'src/types'
1415
import { ChatData, UserStatus, MessageData, UserData, areSameDay, getFriendlyDateString } from '.'
1516

1617
export enum ChatItemTypes {

‎docs/src/prototypes/employeeCard/AvatarEmployeeCard.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react'
2-
import { Avatar, Popup } from '@fluentui/react'
2+
import { Avatar, Extendable, Popup } from '@fluentui/react'
33
import EmployeeCard, { EmployeeCardProps } from './EmployeeCard'
4-
import { Extendable } from 'src/types'
54

65
export interface AvatarEmployeeCardState {
76
popupOpen: boolean

‎docs/src/prototypes/employeeCard/EmployeeCard.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
2-
import { Extendable, ShorthandValue } from 'src/types'
3-
import { Avatar, AvatarProps, Divider, Grid } from '@fluentui/react'
2+
import { ShorthandValue } from 'src/types'
3+
import { Avatar, AvatarProps, Divider, Extendable, Grid } from '@fluentui/react'
44
import CustomText from './CustomText'
55

66
export interface EmployeeCardProps {

‎packages/code-sandbox/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
"author": "Oleksandr Fediashov <[email protected]>",
66
"bugs": "https://github.com/microsoft/fluent-ui-react/issues",
77
"dependencies": {
8-
"@fluentui/react": "^0.43.0"
8+
"@fluentui/docs-components": "^0.43.0",
9+
"@fluentui/react": "*"
910
},
1011
"files": [
1112
"dist"

0 commit comments

Comments
 (0)