Updating docs on how to extend the tokens #33229

mltejera · 2024-11-07T19:40:43Z

Leave's Shift's existing migration docs in place so as to not break any current links.

Copies the whole document to the current docs folder.

Takes a subset of that out and moves it to

The patterns folder
The Storybook theming section (these new docs are The Way)

github-actions · 2024-11-07T19:45:05Z

📊 Bundle size report

✅ No changes found

github-actions · 2024-11-07T19:50:08Z

Pull request demo site: URL

layershifter · 2024-11-08T12:34:46Z

docs/react-v9/contributing/migration-notes.md

@@ -0,0 +1,407 @@
+# Migration notes from `@fluentui/[email protected]`to `@fluentui/[email protected]`


Not sure that we want to this document in a new location. It was good in its time, some info in it is already outdated.

Yeah agreed. The shorthands info is definitely out of date.

Removed this doc from the PR.

layershifter · 2024-11-08T12:35:41Z

apps/public-docsite-v9/src/Concepts/Theming.stories.mdx


-⚠ Components which use custom tokens cannot be shared between applications. Keep in mind that any application which uses a component with custom tokens must also add the custom tokens to its own themes. Instead of adding custom tokens inside potentially reusable components, you should talk to design.
+⚠ Components in this repo should _not_ do this.


It's in public docsite, so we probably don't need this

layershifter · 2024-11-08T12:36:10Z

apps/public-docsite-v9/src/Concepts/Theming.stories.mdx

+```

-⚠ Keep in mind that the object generated by the `themeToTokensObject()` will contain all the tokens and will not be tree-shakeable.
+```

-```tsx
-import { themeToTokensObject } from '@fluentui/react-components';
+```

-export const customTokens = themeToTokensObject(customLightTheme);
 ```


Delete this empty blocks?

Good catch - removed

mainframev

A few typos only and suggestion is up to you 🙂

mainframev · 2024-11-08T12:54:14Z

docs/react-v9/contributing/migration-notes.md

@@ -0,0 +1,407 @@
+# Migration notes from `@fluentui/[email protected]`to `@fluentui/[email protected]`
+


Wdyt about adding ToC?

Suggested change

---

1. [Migration notes from `@fluentui/[email protected]` to `@fluentui/[email protected]`](#migration-notes-from-fluentuireact-components900-beta5-to-fluentuireact-components900-rc1)

2. [Changes to the styling system](#changes-to-the-styling-system)

- [Functions no longer supported](#functions-no-longer-supported)

- [CSS shorthands no longer supported](#css-shorthands-no-longer-supported)

- [makeStyles is now Griffel](#makestyles-is-now-griffel-just-rename)

3. [Changes to the theming system](#changes-to-the-theming-system)

- [Brand ramp updated](#brand-ramp-updated)

- [Tokens to css variables mapping is now exported](#tokens-to-css-variables-mapping-is-now-exported)

- [Custom tokens can now be passed as part of the Theme](#custom-tokens-can-now-be-passed-as-part-of-the-theme)

- [`themeToCSSVariables()` was removed](#themetocssvariables-was-removed)

4. [Typings & exports](#typings--exports)

- [Hooks are now exported with "_unstable" suffix](#hooks-are-now-exported-with-unstable-suffix)

- [`*Commons` types are no longer exported](#commons-types-are-no-longer-exported)

- [Removed functionality & exports](#removed-functionality--exports)

- [`useTheme()` hook is no longer exported](#usetheme-hook-is-no-longer-exported)

- [`mergeThemes()` function has been removed](#mergethemes-function-has-been-removed)

- [`*shorthandProps` removed](#shorthandprops-removed)

5. [Slot utilities have been updated and renamed](#slot-utilities-have-been-updated-and-renamed)

- [The `getSlots` function has been updated](#the-getslots-function-has-been-updated)

- [New `Slot` type, and renamed slot utility types](#new-slot-type-and-renamed-slot-utility-types)

6. [Component changes](#component-changes)

- [Accordion](#accordion)

- [Avatar](#avatar)

- [Button](#button)

- [Checkbox](#checkbox)

- [CompoundButton](#compoundbutton)

- [Icons](#icons)

- [FluentProvider](#fluentprovider)

- [Menu](#menu)

- [MenuButton](#menubutton)

- [ToggleButton](#togglebutton)

- [Tooltip](#tooltip)

---

mainframev · 2024-11-08T12:59:12Z

docs/react-v9/contributing/migration-notes.md

+[CSS shorthands](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) in `makeStyles()` calls are no longer supported. For many shorthands there exist matching functions in `@fluentui/react-components`:
+
+```ts
+import { shorthands } from '@fluentui/react-componenents';


typo 🙂

Suggested change

import { shorthands } from '@fluentui/react-componenents';

import { shorthands } from '@fluentui/react-components';

mainframev · 2024-11-08T12:59:22Z

docs/react-v9/contributing/migration-notes.md

+
+```diff
+import { makeStyles } from '@fluentui/react-componenents';
+import { makeStyles, shorthands } from '@fluentui/react-componenents';


Suggested change

+import { makeStyles, shorthands } from '@fluentui/react-componenents';

+import { makeStyles, shorthands } from '@fluentui/react-components';

mainframev · 2024-11-08T12:59:53Z

docs/react-v9/contributing/migration-notes.md

+Please apply following changes:
+
+```diff
+import { makeStyles } from '@fluentui/react-componenents';


Suggested change

import { makeStyles } from '@fluentui/react-componenents';

import { makeStyles } from '@fluentui/react-components';

spmonahan · 2024-11-08T17:00:12Z

docs/react-v9/contributing/migration-notes.md

+
+### CSS shorthands no longer supported
+
+[CSS shorthands](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) in `makeStyles()` calls are no longer supported. For many shorthands there exist matching functions in `@fluentui/react-components`:


This isn't really accurate anymore right? https://griffel.js.org/react/guides/limitations#some-of-css-shorthands-are-not-supported

I think we should update this.

spmonahan · 2024-11-08T17:01:26Z

docs/react-v9/contributing/migration-notes.md

@@ -0,0 +1,407 @@
+# Migration notes from `@fluentui/[email protected]`to `@fluentui/[email protected]`


Yeah agreed. The shorthands info is definitely out of date.

mltejera added 2 commits November 7, 2024 11:33

Updating theme extension docs

b95dfd6

small tweaks

10c3de0

mltejera requested review from a team as code owners November 7, 2024 19:40

khmakoto approved these changes Nov 8, 2024

View reviewed changes

layershifter reviewed Nov 8, 2024

View reviewed changes

layershifter approved these changes Nov 8, 2024

View reviewed changes

mainframev requested changes Nov 8, 2024

View reviewed changes

microsoft-github-policy-service bot added the Needs: Author Feedback label Nov 8, 2024

spmonahan reviewed Nov 8, 2024

View reviewed changes

Delete docs/react-v9/contributing/migration-notes.md

ee9eb1f

microsoft-github-policy-service bot removed the Needs: Author Feedback label Nov 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updating docs on how to extend the tokens #33229

Updating docs on how to extend the tokens #33229

mltejera commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024

layershifter Nov 8, 2024

spmonahan Nov 8, 2024

mltejera Nov 15, 2024

layershifter Nov 8, 2024

layershifter Nov 8, 2024

mltejera Nov 15, 2024

mainframev left a comment

mainframev Nov 8, 2024

mainframev Nov 8, 2024

mainframev Nov 8, 2024

mainframev Nov 8, 2024

spmonahan Nov 8, 2024

spmonahan Nov 8, 2024

		@@ -0,0 +1,407 @@
		# Migration notes from `@fluentui/[email protected]`to `@fluentui/[email protected]`


		⚠ Components which use custom tokens cannot be shared between applications. Keep in mind that any application which uses a component with custom tokens must also add the custom tokens to its own themes. Instead of adding custom tokens inside potentially reusable components, you should talk to design.
		⚠ Components in this repo should _not_ do this.

+---
+. [Migration notes from `@fluentui/[email protected]` to `@fluentui/[email protected]`](#migration-notes-from-fluentuireact-components900-beta5-to-fluentuireact-components900-rc1)
+. [Changes to the styling system](#changes-to-the-styling-system)
+   - [Functions no longer supported](#functions-no-longer-supported)
+   - [CSS shorthands no longer supported](#css-shorthands-no-longer-supported)
+   - [makeStyles is now Griffel](#makestyles-is-now-griffel-just-rename)
+. [Changes to the theming system](#changes-to-the-theming-system)
+   - [Brand ramp updated](#brand-ramp-updated)
+   - [Tokens to css variables mapping is now exported](#tokens-to-css-variables-mapping-is-now-exported)
+   - [Custom tokens can now be passed as part of the Theme](#custom-tokens-can-now-be-passed-as-part-of-the-theme)
+   - [`themeToCSSVariables()` was removed](#themetocssvariables-was-removed)
+. [Typings & exports](#typings--exports)
+   - [Hooks are now exported with "_unstable" suffix](#hooks-are-now-exported-with-unstable-suffix)
+   - [`*Commons` types are no longer exported](#commons-types-are-no-longer-exported)
+   - [Removed functionality & exports](#removed-functionality--exports)
+     - [`useTheme()` hook is no longer exported](#usetheme-hook-is-no-longer-exported)
+     - [`mergeThemes()` function has been removed](#mergethemes-function-has-been-removed)
+     - [`*shorthandProps` removed](#shorthandprops-removed)
+. [Slot utilities have been updated and renamed](#slot-utilities-have-been-updated-and-renamed)
+   - [The `getSlots` function has been updated](#the-getslots-function-has-been-updated)
+   - [New `Slot` type, and renamed slot utility types](#new-slot-type-and-renamed-slot-utility-types)
+. [Component changes](#component-changes)
+   - [Accordion](#accordion)
+   - [Avatar](#avatar)
+   - [Button](#button)
+   - [Checkbox](#checkbox)
+   - [CompoundButton](#compoundbutton)
+   - [Icons](#icons)
+   - [FluentProvider](#fluentprovider)
+   - [Menu](#menu)
+   - [MenuButton](#menubutton)
+   - [ToggleButton](#togglebutton)
+   - [Tooltip](#tooltip)
+---

	import { shorthands } from '@fluentui/react-componenents';
	import { shorthands } from '@fluentui/react-components';

	+import { makeStyles, shorthands } from '@fluentui/react-componenents';
	+import { makeStyles, shorthands } from '@fluentui/react-components';

	import { makeStyles } from '@fluentui/react-componenents';
	import { makeStyles } from '@fluentui/react-components';


		### CSS shorthands no longer supported

		[CSS shorthands](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) in `makeStyles()` calls are no longer supported. For many shorthands there exist matching functions in `@fluentui/react-components`:

Updating docs on how to extend the tokens #33229

Are you sure you want to change the base?

Updating docs on how to extend the tokens #33229

Conversation

mltejera commented Nov 7, 2024 • edited Loading

github-actions bot commented Nov 7, 2024 • edited Loading

📊 Bundle size report

github-actions bot commented Nov 7, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mainframev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mltejera commented Nov 7, 2024 •

edited

Loading

github-actions bot commented Nov 7, 2024 •

edited

Loading