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

Commit cebccfc

Browse files
layershifterlayershifter
committed
fix 4
1 parent 24a5aef commit cebccfc

File tree

13 files changed

+253
-123
lines changed

13 files changed

+253
-123
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as PropTypes from 'prop-types'
22
import * as React from 'react'
3-
4-
import { Icon, Segment, Text, ICSSInJSStyle } from '@fluentui/react'
3+
import { ICSSInJSStyle } from '@fluentui/styles'
4+
import { Icon, Segment, Text } from '@fluentui/react'
55
import { constants } from '@fluentui/react/src/utils'
66

77
const wrapStyle: ICSSInJSStyle = { wordBreak: 'break-word' }

‎docs/src/examples/components/Status/Types/StatusExample.shorthand.tsx

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,20 @@ import { compose } from '@fluentui/react-bindings'
33
import * as React from 'react'
44
import * as PropTypes from 'prop-types'
55

6-
const MyStatus = compose<{ title: never; disabled?: boolean; name: string }>(Status, {
7-
displayName: 'MyStatus',
8-
mapPropsToBehavior: props => {
9-
return {
10-
name: props.name,
11-
}
12-
},
13-
mapPropsToStyles: props => ({
14-
disabled: props.disabled,
15-
}),
16-
// Existing
17-
// handledProps: ['disabled']
18-
// Emotion approach
19-
shouldForwardProp: prop => prop === 'disabled',
20-
overrideStyles: true,
21-
})
6+
// const MyStatus = compose<{ title: never; disabled?: boolean; name: string }>(Status, {
7+
// displayName: 'MyStatus',
8+
// mapPropsToBehavior: props => ({
9+
// name: props.name,
10+
// }),
11+
// mapPropsToStyles: props => ({
12+
// disabled: props.disabled,
13+
// }),
14+
// // Existing
15+
// // handledProps: ['disabled']
16+
// // Emotion approach
17+
// shouldForwardProp: propName => propName === 'disabled',
18+
// overrideStyles: true,
19+
// })
2220

2321
const StatusWithProp = compose<{ square?: boolean }>(Status, {
2422
displayName: 'SquareStatus',
@@ -45,11 +43,11 @@ const StatusExampleShorthand = () => (
4543
<h2>
4644
Composed <code>MyStatus</code>
4745
</h2>
48-
<MyStatus
46+
{/* <MyStatus
4947
accessibility={props => ({ attributes: { root: { 'data-shift': props.name } } })}
5048
name="Hoba!"
5149
/>
52-
<MyStatus disabled />
50+
<MyStatus disabled /> */}
5351
</>
5452
)
5553

‎packages/react-bindings/src/hooks/useStyles.ts

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,48 @@ import * as React from 'react'
44
import { ThemeContext } from 'react-fela'
55

66
import {
7+
ComponentSlotStylesPrepared,
8+
ComponentStyleFunctionParam,
79
emptyTheme,
810
mergeComponentStyles,
911
mergeComponentVariables,
10-
} from '@fluentui/react/src/utils/mergeThemes'
11-
import {
12-
ComponentSlotStylesPrepared,
13-
ComponentStyleFunctionParam,
14-
ProviderContextPrepared,
15-
} from '@fluentui/react'
16-
import resolveStylesAndClasses from '@fluentui/react/src/utils/resolveStylesAndClasses'
12+
} from '@fluentui/styles'
13+
import { ProviderContextPrepared } from '@fluentui/react'
14+
import resolveStylesAndClasses from '../styles/resolveStylesAndClasses'
1715

18-
const useStyles = (displayName: string | string[], options: any) => {
19-
const className = options.className || 'no-classname-🙉'
20-
const rtl = options.rtl || false
21-
const props = options.mapPropsToStyles()
22-
const { className: userClassName, styles, design, variables } = options.mapInlineToStyles()
16+
type UseStylesOptions<StyleProps> = {
17+
className?: string
18+
mapPropsToStyles?: () => StyleProps
19+
mapPropsToInlineStyles?: () => InlineStyleProps // Consider better name
20+
rtl?: boolean
21+
}
2322

24-
const context: ProviderContextPrepared = React.useContext(ThemeContext)
23+
type InlineStyleProps = {
24+
className?: string
25+
design?: any // TODO type
26+
styles?: any // TODO type
27+
variables?: any // TODO type
28+
}
29+
30+
const useStyles = <StyleProps>(
31+
displayName: string | string[],
32+
options: UseStylesOptions<StyleProps>,
33+
) => {
34+
const {
35+
className = 'no-classname-🙉',
36+
mapPropsToStyles = () => ({} as StyleProps),
37+
mapPropsToInlineStyles = () => ({} as InlineStyleProps),
38+
rtl = false,
39+
} = options
2540

41+
const context: ProviderContextPrepared = React.useContext(ThemeContext)
2642
const { disableAnimations = false, renderer = null, theme = emptyTheme } = context || {}
2743

44+
// TODO: throw if there is no context
45+
46+
const props = mapPropsToStyles()
47+
const { className: userClassName, styles, design, variables } = mapPropsToInlineStyles()
48+
2849
const componentVariables = Array.isArray(displayName)
2950
? displayName.map(displayName => theme.componentVariables[displayName])
3051
: [theme.componentVariables[displayName]]
@@ -37,7 +58,7 @@ const useStyles = (displayName: string | string[], options: any) => {
3758
...componentVariables,
3859
variables,
3960
)(theme.siteVariables)
40-
console.log(componentStyles, props)
61+
4162
// Resolve styles using resolved variables, merge results, allow props.styles to override
4263
const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
4364
...componentStyles,

‎packages/react/src/utils/createAnimationStyles.tsx renamed to ‎packages/react-bindings/src/styles/createAnimationStyles.tsx

File renamed without changes.

‎packages/react-bindings/src/styles/getStyles.ts

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import cx from 'classnames'
2+
import * as _ from 'lodash' // REMOVE ME PLEASE!
3+
4+
import callable from '../utils/callable'
5+
import {
6+
ComponentSlotStylesPrepared,
7+
ComponentStyleFunctionParam,
8+
ComponentVariablesObject,
9+
DebugData,
10+
emptyTheme,
11+
isDebugEnabled,
12+
mergeComponentStyles,
13+
mergeComponentVariables,
14+
PropsWithVarsAndStyles,
15+
withDebugId,
16+
} from '@fluentui/styles'
17+
18+
import createAnimationStyles from './createAnimationStyles'
19+
import resolveStylesAndClasses from './resolveStylesAndClasses'
20+
import { ComponentSlotClasses, ProviderContextPrepared } from '@fluentui/react' // TODO fix me
21+
22+
export interface RenderResultConfig {
23+
classes: ComponentSlotClasses
24+
variables: ComponentVariablesObject
25+
styles: ComponentSlotStylesPrepared
26+
}
27+
28+
export interface RenderConfig {
29+
className?: string
30+
displayName: string
31+
props: PropsWithVarsAndStyles
32+
saveDebug: (debug: DebugData | null) => void
33+
}
34+
35+
const getStyles = (options: any, context?: ProviderContextPrepared): RenderConfig => {
36+
const { displayName, className, props, saveDebug } = options
37+
38+
// const displayName = ''
39+
// const className = ''
40+
// const props = {} // include state
41+
// const saveDebug = () => {}
42+
43+
const {
44+
disableAnimations = false,
45+
renderer = null,
46+
rtl = false,
47+
theme = emptyTheme,
48+
_internal_resolvedComponentVariables: resolvedComponentVariables = {},
49+
} = context || {}
50+
51+
// Resolve variables for this component, cache the result in provider
52+
if (!resolvedComponentVariables[displayName]) {
53+
resolvedComponentVariables[displayName] =
54+
callable(theme.componentVariables[displayName])(theme.siteVariables) || {} // component variables must not be undefined/null (see mergeComponentVariables contract)
55+
}
56+
57+
// Merge inline variables on top of cached variables
58+
const resolvedVariables = props.variables
59+
? mergeComponentVariables(
60+
resolvedComponentVariables[displayName],
61+
withDebugId(props.variables, 'props.variables'),
62+
)(theme.siteVariables)
63+
: resolvedComponentVariables[displayName]
64+
65+
const animationCSSProp = props.animation
66+
? // @ts-ignore
67+
createAnimationStyles(props.animation, context.theme)
68+
: {}
69+
70+
// Resolve styles using resolved variables, merge results, allow props.styles to override
71+
const mergedStyles: ComponentSlotStylesPrepared = mergeComponentStyles(
72+
theme.componentStyles[displayName],
73+
withDebugId({ root: props.design }, 'props.design'),
74+
withDebugId({ root: props.styles }, 'props.styles'),
75+
withDebugId({ root: animationCSSProp }, 'props.animation'),
76+
)
77+
78+
const styleParam: ComponentStyleFunctionParam = {
79+
displayName,
80+
props,
81+
variables: resolvedVariables,
82+
theme,
83+
rtl,
84+
disableAnimations,
85+
}
86+
87+
// Fela plugins rely on `direction` param in `theme` prop instead of RTL
88+
// Our API should be aligned with it
89+
// Heads Up! Keep in sync with Design.tsx render logic
90+
const direction = rtl ? 'rtl' : 'ltr'
91+
const felaParam = {
92+
theme: { direction },
93+
disableAnimations,
94+
displayName, // does not affect styles, only used by useEnhancedRenderer in docs
95+
}
96+
97+
const { resolvedStyles, resolvedStylesDebug, classes } = resolveStylesAndClasses(
98+
mergedStyles,
99+
styleParam,
100+
// @ts-ignore
101+
renderer ? style => renderer.renderRule(() => style, felaParam) : undefined,
102+
)
103+
104+
classes.root = cx(className, classes.root, props.className)
105+
106+
// conditionally add sources for evaluating debug information to component
107+
if (process.env.NODE_ENV !== 'production' && isDebugEnabled) {
108+
saveDebug({
109+
componentName: displayName,
110+
componentVariables: _.filter(
111+
resolvedVariables._debug,
112+
variables => !_.isEmpty(variables.resolved),
113+
),
114+
componentStyles: resolvedStylesDebug,
115+
siteVariables: _.filter(theme.siteVariables._debug, siteVars => {
116+
if (_.isEmpty(siteVars) || _.isEmpty(siteVars.resolved)) {
117+
return false
118+
}
119+
120+
const keys = Object.keys(siteVars.resolved)
121+
if (
122+
keys.length === 1 &&
123+
keys.pop() === 'fontSizes' &&
124+
_.isEmpty(siteVars.resolved['fontSizes'])
125+
) {
126+
return false
127+
}
128+
129+
return true
130+
}),
131+
})
132+
}
133+
134+
return {
135+
// @ts-ignore
136+
classes,
137+
variables: resolvedVariables,
138+
styles: resolvedStyles,
139+
theme,
140+
}
141+
}
142+
143+
export default getStyles

‎packages/react/src/components/Avatar/Avatar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const Avatar = React.forwardRef<HTMLDivElement, WithAsProp<AvatarProps>>((props,
6060
mapPropsToStyles: () => ({
6161
size,
6262
}),
63-
mapInlineToStyles: () => ({
63+
mapPropsToInlineStyles: () => ({
6464
className,
6565
design,
6666
styles,

‎packages/react/src/components/Status/Status.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,28 +34,38 @@ export interface StatusProps extends UIComponentProps {
3434

3535
const Status = React.forwardRef<HTMLDivElement, WithAsProp<StatusProps>>((props, ref) => {
3636
const { className, color, icon, size, state, design, styles, variables } = props
37+
// @ts-ignore
3738
const { displayName, mapPropsToBehavior, mapPropsToStyles, overrideStyles, shouldForwardProp } =
3839
props.__unstable_config || {}
3940

4041
const { rtl }: ProviderContextPrepared = React.useContext(ThemeContext)
4142
const magicName = overrideStyles
4243
? displayName || Status.displayName
4344
: [Status.displayName, displayName].filter(Boolean)
45+
// @ts-ignore
46+
// @ts-ignore
4447
const [classes, resolvedStyles] = useStyles(magicName, {
48+
// magic name is not cool, too
4549
className: (Status as any).className,
4650
mapPropsToStyles: () => ({
4751
color,
4852
size,
4953
state,
50-
...(mapPropsToStyles && mapPropsToStyles(props)),
54+
...(mapPropsToStyles && mapPropsToStyles(props)), // This is not cool
5155
}),
52-
mapInlineToStyles: () => ({
56+
mapPropsToInlineStyles: () => ({
5357
className,
5458
design,
5559
styles,
5660
variables,
5761
}),
62+
// <CallMenu />
63+
// <div className="call-menu my-custom-classname" />
5864
rtl,
65+
66+
// @ts-ignore
67+
__experimental_variant: displayName,
68+
__expirimental_overwrite: overrideStyles,
5969
})
6070
const getA11Props = useAccessibility(props.accessibility, {
6171
debugName: displayName || Status.displayName,
@@ -68,6 +78,11 @@ const Status = React.forwardRef<HTMLDivElement, WithAsProp<StatusProps>>((props,
6878
props,
6979
shouldForwardProp,
7080
)
81+
82+
// 1: shouldHandleProp should work!
83+
// 2: Fix typings, no any!
84+
// 3: const [] = useComposeConfig()
85+
7186
console.log(getA11Props('root', {}))
7287
return (
7388
<ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>

‎packages/react/src/themes/teams/components/Animation/animationStyles.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AnimationProp } from '../../../types'
2-
import createAnimationStyles from '../../../../utils/createAnimationStyles'
2+
import createAnimationStyles from '@fluentui/react-bindings/src/styles/createAnimationStyles'
33

44
export default {
55
root: () => ({

‎packages/react/src/themes/teams/index.tsx

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -59,30 +59,7 @@ const teamsTheme: ThemePrepared<TeamsThemeStylesProps> = createTheme(
5959
{
6060
siteVariables,
6161
componentVariables,
62-
componentStyles: {
63-
...componentStyles,
64-
MyStatus: {
65-
root: ({ props: p }) => ({
66-
display: 'inline-flex',
67-
background: 'pink',
68-
border: '1px',
69-
borderRadius: '9999px',
70-
height: '10px',
71-
width: '10px',
72-
73-
...(p.disabled && {
74-
background: 'gray',
75-
}),
76-
}),
77-
},
78-
SquareStatus: {
79-
root: ({ props: p }) => ({
80-
...(p.square && {
81-
borderRadius: 0,
82-
}),
83-
}),
84-
},
85-
},
62+
componentStyles,
8663
fontFaces,
8764
staticStyles,
8865
icons,

0 commit comments

Comments
 (0)