You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ There are some specific quirks to this repository that one should be familiar wi
15
15
16
16
### Old framework vs new framework (Compose V2)
17
17
18
-
There's [documentation](https://github.com/microsoft/fluentui-react-native/tree/master/packages/components) for how to author a control, specifically with the two frameworks [foundation-compose](https://github.com/microsoft/fluentui-react-native/tree/master/packages/deprecated/foundation-compose) and [foundation-composable](https://github.com/microsoft/fluentui-react-native/tree/master/packages/deprecated/foundation-composable). Since that documentation was written, we have written a new component framework (PR's [here](https://github.com/microsoft/fluentui-react-native/pull/335) and [here](https://github.com/microsoft/fluentui-react-native/pull/400)) at `packages/experimental/framework` that is simpler/easier to use, and is the new preferred way to create components. Components that use this new framework are located at `packages/experimental` and are copies of the controls located at `packages/components` which still uses the old frameworks. Any new components should use the new framework. The old documentation is still good to read, specifically for using foundation-compose, as a lot of it applies to the new component.
18
+
There's [documentation](./packages/components/README.md) for how to author a control, specifically with the two frameworks [foundation-compose](./packages/deprecated/foundation-compose/README.md) and [foundation-composable](./packages/deprecated/foundation-composable/README.md). Since that documentation was written, we have written a new component framework (PR's [here](https://github.com/microsoft/fluentui-react-native/pull/335) and [here](https://github.com/microsoft/fluentui-react-native/pull/400)) at `packages/experimental/framework` that is simpler/easier to use, and is the new preferred way to create components. Components that use this new framework are located at `packages/experimental` and are copies of the controls located at `packages/components` which still uses the old frameworks. Any new components should use the new framework. The old documentation is still good to read, specifically for using foundation-compose, as a lot of it applies to the new component.
19
19
20
20
There are two directories where components exist, the normal `packages/components` and `packages/experimental`. In general, the `experimental` directory is where components and frameworks we are iterating on get placed.
21
21
@@ -31,7 +31,7 @@ One caveat is that if a component simply wraps a single native component, then i
31
31
32
32
### Tokens
33
33
34
-
FluentUI React Native (and eventually all of FluentUI) uses the design token system to handle styling / customization. There's extended [documentation](https://github.com/microsoft/fluentui-react-native/blob/master/packages/deprecated/foundation-tokens/README.md) about this in the repo, but here is a simple overview.
34
+
FluentUI React Native (and eventually all of FluentUI) uses the design token system to handle styling / customization. There's extended [documentation](./packages/deprecated/foundation-tokens/README.md) about this in the repo, but here is a simple overview.
35
35
36
36
**Tokens** are things you set at design time, via theme, or via customizing the control. An example might be "brandColor", where each app has it's own color token it sets on all if its controls.
37
37
@@ -44,7 +44,7 @@ Tokens help us achieve simpler customization for complex higher order components
44
44
45
45
This section covers creating and adding a new component package to FluentUI React Native's monorepo. If you are instead working on an existing component and adding a native module, skip to the next two sections.
46
46
47
-
Most components should use the compose framework as it offers the comprehensive set of patterns like tokens and slots, but if you're creating a simple component that doesn't require those patterns, there's a lighter pattern called [stagedComponent](https://github.com/microsoft/fluentui-react-native/blob/master/packages/framework/use-slot/src/stagedComponent.ts). The stagedComponent pattern splits up the render function into two stages. Stage 1 handles building props and hook calls (best to separate the hook calls from the render tree since they rely on call order). Stage 2 returns the actual element tree, any conditional branching should happen here (Icon is a good example of using stagedCompoenent).
47
+
Most components should use the compose framework as it offers the comprehensive set of patterns like tokens and slots, but if you're creating a simple component that doesn't require those patterns, there's a lighter pattern called [stagedComponent](./packages/framework/use-slot/src/stagedComponent.ts). The stagedComponent pattern splits up the render function into two stages. Stage 1 handles building props and hook calls (best to separate the hook calls from the render tree since they rely on call order). Stage 2 returns the actual element tree, any conditional branching should happen here (Icon is a good example of using stagedCompoenent).
48
48
49
49
1. Create a new directory in of these two locations, depending on your component:
| focusZoneDirection |[FocusZoneDirection](https://github.com/microsoft/fluentui-react-native/new/master/docs/pages/Components#focuszonedirection-type)| FocusZoneDirection.bidirectional | Defines which arrows to respond to. |
29
-
| disabled | boolean | false | If set, the FocusZone will not be tabbable and keyboard navigation will be disabled. |
30
-
| isCircularNavigation | boolean | false | If set, when navigating next from the last element, focus will circle back to the first. And vice versa. |
31
-
| defaultTabbableElement | React.RefObject<React.Component> | none | Optionally defined the initial tabbable element inside the FocusZone. If set, when navigating to the FocusZone, focus wil land on this element. |
32
-
| use2DNavigation | boolean | false | Allows for 2D navigation. This navigation strategy takes into account the position of elements on screen, and navigates in the direction the user selects to the nearest element. |
33
-
| onFocus() | (e?: any) => void; | None | Callback called when “focus” event triggered in FocusZone |
34
-
| componentRef | React.RefObject<IFocusable>; | None | A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component. |
| focusZoneDirection |[FocusZoneDirection](./FocusZone.md#focuszonedirection-type)| FocusZoneDirection.bidirectional | Defines which arrows to respond to. |
29
+
| disabled | boolean | false | If set, the FocusZone will not be tabbable and keyboard navigation will be disabled. |
30
+
| isCircularNavigation | boolean | false | If set, when navigating next from the last element, focus will circle back to the first. And vice versa. |
31
+
| defaultTabbableElement | React.RefObject<React.Component> | none | Optionally defined the initial tabbable element inside the FocusZone. If set, when navigating to the FocusZone, focus wil land on this element. |
32
+
| use2DNavigation | boolean | false | Allows for 2D navigation. This navigation strategy takes into account the position of elements on screen, and navigates in the direction the user selects to the nearest element. |
33
+
| onFocus() | (e?: any) => void; | None | Callback called when “focus” event triggered in FocusZone |
34
+
| componentRef | React.RefObject<IFocusable>; | None | A RefObject to access the IFocusable interface. Use this to access the public methods and properties of the component. |
Copy file name to clipboardExpand all lines: docs/pages/Guides/PortingFromFluentUI.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -11,4 +11,4 @@ FURN is a React Native based component library, so there will be a few differenc
11
11
12
12
## Styling
13
13
14
-
CSS is not available in React Native, so styling must be applied to elements directly instead of using classNames or other selectors. A good way to ensure that styles are passed through a tree is to use a `ThemeProvider`. More information about our theming can be found [here](https://github.com/microsoft/fluentui-react-native/tree/master/docs/pages/Theming)
14
+
CSS is not available in React Native, so styling must be applied to elements directly instead of using classNames or other selectors. A good way to ensure that styles are passed through a tree is to use a `ThemeProvider`. More information about our theming can be found [here](../Theming)
Copy file name to clipboardExpand all lines: docs/pages/Guides/UpdateThemeProvider.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ We have a deprecated ThemeProvider which takes in a `ThemeRegistry`. The new The
6
6
7
7
The new `ThemeProvider` takes in a different object as its value, a `ThemeReference`, so you'll need to convert your `ThemeRegistry` into a `ThemeReference` in order to use the new `ThemeProvider`.
8
8
9
-
If you were using `createPlatformThemeRegistry(<paletteName>)` to create your `ThemeRegistry`, you can get an equivalent `ThemeReference` by calling `createOfficeTheme({ paletteName: <paletteName> })` instead. Details on `createOfficeTheme` can be found [here](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/DefaultThemes.md#integration-with-office).
9
+
If you were using `createPlatformThemeRegistry(<paletteName>)` to create your `ThemeRegistry`, you can get an equivalent `ThemeReference` by calling `createOfficeTheme({ paletteName: <paletteName> })` instead. Details on `createOfficeTheme` can be found [here](../Theming/DefaultThemes.md#integration-with-office).
10
10
11
11
The gist is that what used to be the `ProcessTheme` function passed into the `ThemeRegistry`'s `setTheme` can now be turned into a `ThemeRecipe` passed into the `ThemeReference`. So where a `ThemeRegistry` might have had:
12
12
@@ -33,7 +33,7 @@ const themeRef = new ThemeReference(
33
33
);
34
34
```
35
35
36
-
`ThemeReferences` can also take advantage of our [default themes](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/DefaultThemes.md). Learn how to create custom themes [here](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/CustomTheme.md).
36
+
`ThemeReferences` can also take advantage of our [default themes](../Theming/DefaultThemes.md). Learn how to create custom themes [here](../Theming/CustomTheme.md).
Copy file name to clipboardExpand all lines: docs/pages/Guides/UpdatingCustomize.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Migrating from old to new customize
2
2
3
-
The customize API allows clients to make targeted styling modifications to our controls. The second version of the FluentUI composition framework changes the customize API. This guide will describe how to move from the first to second customize API for our refreshed controls.
3
+
The customize API allows clients to make targeted styling modifications to our controls. The second version of the FluentUI composition framework changes the customize API. This guide will describe how to move from the first to second customize API for our refreshed controls.
4
4
5
5
## Old customize
6
6
@@ -59,7 +59,7 @@ All states that were previously under `_overrides` are now at the top level of t
59
59
60
60
### No `_precedence` property
61
61
62
-
There is no equivalent for `_precedence` in the new customize API. If you need this functionality, [please look at using `compose` instead](https://github.com/microsoft/fluentui-react-native/tree/master/packages/framework/composition#compose).
62
+
There is no equivalent for `_precedence` in the new customize API. If you need this functionality, [please look at using `compose` instead](../../../packages/framework/composition/README.md#compose).
Copy file name to clipboardExpand all lines: docs/pages/Theming/ColorTokens/Basics.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ Global tokens can be imported directly:
14
14
15
15
`import { globalTokens } from '@fluentui-react-native\theme-tokens'`
16
16
17
-
If accessing a specific color, you can find it in the `globalTokens.color` property. The token object can be found [here](https://github.com/microsoft/fluentui-react-native/blob/master/packages/theming/theme-tokens/src/generated/global/reactnative/tokens-global.json) or [here for win32](https://github.com/microsoft/fluentui-react-native/blob/master/packages/theming/theme-tokens/src/generated/global-win32/reactnative/tokens-global.json).
17
+
If accessing a specific color, you can find it in the `globalTokens.color` property. The token object can be found [here](../../../../packages/theming/theme-tokens/src/generated/global/reactnative/tokens-global.json) or [here for win32](../../../../packages/theming/theme-tokens/src/generated/global-win32/reactnative/tokens-global.json).
18
18
19
19
An example of usage is in our PersonaCoin, where we use colors for the coin background if an image is not used.
Our [Tab control](https://github.com/microsoft/fluentui-react-native/blob/master/packages/experimental/Tabs/src/TabsItemTokens.ts) uses this system to integrate alias tokens.
52
+
Our [Tab control](../../../../packages/experimental/Tabs/src/TabsItemTokens.ts) uses this system to integrate alias tokens.
This hook is what the `compose` framework uses to create style tokens based on the current theme. You can read more on `useTokens`[here](https://github.com/microsoft/fluentui-react-native/tree/master/packages/framework/use-tokens).
78
+
This hook is what the `compose` framework uses to create style tokens based on the current theme. You can read more on `useTokens`[here](../../../../packages/framework/use-tokens/README.md).
Copy file name to clipboardExpand all lines: docs/pages/Theming/DefaultThemes.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -46,7 +46,7 @@ const AppContent = () => {
46
46
};
47
47
```
48
48
49
-
You can take a look at how the palette is used to populate theme colors [here](https://github.com/microsoft/fluentui-react-native/blob/master/packages/theming/win32-theme/src/paletteFromOfficeColors.ts) and [here](https://github.com/microsoft/fluentui-react-native/blob/master/packages/theming/win32-theme/src/createAliasesFromPalette.ts).
49
+
You can take a look at how the palette is used to populate theme colors [here](../../../packages/theming/win32-theme/src/paletteFromOfficeColors.ts) and [here](../../../packages/theming/win32-theme/src/createAliasesFromPalette.ts).
For more detailed information, check out [our README](https://github.com/microsoft/fluentui-react-native/blob/master/packages/framework/themed-stylesheet/README.md).
46
+
For more detailed information, check out [our README](../../../packages/framework/themed-stylesheet/README.md).
0 commit comments