From dc96e9c54ac445396cd5e74812fd2ac1acdd15eb Mon Sep 17 00:00:00 2001 From: ling1726 Date: Fri, 9 Dec 2022 13:40:00 +0100 Subject: [PATCH 001/172] fix: DataGridRow should prevent default on spacebar (#25942) * fix: DataGridRow should prevent default on spacebar Stops the page from scrolling when a user tries to select a row with keyboard. * changefile * add `isInteractiveHTMLElement` utility * changefile --- ...-aa1eae61-6fbc-4710-af54-dfca11a221bd.json | 7 +++ ...-85e35528-741a-4bbd-8222-fe194e86f63a.json | 7 +++ .../react-components/react-table/package.json | 1 + .../DataGridRow/DataGridRow.test.tsx | 46 +++++++++++++- .../components/DataGridRow/useDataGridRow.tsx | 8 ++- .../etc/react-utilities.api.md | 8 +-- .../react-utilities/src/index.ts | 2 +- .../react-utilities/src/utils/index.ts | 2 +- .../src/utils/isHTMLElement.ts | 2 +- .../utils/isInteractiveHTMLElement.test.ts | 17 ++++++ .../src/utils/isInteractiveHTMLElement.ts | 22 +++++++ .../shouldPreventDefaultOnKeyDown.test.ts | 60 ------------------- .../utils/shouldPreventDefaultOnKeyDown.ts | 28 --------- 13 files changed, 111 insertions(+), 99 deletions(-) create mode 100644 change/@fluentui-react-table-aa1eae61-6fbc-4710-af54-dfca11a221bd.json create mode 100644 change/@fluentui-react-utilities-85e35528-741a-4bbd-8222-fe194e86f63a.json create mode 100644 packages/react-components/react-utilities/src/utils/isInteractiveHTMLElement.test.ts create mode 100644 packages/react-components/react-utilities/src/utils/isInteractiveHTMLElement.ts delete mode 100644 packages/react-components/react-utilities/src/utils/shouldPreventDefaultOnKeyDown.test.ts delete mode 100644 packages/react-components/react-utilities/src/utils/shouldPreventDefaultOnKeyDown.ts diff --git a/change/@fluentui-react-table-aa1eae61-6fbc-4710-af54-dfca11a221bd.json b/change/@fluentui-react-table-aa1eae61-6fbc-4710-af54-dfca11a221bd.json new file mode 100644 index 00000000000000..d23e44f475f813 --- /dev/null +++ b/change/@fluentui-react-table-aa1eae61-6fbc-4710-af54-dfca11a221bd.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: DataGridRow should prevent default on spacebar", + "packageName": "@fluentui/react-table", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-utilities-85e35528-741a-4bbd-8222-fe194e86f63a.json b/change/@fluentui-react-utilities-85e35528-741a-4bbd-8222-fe194e86f63a.json new file mode 100644 index 00000000000000..3441bbd96b609a --- /dev/null +++ b/change/@fluentui-react-utilities-85e35528-741a-4bbd-8222-fe194e86f63a.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: replace shouldPreventKeydown with isInteractiveHTMLElement", + "packageName": "@fluentui/react-utilities", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-table/package.json b/packages/react-components/react-table/package.json index b395e210fa8080..011c88a280c355 100644 --- a/packages/react-components/react-table/package.json +++ b/packages/react-components/react-table/package.json @@ -30,6 +30,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { + "@fluentui/keyboard-keys": "^9.0.1", "@fluentui/react-aria": "^9.3.2", "@fluentui/react-avatar": "^9.2.8", "@fluentui/react-checkbox": "^9.0.14", diff --git a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.test.tsx b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.test.tsx index 16692786205616..d0f9ca45fbb373 100644 --- a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.test.tsx +++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { fireEvent, render } from '@testing-library/react'; +import { fireEvent, render, createEvent } from '@testing-library/react'; import { DataGridRow } from './DataGridRow'; import { isConformant } from '../../testing/isConformant'; import { DataGridRowProps } from './DataGridRow.types'; @@ -81,6 +81,50 @@ describe('DataGridRow', () => { expect(toggleRow).toHaveBeenCalledTimes(1); }); + it('should prevent default on spacebar select', () => { + const ctx = mockDataGridContext({ selectableRows: true }); + const { getByRole } = render( + + {() =>
} + , + ); + + const row = getByRole('row'); + const keyDownEvent = createEvent.keyDown(row, { key: ' ', target: document.createElement('div') }); + fireEvent(row, keyDownEvent); + + expect(keyDownEvent.defaultPrevented).toBe(true); + }); + + it('should toggle row on spacebar if element is interactive', () => { + const toggleRow = jest.fn(); + const ctx = mockDataGridContext({ selectableRows: true }, { selection: { toggleRow } }); + const { getAllByRole } = render( + + {() => + + + + + + + New Item + Open Item + ... + + + +``` + +### You can map data props to children + +If you have complex code that builds up the data props, you can author your own map call to convert the data to children. + +Continuing the contextual menu button example: +If you want to keep your `menuProps` data, you can map the items to `MenuItem` children. + +```tsx + + + + + + + + {menuProps.map(menuItem => ( + {menuItem.text} + ))} + + + +``` + +## Breaking Change: Render props to slots + +In v9, components provide slots to customize parts. +If you use the render props callbacks to customize the children, items, or parts of a component, you will need to update them to use slots. + +For example, the v8 CheckBox has an onRenderLabel() callback. + +```tsx +const onRenderBoldLabel = (props: ITextFieldProps) => {props.label} + + +``` + +To customize the label for a v9 CheckBox, you would use the label slot. +The slot accepts a string literal, JSX, or a render function. + +```tsx +const StrongLabel = (props: LabelProps) => + +Customer Name +``` + +## Breaking Change: Custom styles to className + +In v9, styles are customized by using makeStyles and mergeClasses to set the className prop. +The className prop can be set on the component as well as on individual slots. + +If you have customized v8 components using the styles prop and passed custom style objects, you will need to convert them to class names. +There may not be a one-to-one mapping between the parts from a v8 styles object to the slots of a v9 component. + +For example, a v8 Persona with customized styles to display the primary text as steel blue and the secondary text to have extra top and left margin. + +```tsx +const personaStyles: Partial = { + primaryText: { + color: 'steelblue', + }, + secondaryText: { + margin: '5px 0 0 10px', + }, +}; + +; +``` + +To keep this customization in v9 Persona, you will need to create styles with makeStyles and then apply them to the associated slot. + +```tsx +const usePersonaStyles = makeStyles({ + primaryText: { + color: 'steelblue', + }, + secondaryText: { + ...shorthands.margin('5px', '0', '0', '10px'), + }, +}); + +const personaStyles = usePersonaStyles(); + +//... + +; +``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/ImportantChanges.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/ImportantChanges.stories.mdx deleted file mode 100644 index bba2de6cb427a7..00000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/ImportantChanges.stories.mdx +++ /dev/null @@ -1,182 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Important changes you should know about - -v9 introduces several paradigm shifts that were necessary to improve performance, ease development, and reduce bundle size. -This resulted in some breaking changes you will need to handle as you migrate. - -## Props vs. Children - -### v8 - -In v8, several components had props that accepted arrays of data and used a map function to render the children. -To allow control over rendering individual items, render props callbacks were added. - -Components that rendered large lists of items had lots of specific behavior (such as virtualization) hard coded within the component. - -For example, `ContextualMenuButton` takes `menuProps` containing menu data, -an optional `menuAs` to control the rendering of menu items, -and an optional `onMenuClick`. - -```tsx -const menuProps: IContextualMenuProps = { - items: [ - { - key: 'emailMessage', - text: 'Email message', - }, - { - key: 'calendarEvent', - text: 'Calendar event', - }, - ], - directionalHintFixed: true, -}; - -function _getMenu(props: IContextualMenuProps): JSX.Element { - return ; -} - -function _onMenuClick(ev?: React.SyntheticEvent) { - console.log(ev); -} - -; -``` - -### v0 - -For v0, array props are also not used. Render props callback works very similarly in v9 as it was in v0. - -### v9 - -Components in v9 give you full control of rendering items by allowing you to pass child elements instead of data props. -This allows you to define and compose children however you like: declaring JSX elements or writing your own map function. -You don't have to define and pass separate renderprops functions to control the rendering of children. - -This means that your existing code passing arrays of data will need to be updated to render child elements. - -In v9, you get much more control over menus including what component triggers the display of the menu or submenu. -By specifying the children you directly control the rendering of each child and can wire up onClick handlers directly -rather than having to figure out which menuItem was clicked. - -```tsx - - - - - - - Email message - Calendar event - - - -``` - -You can continue to leverage existing data structures by writing a map function. -With the map function separate from the Menu component, you get a lot more control. - -```tsx - - - - - - - {menuItems.map(item => {item.name}) - - - -``` - -## Custom Styling & Theming - -There are significant styling and theming differences between v8 and v9. - -### v8 - -In v8, the `styles` prop on components accepts javascript objects (IStyle). -These could be parameterized to generate styles at runtime. -Unfortunately, this has a negative impact on rendering performance. - -The ThemeProvider provided a theme object on the context. -The theme contains a collection of component styles, color palettes, fonts, and spacing values. -Components consumed the theme through the theme object in state or by using the `useTheme` hook. -Legacy themes are supported through loadTheme and the theme customizer. - -For example, a `Button` can be styled to look like a primary button when hovered. - -```tsx -const theme = useTheme(); - -const customButtonStyles: IButtonStyles = { - rootHovered: { - backgroundColor: theme.semanticColors.primaryButtonBackground, - color: theme.semanticColors.primaryButtonText, - }, -}; - -return ( - - - -); -``` - -### v0 - -In v0, `styles` and `design` prop on components accept javascript objects. Styling and theming is also possible by using `variables` and extending the theme with custom varables. -Flexible system of design variables allowed different consumers to extend their design systems in different ways. In v9, variables API is no longer available as it was one of the reasons for frequent style calculation during runtime. Instead, there was a different approach chosen in order to improve rendering performance - style overrides or CSS variables can be used to achieve similar functionality. - -Due to the high flexibility of variables, it is not possible to provide a straightforward migration plan for them. You can use the v0 debug panel to observe what styles are being applied based on variable change and transform those styles using [style transformation tool](aka.ms/perestroika). - -### v9 - -In v9, styles are created with the `makeStyles` function and combined with the `mergeClasses` function from [`@griffel/react`](https://github.com/microsoft/griffel). -Components apply styles through the `className` property. -The styles are created at build time, but never runtime (requires the use of `griffel`'s build-time optimization plugin). -This allows styles to be deduped, optimized, and bundled for significantly smaller bundles and improved CSS performance. - -There is a new theme provider in v9 named `FluentProvider` that replaces v8's `ThemeProvider`. - -FluentProvider provides a theme using css variables referencing design tokens. -The design tokens provide global colors, fonts, and spacing. -There are alias tokens for general purpose component parts (e.g. background, border). -Components consume the theme, by importing `tokens`, a collection of css var usage, and using them in `makeStyles`. - -FluentProvider can be nested multiple times in the hierarchy to create theme variations and `dir` changes for a scoped set of components. -FluentProvider does **not** have a default theme like ThemeProvider, so you'll need to set the theme at your application's root for the components to be styled correctly. - -For example, the same `Button` customization as before would be done like this. - -```tsx -const useStyles = makeStyles({ - base: { - ':hover': { - backgroundColor: tokens.colorBrandBackground, - color: tokens.colorNeutralForegroundOnBrand, - }, - }, -}); - -const customButtonStyles = useStyles(); -return ; -``` - -## Component Part Customization - -In v8, parts of components were customized through render props callbacks. -Part-specific callbacks were provided by individual components. -Many callbacks included data payloads to allow you to pass data per item into a callback. - -In v9, part customization is done through a slots mechanism. -The props for a component can define slots that allow you to replace the entire part with JSX, -properties to pass to the default slot component style, -or a render function. - -See the [Customizing Components with Slots](/docs/concepts-developer-customizing-components-with-slots--page) topic for detailed information on slots. diff --git a/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.stories.mdx new file mode 100644 index 00000000000000..1780bffbb179a2 --- /dev/null +++ b/apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.stories.mdx @@ -0,0 +1,147 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# Keeping Design Consistent + +Fluent 2 is the next version of the Fluent design language. +Fluent UI React v9 uses the Fluent 2 design language for layout and style of components. + +The design language defines a set of design tokens. +Themes consist of a property/value pair for each token. +Designers reference these tokens in the design specs detailing the layout and style of components. + +The themes in v0 and v8 were specific to component, component part, and state. +While this allowed for fine-grained control over each component's style, it led to an explosion of theme properties. +Too many theme properties can make defining new themes an arduous chore, can make themes fragile when properties are added or removed, and can leave dead theme properties behind when components stop using them. + +In v9, the theme properties are called design tokens. +They are much more general purpose. +They are partitioned by neutral vs. brand, usage (e.g. foreground, background, stroke), and state. + +This topic covers ways you can maintain a consistent theme and style during migration. + +## You can choose to live with and limit style differences during migration + +The visual style differences between v9 and previous versions are slight. +If your migration effort is small, you can migrate all at once, or if your users are OK with some inconsistency, you might decide to avoid extra effort and live with it. + +For example, you can see differences between v8's and v9's Button components when you put them side-by-side. +However, the design differences between v8's Input and v9's Button are difficult to detect. + +You can reduce the visual friction between Fluent 1 and Fluent 2 designs during migration by migrating all instances of one component type to v9. + +## You can use theme providers side-by-side + +In v0/v8, you pass the `ThemeProvider` component a theme. +This puts the theme object on React's context. +Component style methods then reference the theme properties when building styles. + +In v9, you pass the `FluentProvider` component a theme. +This defines a CSS variable for each design token. +Component CSS styles then reference the CSS variables. + +When migrating to v9, you will have v0/v8 and v9 components side-by-side. +You can wrap both `ThemeProvider` and `FluentProvider` around components. +Both `ThemeProvider` and `FluentProvider` support nesting to define a theme or partial theme at different scopes. + +```tsx +import { ThemeProvider, Button as Buttonv8, webLightTheme} from '@fluentui/react'; +import { FluentProvider, Button as Buttonv9} from '@fluentui/react-components'; + + + + Hello migration + Hello migration + + +``` + +## You can use design token styles in your own components + +Fluent UI React v9 leverages the Griffel CSS-in-JS library. +The `makeStyles` and `mergeClasses` methods are exported by `@fluentui/react-components` package. +Read [Styling Components](/docs/concepts-developer-styling-components--page) for details. + +Because `FluentProvider` defines design token values as CSS variables, you can reference them your own component styles. +Read [Theming](/docs/concepts-developer-theming--page) to see examples. + +## You can extend the theme with new design tokens + +The v9 `FluentProvider` defines CSS variables consumed by components. +You can extend the `Theme` type with your own design tokens, set values when creating an instance of your theme, and then consume them in your own components. + +See _Extending themes with new tokens_ section in [Theming](/docs/concepts-developer-theming--page). + +## You can make v0, v8, v9 components have the same style + +While you have both old and new components together in your application, you may see some differences in the theme and styling of components. +You can choose to live with the minor discrepancies until you have fully migrated to v9. +You can also choose to make everything look like a previous version or like v9. + +> We recommend moving to v9's Fluent 2 design. +> It has improved accessibility and has consistent style across components. + +### You can create custom themes + +By passing a v8 theme to `ThemeProvider` that uses v9 colors, v8 will look more like v9. +Conversely, passing a v9 theme to `FluentProvider` that uses v8 colors will make v9 look more like v8. + +### You can use theme shims + +We have developed some shims (code that helps with migration) that let you create a v9 theme from the default v8 theme, create a v8 theme from the `webLightTheme` or `webDarkTheme` v9 themes. + +One of our key partner teams has developed a Fluent 2 theme for v8 that includes custom component styles to exactly match the Fluent 2 theme of v9. + +Check them out in the _/Migration Shims/Themes_ topics. + +## You can define custom styles with className + +As detailed in the _/Concepts/Developer/Styling Components_ topic, you can create styles with `makeStyles` and `mergeClasses` and then pass the className to any v9 component or component slot.Those styles will be applied last, allowing you to modify the default component style. + +If you do create custom styles, we strongly recommend using design tokens. +This ensures styles update with theme changes. + +## You can recompose components with custom styles + +Fluent v9 has a powerful composition model using React hooks. +Each component is separated into a hook that maps props to state, a hook that uses state to set className styles on each slot, and a render function that outputs each slot with applied props. + +While you can create a wrapper component that renders a v9 component with custom styles applied, this often introduces more virtual DOM elements that may affect performance. + +Instead, you can create a component that reuses the same hooks of the component. +You can substitute your own hooks or call additional hooks. +Because you are leveraging the same infrastructure v9 components use, no additional wrapper virtual DOM elements are created. + +This example defines a new button component. +The props to state hooks and render method from `Button` are reused. +A new style hook is substituted for `useButtonStyle`. + +```tsx +import * as React from 'react'; +import { renderButton_unstable as renderButton, useButton_unstable as useButton } from '@fluentui/react-components'; +import type { ButtonProps, ForwardRefComponent } from '@fluentui/react-components'; + +const useStyles = makeStyles({ + root: { + background: tokens.colorNeutralBackground2, + //... + }, +}); + +// This is an example of a custom style hook +const useCusomButtonStyles = (state: ButtonState): ButtonState => { + const styles = useStyles(); + + state.root.className = styles.root; + //... +}; + +export const MyButton: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useButton(props, ref); + useCustomButtonStyles(state); + return renderButton(state); +}) as ForwardRefComponent; +``` + +This is the most advanced form of customization in Fluent UI React v9, but provides you complete control over components. diff --git a/apps/public-docsite-v9/src/Concepts/Migration/Overview.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/Overview.stories.mdx deleted file mode 100644 index 1d814202443f10..00000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/Overview.stories.mdx +++ /dev/null @@ -1,66 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Migrating from v8 or v0 to v9 - -If you or your team are currently using version 8 of `@fluentui/react` or version 0.x of `@fluentui/react-northstar` and are thinking of migrating to version 9 -then we would first like to **_thank you_** for making the jump and tell you how excited we are for you to experience all the improvements and features we have been working on. - -There are several things to keep in mind when migrating, so we have created these uprade guide topics explaining: - -- the new concepts you will encounter and how they map to concepts in previous versions -- things to consider when planning migration work -- detailed guidance on migrating components -- examples and helper code to make migrating easier - -We highly recommend reading through the v9 concepts for developers and the component documentation. -Knowing how v9 works will provide needed context for migrating. - -## Why should I migrate from v8 or v0 to v9? - -Fluent UI React v9 provides significant improvements to components over both v8 and v0. - -Some reasons to migrate to v9: - -- New and improved visual styling, rendering performance, and accessibility -- Easier to use and more consistent component props -- Build-time CSS-in-JS -- Component customization using slots -- Design token language with an improved theme provider -- Component composition and re-use leveraging React hooks -- Reduced bundle size with tree shaking - -## Do I have to migrate all at once? - -Absolutely not! **You can migrate incrementally**. - -Fluent UI v9 was built as separate libraries with the intention of support incremental adoption of v9 components alongside v8 and v0 components. - -## What if I'm on v7 right now? - -We recommend first migrating v7 to v8. The migration is mostly fixing a few breaking changes and replacing some deprecated components or props with newer versions. - -## What is available in v9? - -Version 9 is a "converged" library built from the ground-up that addresses many of the concerns and issues that plagued version 8. -However, this approach means that the intial number of version 9 components is fewer than existed in version 8. -Some components have also been renamed and a couple of them have been retired. - -At the time of this writing, v9 has an initial set of components shipped as a release candidate. -There are also some components in preview that are more likely to change than the release candidate components. -However, **all published components are production ready**. - -The v9 RC provides the following v8 equivalents: Avatar (previously Persona), Buttons, Divider, Image, Link, Portal and Popover (previously Layer/Overlay), Text, and Tooltip. -There are also new components: Accordion, Badges, and Menu. - -See the [Component Mapping](/docs/concepts-migrating-from-v8-component-mapping--page) for a complete list. - -The v9 RC provides the following v0 equivalents: Accordion, Avatar, Badge (previously Status), Buttons, Divider, Image, Menu, Portal and Popover (previously Popup), Text, and Tooltip. - -## How much effort is required? - -We won't sugarcoat it; migrating from v8 to v9 is more involved than the previous v7 to v8 migration. -There are breaking changes, component differences, and paradigm shifts. - -The good news is that you can migrate incrementally and take it one step at a time. diff --git a/apps/public-docsite-v9/src/Concepts/Migration/Planning.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/Planning.stories.mdx deleted file mode 100644 index f8ff4c9cfbbc08..00000000000000 --- a/apps/public-docsite-v9/src/Concepts/Migration/Planning.stories.mdx +++ /dev/null @@ -1,186 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - - - -# Planning your journey - -As mentioned before, Fluent UI React v9 was designed to allow you to incrementally migrate. -You have a lot of flexibility on how you approach, plan, and execute moving to v9. - -This part of the guide will help you assess your project, choose your approach, -and plan out an iterative cycle for a successful migration. - -## Assessing your application - -How your application uses Fluent will influence your approach. -Scan over your codebase and try to answer the following questions: - -1. What Fluent components does your application use? -2. For each component, how many times is each component used (i.e. usage instances)? -3. Is most usage basic or advanced? - -Basic usage means you use the component with minimal customization. -You pass typical props and bind data from your components or application state. - -```tsx - -``` - -Advanced usage includes things like passing complex custom styles objects, callbacks for custom rendering, using refs to make imperative calls, and complex data binding. - -## Considerations - -There are lots of ways to migrate. Here are are some different options to consider. - -### Incremental or All-at-once - -_Incremental_: migrate a few components and ship, often by flighting the migrated components to a subset of users. -The benefits of the incremental approach are that you get v9 improvements sooner, find issues earlier, -and can iteratively get faster migrating components. - -Since v9 does not have all the components offered in previous versions yet, incrementally migrating allows you to gradually introduce v9 -side-by-side with v8 or v0. -You can more closely monitor the changes to bundle size and performance improvements with a gradual approach. - -_All-at-once_: migrate every v8/v0 component to their v9 equivalent. -You can still flight the migrated experience to a subset of users. -You get the benefit that you could A/B route to different web application servers when flighting and keep the -previous untouched version running independent of the migrated version. - -You also get the maximum benefits of v9 including a new consistent style, -tree-shaking out v8 components from the bundles, build-time CSS optimizations, and render performance improvements. - -### Horizontal or Vertical - -_Horizontal_: migrating one component across your entire application. -For example, migrating Button from previous version to v9 everywhere. -This has the benefit that your code will end up only depending on v9 Button and the v8 Button won't be included in the downloaded bundle. -Your buttons will look and behave the same across your app. - -_Vertical_: migrating all the components in one part of your application. -For example, migrating Button, Divider, Persona, and Link on a contact status side bar. -This has the benefit that you can migrate one part of your application in isolation leaving the rest of the app unaffected. -You can choose a non-critical part of your application to reduce risk of app-wide issues. -It makes it easier to trace any issues caused by migration. -Vertical may allow you to find integration issues earlier as you are using multiple new components. - -You can also choose to migrate one component in one part of your application. -You lose some of the benefits of each individual approach, but can try things out more slowly. - -### Deep or Shallow - -_Deep_: migrating components that are core to your application and re-used in many places. -For example, migrating a main toolbar to use the v9 Button and Menu components. -You get the benefits of v9 across the entire application. -You will get more usage of the migrated components and can gather feedback earlier. - -_Shallow_: migrating components that appear only in one non-critical place in your application. -For example, migrating an optional edit profile screen. -You get the benefit of limiting risk, but decrease the usage and may not find issues right away. - -### New v9 or Old v8 style - -If you have v8 and v9 components side-by-side, you may want to avoid noticable style differences. -If you need style consistency, apply theming and style customizations to make v8 components look like v9 components, -or make v9 components look like v8 components. - -You may decide you can live with the style differences for a period of time. -Most are small changes that are only noticable when v8 and v9 versions of the same component are next to each other in the UI. - -### New v9 or Old v0 style - -v0 will to some extent gradually converge its appearance. However, you might still need to use style overrides in some cases to achieve consistency. - -### Manual changes, code mod scripts, or shims - -_Manual_: update each usage of Fluent React by hand. -This is the brute force approach to migration. -It may be the best option especially for smaller projects. -You may have a lot of variety in how you use components that preclude a search/replace or automated option. -You may also have an existing wrapper around a component that allows you to migrate at a single code location. -The benefits include you can call v9 components as intended, the opportunity to simplify and improve -how your code uses Fluent, and you can make incremental check-ins ensuring existing tests pass. - -_Code mod_: author a script to update multiple locations in your code at once. -You may be able to leverage existing scripts from previous migrations, from others who have migrated, or from the Fluent React team. -If your codebase is very consistent in how it uses Fluent, this option can save a lot of extra effort over manual migration. -You can have code mods that add flighting logic around usage to have both v8/v0 and v9 available. -The downside is that if your usage is complex or highly varied, authoring a code mod that covers all cases may be impractical. - -_Shims_: author or use a component that takes v8/v0 props and renders a v9 component. -Shims can be a good option to get v9 components in your app if you don't have the time to update all the places you use the component. -You can leave your props creation code alone and pass it to the shim. -It is easy to search/replace your code to update to using the shim. -You can also do your flighting logic within the shim itself. -One downside is that your shim will retain the dependency on v8/v0 and prevent removing it from your bundle. -Also, there are cases with custom renderprops callbacks that cannot be supported by a shim because the rendered -content is not compatible with the v9 component. - -## Recommendations - -### Small projects - -If you have a small project and can commit the effort, we recommend migrating everything and modifying the code directly. - -This gives you the maximum benefit of rendering performance, build time style bundling, and tree-shaking out v8 components that are no longer used. You'll be able to refactor any advanced usage cases in the newer v9 paradigms and end up with cleaner code. - -You should still consider flighting the migrated experience, but you can A/B the entire application rather than if/then flighting per component in the code. - -### Medium or larger with advanced usage - -If you have a medium to large project, significant advanced usage of components, and limited resources or time constraints, we recommend leveraging the shim components. - -You can replace all the usages of a component like Button with ShimButton and get a v9 Button rendered. You get the benefits of v9 components and can crawl over the code to update to use v9 directly at your leisure. - -Warning! Shims aren't free. You'll still need to modify code to migrate custom styles, renderprops callbacks, and ref usage. Shims take a dependency on the v8 types and v9 components, so tree-shaking may be limited. Shims introduce mapping logic (although it shouldn't signficantly impact render performance). - -### Medium or larger apps with basic usage - -If you have a large project with hundreds to thousands of Fluent component usages, we strongly recommend migrating horizontally. The Button component is a typical choice to migrate across the application. - -If your usage is mostly basic, we recommend authoring a code-mod to handle what would be too tedious with search & replace. Consider running code-mods to handle most cases and then do some manual migration work to cover the rest. - -### Large with advanced usage - -If you have a large projects with thousands of Fluent component usages, a lot of advanced usage, and several resource constraints, we recommend creating an application-specific shim and permanent abstraction around the Fluent component. - -A permanent abstraction will give you a place to adapt for compatibility as you move from v8 props to v9 props. It will also be valuable with future migrations. v9 has a new hook-based composition model you can leverage to create a shim without introducing the extra virtual DOM elements of a wrapper. You can also introduce the flighting logic within your shim to be able to toggle the migration on/off. - -You can consider code-mods to migrate the more basic usage, but will likely find too much variance to handle all the cases across your code. - -We recommend you migrate horizontally, but you may want to migrate horizontally within one portion of your application at a time. For example, all the buttons in a toolbar or on a related set of pages in your application. This lets you migrate in stages without destabilizing then entire application. - -If you have a subsystem of your application that is independent and similar to a small/medium application, you may choose to migrate it vertically. You can have a cohesive improvement to one part of the application and flight it independent of the rest of the application. - -## Creating a plan - -We strongly recommend using a work item tracking system or Excel spreadsheet to plan out your migration tasks. - -### A plan for a plan - -You should create and complete a set of planning tasks: - -1. Measure the current bundle size, render performance, and other metrics for later comparison. -2. Determine the mechanism for how you will flight the migrated components to a subset of users. -3. Decide on any pre-migration improvements that you will make first to reduce migration effort. -4. Determine what other constraints you have - maximum bundle size, performance bars, allowed style inconsistencies, etc. -5. Assess the application and choose your approach. -6. Choose a target deadline or milestone date for each phase of migration. - -### Getting started tasks - -You should plan a set of getting started tasks for migrating one component in one location. - -1. Update project to reference Fluent React v9. -2. Add FluentProvider with a theme to the root of the app -3. Add any v9 component to the UI, verify it renders as expected, then remove it. -4. Update a single usage location to use the v9 component. Consider recording how long it takes. - -### Iterative planning - -Plan a task or set of tasks to be able to 'rinse and repeat' each usage migration. - -- The type of tasks and their granularity will vary depending on your approach. -- After migrating some instances, review how long each took and plan out the next set of tasks. From 8aa205b576ad1a4d20df7eb77eb739443586f6b8 Mon Sep 17 00:00:00 2001 From: chajun <86579954+chpalac@users.noreply.github.com> Date: Mon, 12 Dec 2022 07:29:40 -0300 Subject: [PATCH 006/172] fix: prevent selected items to be interactive when dropdown is disabled (#25954) --- .../react-northstar/src/components/Dropdown/Dropdown.tsx | 1 + .../src/components/Dropdown/DropdownSelectedItem.tsx | 9 ++++++++- .../test/specs/components/Dropdown/Dropdown-test.tsx | 8 ++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx index 17c963580a8c23..9b19b3dda2971b 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/Dropdown.tsx @@ -842,6 +842,7 @@ export const Dropdown = (React.forwardRef((props, defaultProps: () => ({ className: dropdownSlotClassNames.selectedItem, active: isSelectedItemActive(index), + disabled, variables, ...(typeof item === 'object' && !item.hasOwnProperty('key') && { diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx index d2ee4d1ffb0703..9825b58a82c60e 100644 --- a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx +++ b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx @@ -55,6 +55,9 @@ export interface DropdownSelectedItemProps extends UIComponentProps; + /** A dropdown selected item can show that it cannot be interacted with. */ + disabled?: boolean; + /** * Called on selected item click. * @@ -97,7 +100,7 @@ export const DropdownSelectedItem = (React.forwardRef(); const ElementType = getElementType(props); @@ -136,21 +139,25 @@ export const DropdownSelectedItem = (React.forwardRef { + if (disabled) return; _.invoke(props, 'onClick', e, props); }; const handleKeyDown = (e: React.SyntheticEvent) => { + if (disabled) return; _.invoke(props, 'onKeyDown', e, props); }; const handleIconOverrides = iconProps => ({ ...iconProps, onClick: (e: React.SyntheticEvent, iconProps: BoxProps) => { + if (disabled) return; e.stopPropagation(); _.invoke(props, 'onRemove', e, iconProps); _.invoke(props, 'onClick', e, iconProps); }, onKeyDown: (e: React.KeyboardEvent, iconProps: BoxProps) => { + if (disabled) return; e.stopPropagation(); if (getCode(e) === keyboardKey.Enter) { _.invoke(props, 'onRemove', e, iconProps); diff --git a/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx index bc70283c546827..1e68ef9373a3fc 100644 --- a/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx +++ b/packages/fluentui/react-northstar/test/specs/components/Dropdown/Dropdown-test.tsx @@ -1873,6 +1873,14 @@ describe('Dropdown', () => { expect(getSelectedItemNodes()).toHaveLength(1); expect(getItemNodes()).toHaveLength(items.length - 1); }); + + it('should not call onRemove when dropdown is disabled', () => { + const onRemove = jest.fn(); + const value = { header: items[0], onRemove }; + const { clickOnSelectedItemAtIndex } = renderDropdown({ multiple: true, value, disabled: true }); + clickOnSelectedItemAtIndex(0); + expect(onRemove).not.toHaveBeenCalled(); + }); }); describe('items', () => { From 82bd84ff65c8316297ef7601154c5e5c321040ab Mon Sep 17 00:00:00 2001 From: Ben Howell <48106640+behowell@users.noreply.github.com> Date: Mon, 12 Dec 2022 14:36:21 -0800 Subject: [PATCH 007/172] fix: Avatar shouldn't render an icon when displaying an image (performance) (#25945) Don't render the icon if there is an image, unless the image fails to load. --- .../src/stories/Avatar.stories.tsx | 3 +- ...-34fac678-ed67-41e8-b561-e6b3e88ada07.json | 7 ++++ .../src/components/Avatar/Avatar.test.tsx | 12 ++---- .../src/components/Avatar/useAvatar.tsx | 40 ++++++++++--------- 4 files changed, 34 insertions(+), 28 deletions(-) create mode 100644 change/@fluentui-react-avatar-34fac678-ed67-41e8-b561-e6b3e88ada07.json diff --git a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx index 3645856fc30147..2b70d2ee57e895 100644 --- a/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Avatar.stories.tsx @@ -243,4 +243,5 @@ storiesOf('Avatar Converged', module) includeHighContrast: true, includeDarkMode: true, }) - .addStory('image-bad-url', () => ); + .addStory('image-bad-url', () => ) + .addStory('image-bad-url+icon', () => ); diff --git a/change/@fluentui-react-avatar-34fac678-ed67-41e8-b561-e6b3e88ada07.json b/change/@fluentui-react-avatar-34fac678-ed67-41e8-b561-e6b3e88ada07.json new file mode 100644 index 00000000000000..17e111da560e93 --- /dev/null +++ b/change/@fluentui-react-avatar-34fac678-ed67-41e8-b561-e6b3e88ada07.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Avatar shouldn't render an icon when displaying an image (performance)", + "packageName": "@fluentui/react-avatar", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx b/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx index 48410a73500aca..246fb12945aab3 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx +++ b/packages/react-components/react-avatar/src/components/Avatar/Avatar.test.tsx @@ -26,15 +26,11 @@ describe('Avatar', () => { }, { props: { - image: { src: 'avatar.png', alt: 'test-image' }, icon: 'Test Icon', - badge: 'Test Badge', }, expectedClassNames: { root: avatarClassNames.root, - image: avatarClassNames.image, icon: avatarClassNames.icon, - badge: avatarClassNames.badge, }, }, ], @@ -108,13 +104,11 @@ describe('Avatar', () => { ); }); - it('prioritizes image over icon', () => { + it('does not render the icon when there is an image', () => { render(} image={{ src: 'avatar.png', alt: 'test-image' }} />); - // Both are rendered, but the icon precedes the image, and are hidden by it - expect(screen.getByAltText('test-image').compareDocumentPosition(screen.getByAltText('test-icon'))).toBe( - Node.DOCUMENT_POSITION_PRECEDING, - ); + expect(screen.getByAltText('test-image')).toBeTruthy(); + expect(screen.queryByAltText('test-icon')).toBeFalsy(); }); it('prioritizes image over initials and icon', () => { diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx index 7fda29c056d86d..1b165c7b50f957 100644 --- a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx +++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx @@ -44,6 +44,22 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref(undefined); + const image: AvatarState['image'] = resolveShorthand(props.image, { + defaultProps: { + alt: '', + role: 'presentation', + 'aria-hidden': true, + hidden: imageHidden, + }, + }); + + // Hide the image if it fails to load and restore it on a successful load + if (image) { + image.onError = mergeCallbacks(image.onError, () => setImageHidden(true)); + image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined)); + } + // Resolve the initials slot, defaulted to getInitials. let initials: AvatarState['initials'] = resolveShorthand(props.initials, { required: true, @@ -53,10 +69,14 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref(undefined); - const image: AvatarState['image'] = resolveShorthand(props.image, { - defaultProps: { - alt: '', - role: 'presentation', - 'aria-hidden': true, - hidden: imageHidden, - }, - }); - - // Hide the image if it fails to load and restore it on a successful load - if (image) { - image.onError = mergeCallbacks(image.onError, () => setImageHidden(true)); - image.onLoad = mergeCallbacks(image.onLoad, () => setImageHidden(undefined)); - } - const badge: AvatarState['badge'] = resolveShorthand(props.badge, { defaultProps: { size: getBadgeSize(size), From 0e5a232bacdd7f5fe8c58b61f789d0e43d800992 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Mon, 12 Dec 2022 15:16:42 -0800 Subject: [PATCH 008/172] fix: Grouped Detailslist's collapseAllVisibility=hidden needs correct spacers and role=cell nodes (#25957) --- ...t-36e9af14-473b-452c-8618-929be8d3f6a4.json | 7 +++++++ .../DetailsList.Grouped.Example.tsx | 4 ++-- .../DetailsList/DetailsHeader.base.tsx | 18 +++++++++++------- .../components/DetailsList/DetailsRow.base.tsx | 3 +-- 4 files changed, 21 insertions(+), 11 deletions(-) create mode 100644 change/@fluentui-react-36e9af14-473b-452c-8618-929be8d3f6a4.json diff --git a/change/@fluentui-react-36e9af14-473b-452c-8618-929be8d3f6a4.json b/change/@fluentui-react-36e9af14-473b-452c-8618-929be8d3f6a4.json new file mode 100644 index 00000000000000..962c458a0dfd7d --- /dev/null +++ b/change/@fluentui-react-36e9af14-473b-452c-8618-929be8d3f6a4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Grouped DetailsList alignment and cell count when CollapseAllVisibility is hidden", + "packageName": "@fluentui/react", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.Grouped.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.Grouped.Example.tsx index d7e6a2529356fd..b87f82f8925b7f 100644 --- a/packages/react-examples/src/react/DetailsList/DetailsList.Grouped.Example.tsx +++ b/packages/react-examples/src/react/DetailsList/DetailsList.Grouped.Example.tsx @@ -19,10 +19,10 @@ const controlWrapperClass = mergeStyles({ flexWrap: 'wrap', }); const toggleStyles: Partial = { - root: { margin: margin }, + root: { margin }, label: { marginLeft: 10 }, }; -const addItemButtonStyles: Partial = { root: { margin: margin } }; +const addItemButtonStyles: Partial = { root: { margin } }; export interface IDetailsListGroupedExampleItem { key: string; diff --git a/packages/react/src/components/DetailsList/DetailsHeader.base.tsx b/packages/react/src/components/DetailsList/DetailsHeader.base.tsx index eb50bb32f5aeab..aa52b8631a88c6 100644 --- a/packages/react/src/components/DetailsList/DetailsHeader.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsHeader.base.tsx @@ -202,9 +202,9 @@ export class DetailsHeaderBase const classNames = this._classNames; const IconComponent = useFastIcons ? FontIcon : Icon; - const showGroupExpander = - groupNestingDepth! > 0 && this.props.collapseAllVisibility === CollapseAllVisibility.visible; - const columnIndexOffset = 1 + (showCheckbox ? 1 : 0) + (showGroupExpander ? 1 : 0); + const hasGroupExpander = groupNestingDepth! > 0; + const showGroupExpander = hasGroupExpander && this.props.collapseAllVisibility === CollapseAllVisibility.visible; + const columnIndexOffset = 1 + (showCheckbox ? 1 : 0) + (hasGroupExpander ? 1 : 0); const isRTL = getRTL(theme); return ( @@ -295,6 +295,10 @@ export class DetailsHeaderBase {/* Use this span in addition to aria-label, otherwise VoiceOver ignores the column */} {ariaLabelForToggleAllGroupsButton}
+ ) : hasGroupExpander ? ( +
+ {/* Empty placeholder cell when CollapseAllVisibility is hidden */} +
) : null} {columns.map((column: IColumn, columnIndex: number) => { @@ -405,7 +409,7 @@ export class DetailsHeaderBase if (columnReorderProps.onColumnDrop) { const dragDropDetails: IColumnDragDropDetails = { draggedIndex: this._draggedColumnIndex, - targetIndex: targetIndex, + targetIndex, }; columnReorderProps.onColumnDrop(dragDropDetails); /* eslint-disable deprecation/deprecation */ @@ -717,7 +721,7 @@ export class DetailsHeaderBase this.setState({ columnResizeDetails: { - columnIndex: columnIndex, + columnIndex, columnMinWidth: columns[columnIndex].calculatedWidth!, originX: ev.clientX, }, @@ -752,7 +756,7 @@ export class DetailsHeaderBase if (ev.which === KeyCodes.enter) { this.setState({ columnResizeDetails: { - columnIndex: columnIndex, + columnIndex, columnMinWidth: columns[columnIndex].calculatedWidth!, }, }); @@ -880,7 +884,7 @@ export class DetailsHeaderBase if (this.state.isAllSelected !== isAllSelected) { this.setState({ - isAllSelected: isAllSelected, + isAllSelected, }); } } diff --git a/packages/react/src/components/DetailsList/DetailsRow.base.tsx b/packages/react/src/components/DetailsList/DetailsRow.base.tsx index 1834fa0c9ab837..f5642f1725090e 100644 --- a/packages/react/src/components/DetailsList/DetailsRow.base.tsx +++ b/packages/react/src/components/DetailsList/DetailsRow.base.tsx @@ -14,7 +14,6 @@ import { GroupSpacer } from '../GroupedList/GroupSpacer'; import { DetailsRowFields } from './DetailsRowFields'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; import { SelectionMode, SELECTION_CHANGE } from '../../Selection'; -import { CollapseAllVisibility } from '../../GroupedList'; import { classNamesFunction } from '../../Utilities'; import type { IDisposable } from '../../Utilities'; import type { IColumn } from './DetailsList.types'; @@ -363,7 +362,7 @@ export class DetailsRowBase extends React.Component {item && rowFields} From c2b76828654d1cdccc1e710b6bf647992ba4d3ae Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Mon, 12 Dec 2022 16:15:28 -0800 Subject: [PATCH 009/172] fix: Autofill only sets selectionRange when in focus (#25971) --- ...ui-react-8cfa6416-9eea-4573-8625-3a956ca1b0a7.json | 7 +++++++ packages/react/src/components/Autofill/Autofill.tsx | 11 +++++++---- 2 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 change/@fluentui-react-8cfa6416-9eea-4573-8625-3a956ca1b0a7.json diff --git a/change/@fluentui-react-8cfa6416-9eea-4573-8625-3a956ca1b0a7.json b/change/@fluentui-react-8cfa6416-9eea-4573-8625-3a956ca1b0a7.json new file mode 100644 index 00000000000000..e7ebc858bafe92 --- /dev/null +++ b/change/@fluentui-react-8cfa6416-9eea-4573-8625-3a956ca1b0a7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Autofill only sets input selectionRange if input is in focus\"", + "packageName": "@fluentui/react", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/Autofill/Autofill.tsx b/packages/react/src/components/Autofill/Autofill.tsx index 6638857287cd9f..87a2cdd6f84705 100644 --- a/packages/react/src/components/Autofill/Autofill.tsx +++ b/packages/react/src/components/Autofill/Autofill.tsx @@ -95,7 +95,10 @@ export class Autofill extends React.Component im return; } + const isFocused = this._inputElement.current && this._inputElement.current === document.activeElement; + if ( + isFocused && this._autoFillEnabled && this.value && suggestedDisplayValue && @@ -107,8 +110,8 @@ export class Autofill extends React.Component im shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate(); } - if (shouldSelectFullRange && this._inputElement.current) { - this._inputElement.current.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD); + if (shouldSelectFullRange) { + this._inputElement.current!.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD); } else { while ( differenceIndex < this.value.length && @@ -116,8 +119,8 @@ export class Autofill extends React.Component im ) { differenceIndex++; } - if (differenceIndex > 0 && this._inputElement.current) { - this._inputElement.current.setSelectionRange( + if (differenceIndex > 0) { + this._inputElement.current!.setSelectionRange( differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD, From baf93e56255ce8136a965a7304d7d5bcc0042384 Mon Sep 17 00:00:00 2001 From: Fluent UI Build Date: Tue, 13 Dec 2022 07:46:37 +0000 Subject: [PATCH 010/172] applying package updates --- apps/perf-test/package.json | 2 +- apps/public-docsite-resources/package.json | 10 ++++----- apps/public-docsite-v9/package.json | 2 +- apps/public-docsite/package.json | 10 ++++----- apps/react-18-tests-v8/package.json | 2 +- apps/ssr-tests/package.json | 2 +- apps/stress-test/package.json | 2 +- apps/theming-designer/package.json | 4 ++-- apps/ts-minbar-test-react/package.json | 2 +- apps/vr-tests/package.json | 4 ++-- ...-36e9af14-473b-452c-8618-929be8d3f6a4.json | 7 ------- ...-8cfa6416-9eea-4573-8625-3a956ca1b0a7.json | 7 ------- packages/azure-themes/CHANGELOG.json | 15 +++++++++++++ packages/azure-themes/CHANGELOG.md | 11 +++++++++- packages/azure-themes/package.json | 4 ++-- packages/cra-template/CHANGELOG.json | 15 +++++++++++++ packages/cra-template/CHANGELOG.md | 11 +++++++++- packages/cra-template/package.json | 4 ++-- packages/react-cards/CHANGELOG.json | 15 +++++++++++++ packages/react-cards/CHANGELOG.md | 11 +++++++++- packages/react-cards/package.json | 4 ++-- packages/react-charting/CHANGELOG.json | 15 +++++++++++++ packages/react-charting/CHANGELOG.md | 11 +++++++++- packages/react-charting/package.json | 6 +++--- packages/react-date-time/CHANGELOG.json | 15 +++++++++++++ packages/react-date-time/CHANGELOG.md | 11 +++++++++- packages/react-date-time/package.json | 4 ++-- .../react-docsite-components/CHANGELOG.json | 21 +++++++++++++++++++ .../react-docsite-components/CHANGELOG.md | 12 ++++++++++- .../react-docsite-components/package.json | 6 +++--- packages/react-examples/package.json | 14 ++++++------- packages/react-experiments/CHANGELOG.json | 15 +++++++++++++ packages/react-experiments/CHANGELOG.md | 11 +++++++++- packages/react-experiments/package.json | 4 ++-- packages/react-migration-v8-v9/CHANGELOG.json | 15 +++++++++++++ packages/react-migration-v8-v9/CHANGELOG.md | 11 +++++++++- packages/react-migration-v8-v9/package.json | 4 ++-- packages/react-monaco-editor/CHANGELOG.json | 15 +++++++++++++ packages/react-monaco-editor/CHANGELOG.md | 11 +++++++++- packages/react-monaco-editor/package.json | 4 ++-- packages/react/CHANGELOG.json | 21 +++++++++++++++++++ packages/react/CHANGELOG.md | 12 ++++++++++- packages/react/package.json | 2 +- packages/storybook/package.json | 6 +++--- packages/theme-samples/CHANGELOG.json | 15 +++++++++++++ packages/theme-samples/CHANGELOG.md | 11 +++++++++- packages/theme-samples/package.json | 4 ++-- 47 files changed, 342 insertions(+), 78 deletions(-) delete mode 100644 change/@fluentui-react-36e9af14-473b-452c-8618-929be8d3f6a4.json delete mode 100644 change/@fluentui-react-8cfa6416-9eea-4573-8625-3a956ca1b0a7.json diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json index 65d4b77a93f9f7..3131da1fbb5305 100644 --- a/apps/perf-test/package.json +++ b/apps/perf-test/package.json @@ -16,7 +16,7 @@ }, "dependencies": { "@fluentui/example-data": "^8.4.3", - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/scripts": "^1.0.0", "@microsoft/load-themed-styles": "^1.10.26", "flamegrill": "0.2.0", diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json index 22570fb0f8d53b..0fd525d8dd1a2e 100644 --- a/apps/public-docsite-resources/package.json +++ b/apps/public-docsite-resources/package.json @@ -32,15 +32,15 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/react-examples": "^8.34.4", "@microsoft/load-themed-styles": "^1.10.26", - "@fluentui/azure-themes": "^8.5.36", - "@fluentui/react-docsite-components": "^8.10.34", + "@fluentui/azure-themes": "^8.5.37", + "@fluentui/react-docsite-components": "^8.10.35", "@fluentui/font-icons-mdl2": "^8.5.4", "@fluentui/set-version": "^8.2.3", - "@fluentui/theme-samples": "^8.7.34", - "@fluentui/react-monaco-editor": "^1.7.34", + "@fluentui/theme-samples": "^8.7.35", + "@fluentui/react-monaco-editor": "^1.7.35", "office-ui-fabric-core": "^11.0.0", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index eca38eb657a5ab..0dc565567d0551 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -21,7 +21,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/react-northstar": "^0.65.0", "@fluentui/react-icons-northstar": "^0.65.0", "@fluentui/scripts": "^1.0.0", diff --git a/apps/public-docsite/package.json b/apps/public-docsite/package.json index 3e3bf8acef6eac..cd81d7fd3ab938 100644 --- a/apps/public-docsite/package.json +++ b/apps/public-docsite/package.json @@ -25,7 +25,7 @@ "devDependencies": { "@fluentui/common-styles": "^1.2.13", "@fluentui/eslint-plugin": "*", - "@fluentui/react-monaco-editor": "^1.7.34", + "@fluentui/react-monaco-editor": "^1.7.35", "@fluentui/scripts": "^1.0.0", "write-file-webpack-plugin": "^4.1.0" }, @@ -33,16 +33,16 @@ "@fluentui/font-icons-mdl2": "^8.5.4", "@fluentui/public-docsite-resources": "^8.1.41", "@fluentui/public-docsite-setup": "^0.3.13", - "@fluentui/react": "^8.103.7", - "@fluentui/react-docsite-components": "^8.10.34", + "@fluentui/react": "^8.103.8", + "@fluentui/react-docsite-components": "^8.10.35", "@fluentui/react-examples": "^8.34.4", - "@fluentui/react-experiments": "^8.14.29", + "@fluentui/react-experiments": "^8.14.30", "@fluentui/react-file-type-icons": "^8.8.3", "@fluentui/react-icons-mdl2": "^1.3.27", "@fluentui/react-icons-mdl2-branded": "^1.2.28", "@fluentui/set-version": "^8.2.3", "@fluentui/theme": "^2.6.19", - "@fluentui/theme-samples": "^8.7.34", + "@fluentui/theme-samples": "^8.7.35", "@fluentui/utilities": "^8.13.4", "@microsoft/load-themed-styles": "^1.10.26", "office-ui-fabric-core": "^11.0.0", diff --git a/apps/react-18-tests-v8/package.json b/apps/react-18-tests-v8/package.json index 149a8a95f60ab2..aec0b999f84c3d 100644 --- a/apps/react-18-tests-v8/package.json +++ b/apps/react-18-tests-v8/package.json @@ -18,7 +18,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/react-hooks": "^8.6.14", "@types/react": "18.0.14", "@types/react-dom": "18.0.6", diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json index 7e0d2830c31c77..88b8a7468cc26f 100644 --- a/apps/ssr-tests/package.json +++ b/apps/ssr-tests/package.json @@ -13,7 +13,7 @@ }, "license": "MIT", "devDependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@microsoft/load-themed-styles": "^1.10.26", "@types/mocha": "^7.0.2", "@fluentui/scripts": "^1.0.0", diff --git a/apps/stress-test/package.json b/apps/stress-test/package.json index 2b67136a57d51f..e91108cab1f092 100644 --- a/apps/stress-test/package.json +++ b/apps/stress-test/package.json @@ -10,7 +10,7 @@ "type-check": "tsc -b tsconfig.type.json" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/react-components": "^9.7.2", "@fluentui/react-icons": "^2.0.175", "@fluentui/web-components": "^2.5.8", diff --git a/apps/theming-designer/package.json b/apps/theming-designer/package.json index e50c31cc69e9d0..f776d32169e03b 100644 --- a/apps/theming-designer/package.json +++ b/apps/theming-designer/package.json @@ -18,9 +18,9 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/merge-styles": "^8.5.4", - "@fluentui/react-docsite-components": "^8.10.34", + "@fluentui/react-docsite-components": "^8.10.35", "@fluentui/foundation-legacy": "^8.2.24", "@fluentui/scheme-utilities": "^8.3.20", "@fluentui/set-version": "^8.2.3", diff --git a/apps/ts-minbar-test-react/package.json b/apps/ts-minbar-test-react/package.json index 38efea712fc0d5..236bd092ef33b2 100644 --- a/apps/ts-minbar-test-react/package.json +++ b/apps/ts-minbar-test-react/package.json @@ -5,7 +5,7 @@ "description": "Testing Fluent UI React compatibility with Typescript 3.9", "license": "MIT", "dependencies": { - "@fluentui/react": "^8.103.7" + "@fluentui/react": "^8.103.8" }, "scripts": { "type-check": "tsc -p .", diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 994de09a8bd58f..3c39f6e62196f9 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -23,8 +23,8 @@ "dependencies": { "@fluentui/example-data": "^8.4.3", "@fluentui/font-icons-mdl2": "^8.5.4", - "@fluentui/react": "^8.103.7", - "@fluentui/react-experiments": "^8.14.29", + "@fluentui/react": "^8.103.8", + "@fluentui/react-experiments": "^8.14.30", "@fluentui/react-hooks": "^8.6.14", "@fluentui/react-icons-mdl2": "^1.3.27", "@fluentui/scripts": "^1.0.0", diff --git a/change/@fluentui-react-36e9af14-473b-452c-8618-929be8d3f6a4.json b/change/@fluentui-react-36e9af14-473b-452c-8618-929be8d3f6a4.json deleted file mode 100644 index 962c458a0dfd7d..00000000000000 --- a/change/@fluentui-react-36e9af14-473b-452c-8618-929be8d3f6a4.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: Grouped DetailsList alignment and cell count when CollapseAllVisibility is hidden", - "packageName": "@fluentui/react", - "email": "sarah.higley@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/change/@fluentui-react-8cfa6416-9eea-4573-8625-3a956ca1b0a7.json b/change/@fluentui-react-8cfa6416-9eea-4573-8625-3a956ca1b0a7.json deleted file mode 100644 index e7ebc858bafe92..00000000000000 --- a/change/@fluentui-react-8cfa6416-9eea-4573-8625-3a956ca1b0a7.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: Autofill only sets input selectionRange if input is in focus\"", - "packageName": "@fluentui/react", - "email": "sarah.higley@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json index caf583686b2119..c4bb5918039a9e 100644 --- a/packages/azure-themes/CHANGELOG.json +++ b/packages/azure-themes/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/azure-themes", "entries": [ + { + "date": "Tue, 13 Dec 2022 07:46:31 GMT", + "tag": "@fluentui/azure-themes_v8.5.37", + "version": "8.5.37", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/azure-themes", + "comment": "Bump @fluentui/react to v8.103.8", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae" + } + ] + } + }, { "date": "Fri, 09 Dec 2022 07:54:31 GMT", "tag": "@fluentui/azure-themes_v8.5.36", diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md index e13f2062827d63..c8fb73b2e88240 100644 --- a/packages/azure-themes/CHANGELOG.md +++ b/packages/azure-themes/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/azure-themes -This log was last generated on Fri, 09 Dec 2022 07:54:31 GMT and should not be manually modified. +This log was last generated on Tue, 13 Dec 2022 07:46:31 GMT and should not be manually modified. +## [8.5.37](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.5.37) + +Tue, 13 Dec 2022 07:46:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.5.36..@fluentui/azure-themes_v8.5.37) + +### Patches + +- Bump @fluentui/react to v8.103.8 ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by beachball) + ## [8.5.36](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.5.36) Fri, 09 Dec 2022 07:54:31 GMT diff --git a/packages/azure-themes/package.json b/packages/azure-themes/package.json index e8bd904617293d..9a94aa4b96e28b 100644 --- a/packages/azure-themes/package.json +++ b/packages/azure-themes/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/azure-themes", - "version": "8.5.36", + "version": "8.5.37", "description": "Azure themes for Fluent UI React", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -27,7 +27,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/set-version": "^8.2.3", "tslib": "^2.1.0" } diff --git a/packages/cra-template/CHANGELOG.json b/packages/cra-template/CHANGELOG.json index a72890ce619e0b..6b559206032b66 100644 --- a/packages/cra-template/CHANGELOG.json +++ b/packages/cra-template/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/cra-template", "entries": [ + { + "date": "Tue, 13 Dec 2022 07:46:31 GMT", + "tag": "@fluentui/cra-template_v8.4.35", + "version": "8.4.35", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/cra-template", + "comment": "Bump @fluentui/react to v8.103.8", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae" + } + ] + } + }, { "date": "Fri, 09 Dec 2022 07:54:31 GMT", "tag": "@fluentui/cra-template_v8.4.34", diff --git a/packages/cra-template/CHANGELOG.md b/packages/cra-template/CHANGELOG.md index 5ffeea8681a9de..40ba68dc3324ff 100644 --- a/packages/cra-template/CHANGELOG.md +++ b/packages/cra-template/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/cra-template -This log was last generated on Fri, 09 Dec 2022 07:54:31 GMT and should not be manually modified. +This log was last generated on Tue, 13 Dec 2022 07:46:31 GMT and should not be manually modified. +## [8.4.35](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.35) + +Tue, 13 Dec 2022 07:46:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/cra-template_v8.4.34..@fluentui/cra-template_v8.4.35) + +### Patches + +- Bump @fluentui/react to v8.103.8 ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by beachball) + ## [8.4.34](https://github.com/microsoft/fluentui/tree/@fluentui/cra-template_v8.4.34) Fri, 09 Dec 2022 07:54:31 GMT diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json index cef4939143679c..1c89f4660097c1 100644 --- a/packages/cra-template/package.json +++ b/packages/cra-template/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/cra-template", - "version": "8.4.34", + "version": "8.4.35", "description": "Create React App template for Fluent UI React (@fluentui/react)", "repository": { "type": "git", @@ -18,7 +18,7 @@ "template.json" ], "devDependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/scripts": "^1.0.0" } } diff --git a/packages/react-cards/CHANGELOG.json b/packages/react-cards/CHANGELOG.json index 638a671e33aabf..6a196eee512eae 100644 --- a/packages/react-cards/CHANGELOG.json +++ b/packages/react-cards/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-cards", "entries": [ + { + "date": "Tue, 13 Dec 2022 07:46:31 GMT", + "tag": "@fluentui/react-cards_v0.205.35", + "version": "0.205.35", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-cards", + "comment": "Bump @fluentui/react to v8.103.8", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae" + } + ] + } + }, { "date": "Fri, 09 Dec 2022 07:54:31 GMT", "tag": "@fluentui/react-cards_v0.205.34", diff --git a/packages/react-cards/CHANGELOG.md b/packages/react-cards/CHANGELOG.md index c8b30955d97a84..03ae7c9180fb49 100644 --- a/packages/react-cards/CHANGELOG.md +++ b/packages/react-cards/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-cards -This log was last generated on Fri, 09 Dec 2022 07:54:31 GMT and should not be manually modified. +This log was last generated on Tue, 13 Dec 2022 07:46:31 GMT and should not be manually modified. +## [0.205.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.35) + +Tue, 13 Dec 2022 07:46:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-cards_v0.205.34..@fluentui/react-cards_v0.205.35) + +### Patches + +- Bump @fluentui/react to v8.103.8 ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by beachball) + ## [0.205.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-cards_v0.205.34) Fri, 09 Dec 2022 07:54:31 GMT diff --git a/packages/react-cards/package.json b/packages/react-cards/package.json index 84697a64be7f0e..00987717c19972 100644 --- a/packages/react-cards/package.json +++ b/packages/react-cards/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-cards", - "version": "0.205.34", + "version": "0.205.35", "description": "Deprecated experimental Card container components for Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -31,7 +31,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/foundation-legacy": "^8.2.24", "@fluentui/set-version": "^8.2.3", "@microsoft/load-themed-styles": "^1.10.26", diff --git a/packages/react-charting/CHANGELOG.json b/packages/react-charting/CHANGELOG.json index 91aaa20220f82a..69a3a03865a3fe 100644 --- a/packages/react-charting/CHANGELOG.json +++ b/packages/react-charting/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-charting", "entries": [ + { + "date": "Tue, 13 Dec 2022 07:46:31 GMT", + "tag": "@fluentui/react-charting_v5.14.28", + "version": "5.14.28", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-charting", + "comment": "Bump @fluentui/react to v8.103.8", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae" + } + ] + } + }, { "date": "Fri, 09 Dec 2022 07:54:31 GMT", "tag": "@fluentui/react-charting_v5.14.27", diff --git a/packages/react-charting/CHANGELOG.md b/packages/react-charting/CHANGELOG.md index b9bd1cc96966bf..abdc898ff70253 100644 --- a/packages/react-charting/CHANGELOG.md +++ b/packages/react-charting/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-charting -This log was last generated on Fri, 09 Dec 2022 07:54:31 GMT and should not be manually modified. +This log was last generated on Tue, 13 Dec 2022 07:46:31 GMT and should not be manually modified. +## [5.14.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.14.28) + +Tue, 13 Dec 2022 07:46:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.14.27..@fluentui/react-charting_v5.14.28) + +### Patches + +- Bump @fluentui/react to v8.103.8 ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by beachball) + ## [5.14.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.14.27) Fri, 09 Dec 2022 07:54:31 GMT diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json index 9d6e7740a30516..18fbef84ac7a3d 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-charting", - "version": "5.14.27", + "version": "5.14.28", "description": "Experimental React charting components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ }, "devDependencies": { "@fluentui/eslint-plugin": "*", - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@types/react-addons-test-utils": "0.14.18", "@fluentui/scripts": "^1.0.0", "@fluentui/jest-serializer-merge-styles": "^8.0.21" @@ -60,7 +60,7 @@ "tslib": "^2.1.0" }, "peerDependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@types/react": ">=16.8.0 <19.0.0", "@types/react-dom": ">=16.8.0 <19.0.0", "react": ">=16.8.0 <19.0.0", diff --git a/packages/react-date-time/CHANGELOG.json b/packages/react-date-time/CHANGELOG.json index 9a340c439c07b9..4ee66af353a17a 100644 --- a/packages/react-date-time/CHANGELOG.json +++ b/packages/react-date-time/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-date-time", "entries": [ + { + "date": "Tue, 13 Dec 2022 07:46:31 GMT", + "tag": "@fluentui/react-date-time_v8.7.35", + "version": "8.7.35", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-date-time", + "comment": "Bump @fluentui/react to v8.103.8", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae" + } + ] + } + }, { "date": "Fri, 09 Dec 2022 07:54:31 GMT", "tag": "@fluentui/react-date-time_v8.7.34", diff --git a/packages/react-date-time/CHANGELOG.md b/packages/react-date-time/CHANGELOG.md index 13e39e978dd677..811a2e025ab828 100644 --- a/packages/react-date-time/CHANGELOG.md +++ b/packages/react-date-time/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-date-time -This log was last generated on Fri, 09 Dec 2022 07:54:31 GMT and should not be manually modified. +This log was last generated on Tue, 13 Dec 2022 07:46:31 GMT and should not be manually modified. +## [8.7.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.35) + +Tue, 13 Dec 2022 07:46:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-date-time_v8.7.34..@fluentui/react-date-time_v8.7.35) + +### Patches + +- Bump @fluentui/react to v8.103.8 ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by beachball) + ## [8.7.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-date-time_v8.7.34) Fri, 09 Dec 2022 07:54:31 GMT diff --git a/packages/react-date-time/package.json b/packages/react-date-time/package.json index 24ba2e63b81c9a..c0af5ee56f9891 100644 --- a/packages/react-date-time/package.json +++ b/packages/react-date-time/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-date-time", - "version": "8.7.34", + "version": "8.7.35", "description": "Date and time related React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -26,7 +26,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/set-version": "^8.2.3", "tslib": "^2.1.0" }, diff --git a/packages/react-docsite-components/CHANGELOG.json b/packages/react-docsite-components/CHANGELOG.json index b51a26b62e0dec..427a60d5b79c8c 100644 --- a/packages/react-docsite-components/CHANGELOG.json +++ b/packages/react-docsite-components/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react-docsite-components", "entries": [ + { + "date": "Tue, 13 Dec 2022 07:46:31 GMT", + "tag": "@fluentui/react-docsite-components_v8.10.35", + "version": "8.10.35", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react to v8.103.8", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae" + }, + { + "author": "beachball", + "package": "@fluentui/react-docsite-components", + "comment": "Bump @fluentui/react-monaco-editor to v1.7.35", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae" + } + ] + } + }, { "date": "Fri, 09 Dec 2022 07:54:31 GMT", "tag": "@fluentui/react-docsite-components_v8.10.34", diff --git a/packages/react-docsite-components/CHANGELOG.md b/packages/react-docsite-components/CHANGELOG.md index 1d40f360d5930d..a940e9df79785a 100644 --- a/packages/react-docsite-components/CHANGELOG.md +++ b/packages/react-docsite-components/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react-docsite-components -This log was last generated on Fri, 09 Dec 2022 07:54:31 GMT and should not be manually modified. +This log was last generated on Tue, 13 Dec 2022 07:46:31 GMT and should not be manually modified. +## [8.10.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.10.35) + +Tue, 13 Dec 2022 07:46:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-docsite-components_v8.10.34..@fluentui/react-docsite-components_v8.10.35) + +### Patches + +- Bump @fluentui/react to v8.103.8 ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by beachball) +- Bump @fluentui/react-monaco-editor to v1.7.35 ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by beachball) + ## [8.10.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-docsite-components_v8.10.34) Fri, 09 Dec 2022 07:54:31 GMT diff --git a/packages/react-docsite-components/package.json b/packages/react-docsite-components/package.json index 6a72db22491b42..8042f63305d086 100644 --- a/packages/react-docsite-components/package.json +++ b/packages/react-docsite-components/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-docsite-components", - "version": "8.10.34", + "version": "8.10.35", "description": "Fluent UI React components for building documentation sites.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -33,14 +33,14 @@ "react-dom": ">=16.8.0 <19.0.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/theme": "^2.6.19", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.3", "@fluentui/public-docsite-setup": "^0.3.13", "@fluentui/react-hooks": "^8.6.14", "@fluentui/set-version": "^8.2.3", - "@fluentui/react-monaco-editor": "^1.7.34", + "@fluentui/react-monaco-editor": "^1.7.35", "color-check": "0.0.2", "markdown-to-jsx": "^7.0.0", "office-ui-fabric-core": "^11.0.0", diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index cb96af48309613..f18eaa4013694a 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -23,18 +23,18 @@ "@types/d3-fetch": "^3.0.1" }, "dependencies": { - "@fluentui/azure-themes": "^8.5.36", + "@fluentui/azure-themes": "^8.5.37", "@fluentui/date-time-utilities": "^8.5.3", "@fluentui/dom-utilities": "^2.2.3", "@fluentui/example-data": "^8.4.3", "@fluentui/font-icons-mdl2": "^8.5.4", "@fluentui/foundation-legacy": "^8.2.24", "@fluentui/merge-styles": "^8.5.4", - "@fluentui/react": "^8.103.7", - "@fluentui/react-cards": "^0.205.34", - "@fluentui/react-charting": "^5.14.27", - "@fluentui/react-docsite-components": "^8.10.34", - "@fluentui/react-experiments": "^8.14.29", + "@fluentui/react": "^8.103.8", + "@fluentui/react-cards": "^0.205.35", + "@fluentui/react-charting": "^5.14.28", + "@fluentui/react-docsite-components": "^8.10.35", + "@fluentui/react-experiments": "^8.14.30", "@fluentui/react-file-type-icons": "^8.8.3", "@fluentui/react-focus": "^8.8.10", "@fluentui/react-hooks": "^8.6.14", @@ -42,7 +42,7 @@ "@fluentui/scheme-utilities": "^8.3.20", "@fluentui/style-utilities": "^8.8.3", "@fluentui/theme": "^2.6.19", - "@fluentui/theme-samples": "^8.7.34", + "@fluentui/theme-samples": "^8.7.35", "@fluentui/utilities": "^8.13.4", "@microsoft/load-themed-styles": "^1.10.26", "d3-fetch": "3.0.1", diff --git a/packages/react-experiments/CHANGELOG.json b/packages/react-experiments/CHANGELOG.json index 99156a602ce09e..6dd7864957a51b 100644 --- a/packages/react-experiments/CHANGELOG.json +++ b/packages/react-experiments/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-experiments", "entries": [ + { + "date": "Tue, 13 Dec 2022 07:46:31 GMT", + "tag": "@fluentui/react-experiments_v8.14.30", + "version": "8.14.30", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-experiments", + "comment": "Bump @fluentui/react to v8.103.8", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae" + } + ] + } + }, { "date": "Fri, 09 Dec 2022 07:54:31 GMT", "tag": "@fluentui/react-experiments_v8.14.29", diff --git a/packages/react-experiments/CHANGELOG.md b/packages/react-experiments/CHANGELOG.md index 5ea44449e33a97..e0f1fd4220377b 100644 --- a/packages/react-experiments/CHANGELOG.md +++ b/packages/react-experiments/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-experiments -This log was last generated on Fri, 09 Dec 2022 07:54:31 GMT and should not be manually modified. +This log was last generated on Tue, 13 Dec 2022 07:46:31 GMT and should not be manually modified. +## [8.14.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.30) + +Tue, 13 Dec 2022 07:46:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-experiments_v8.14.29..@fluentui/react-experiments_v8.14.30) + +### Patches + +- Bump @fluentui/react to v8.103.8 ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by beachball) + ## [8.14.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-experiments_v8.14.29) Fri, 09 Dec 2022 07:54:31 GMT diff --git a/packages/react-experiments/package.json b/packages/react-experiments/package.json index b6ccdf2866bb92..72903aca85e4c7 100644 --- a/packages/react-experiments/package.json +++ b/packages/react-experiments/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-experiments", - "version": "8.14.29", + "version": "8.14.30", "description": "Experimental React components for building experiences for Microsoft 365.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -37,7 +37,7 @@ "react-hooks-testing-library": "^0.5.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/theme": "^2.6.19", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.3", diff --git a/packages/react-migration-v8-v9/CHANGELOG.json b/packages/react-migration-v8-v9/CHANGELOG.json index b30da84fb1ae45..1dae9875e64ad8 100644 --- a/packages/react-migration-v8-v9/CHANGELOG.json +++ b/packages/react-migration-v8-v9/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-migration-v8-v9", "entries": [ + { + "date": "Tue, 13 Dec 2022 07:46:31 GMT", + "tag": "@fluentui/react-migration-v8-v9_v1.0.21", + "version": "1.0.21", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-migration-v8-v9", + "comment": "Bump @fluentui/react to v8.103.8", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae" + } + ] + } + }, { "date": "Fri, 09 Dec 2022 07:54:31 GMT", "tag": "@fluentui/react-migration-v8-v9_v1.0.20", diff --git a/packages/react-migration-v8-v9/CHANGELOG.md b/packages/react-migration-v8-v9/CHANGELOG.md index f108f5da6ee2d2..bc23ce2c71dee3 100644 --- a/packages/react-migration-v8-v9/CHANGELOG.md +++ b/packages/react-migration-v8-v9/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-migration-v8-v9 -This log was last generated on Fri, 09 Dec 2022 07:54:31 GMT and should not be manually modified. +This log was last generated on Tue, 13 Dec 2022 07:46:31 GMT and should not be manually modified. +## [1.0.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v1.0.21) + +Tue, 13 Dec 2022 07:46:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-migration-v8-v9_v1.0.20..@fluentui/react-migration-v8-v9_v1.0.21) + +### Patches + +- Bump @fluentui/react to v8.103.8 ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by beachball) + ## [1.0.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-migration-v8-v9_v1.0.20) Fri, 09 Dec 2022 07:54:31 GMT diff --git a/packages/react-migration-v8-v9/package.json b/packages/react-migration-v8-v9/package.json index 192050f100e81f..9637cf69e067fc 100644 --- a/packages/react-migration-v8-v9/package.json +++ b/packages/react-migration-v8-v9/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-migration-v8-v9", - "version": "1.0.20", + "version": "1.0.21", "description": "Migration shim components and methods for hybrid v8/v9 applications building on Fluent UI React.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -29,7 +29,7 @@ }, "dependencies": { "@ctrl/tinycolor": "3.3.4", - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/react-components": "^9.7.2", "@fluentui/react-theme": "^9.1.3", "@fluentui/react-utilities": "^9.2.2", diff --git a/packages/react-monaco-editor/CHANGELOG.json b/packages/react-monaco-editor/CHANGELOG.json index d075aef603add1..fb4668cf83ad5b 100644 --- a/packages/react-monaco-editor/CHANGELOG.json +++ b/packages/react-monaco-editor/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/react-monaco-editor", "entries": [ + { + "date": "Tue, 13 Dec 2022 07:46:31 GMT", + "tag": "@fluentui/react-monaco-editor_v1.7.35", + "version": "1.7.35", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/react-monaco-editor", + "comment": "Bump @fluentui/react to v8.103.8", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae" + } + ] + } + }, { "date": "Fri, 09 Dec 2022 07:54:31 GMT", "tag": "@fluentui/react-monaco-editor_v1.7.34", diff --git a/packages/react-monaco-editor/CHANGELOG.md b/packages/react-monaco-editor/CHANGELOG.md index 47e2ea5cd957f4..93ba80bf6412ec 100644 --- a/packages/react-monaco-editor/CHANGELOG.md +++ b/packages/react-monaco-editor/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/react-monaco-editor -This log was last generated on Fri, 09 Dec 2022 07:54:31 GMT and should not be manually modified. +This log was last generated on Tue, 13 Dec 2022 07:46:31 GMT and should not be manually modified. +## [1.7.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.35) + +Tue, 13 Dec 2022 07:46:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-monaco-editor_v1.7.34..@fluentui/react-monaco-editor_v1.7.35) + +### Patches + +- Bump @fluentui/react to v8.103.8 ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by beachball) + ## [1.7.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-monaco-editor_v1.7.34) Fri, 09 Dec 2022 07:54:31 GMT diff --git a/packages/react-monaco-editor/package.json b/packages/react-monaco-editor/package.json index 55c88e1a6b29ff..758c9e5eacebab 100644 --- a/packages/react-monaco-editor/package.json +++ b/packages/react-monaco-editor/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react-monaco-editor", - "version": "1.7.34", + "version": "1.7.35", "description": "Live React example editing using monaco", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -28,7 +28,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/example-data": "^8.4.3", "@fluentui/monaco-editor": "^1.3.3", diff --git a/packages/react/CHANGELOG.json b/packages/react/CHANGELOG.json index dc28d33cffa980..104a3279d82b51 100644 --- a/packages/react/CHANGELOG.json +++ b/packages/react/CHANGELOG.json @@ -1,6 +1,27 @@ { "name": "@fluentui/react", "entries": [ + { + "date": "Tue, 13 Dec 2022 07:46:30 GMT", + "tag": "@fluentui/react_v8.103.8", + "version": "8.103.8", + "comments": { + "patch": [ + { + "author": "sarah.higley@microsoft.com", + "package": "@fluentui/react", + "commit": "0e5a232bacdd7f5fe8c58b61f789d0e43d800992", + "comment": "fix: Grouped DetailsList alignment and cell count when CollapseAllVisibility is hidden" + }, + { + "author": "sarah.higley@microsoft.com", + "package": "@fluentui/react", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae", + "comment": "fix: Autofill only sets input selectionRange if input is in focus\"" + } + ] + } + }, { "date": "Fri, 09 Dec 2022 07:54:30 GMT", "tag": "@fluentui/react_v8.103.7", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index 29774f2bcd17d1..abe9d042c7f64e 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,9 +1,19 @@ # Change Log - @fluentui/react -This log was last generated on Fri, 09 Dec 2022 07:54:30 GMT and should not be manually modified. +This log was last generated on Tue, 13 Dec 2022 07:46:30 GMT and should not be manually modified. +## [8.103.8](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.103.8) + +Tue, 13 Dec 2022 07:46:30 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react_v8.103.7..@fluentui/react_v8.103.8) + +### Patches + +- fix: Grouped DetailsList alignment and cell count when CollapseAllVisibility is hidden ([PR #25957](https://github.com/microsoft/fluentui/pull/25957) by sarah.higley@microsoft.com) +- fix: Autofill only sets input selectionRange if input is in focus" ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by sarah.higley@microsoft.com) + ## [8.103.7](https://github.com/microsoft/fluentui/tree/@fluentui/react_v8.103.7) Fri, 09 Dec 2022 07:54:30 GMT diff --git a/packages/react/package.json b/packages/react/package.json index 146521da93b6ef..0aa842e346f9c8 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/react", - "version": "8.103.7", + "version": "8.103.8", "description": "Reusable React components for building web experiences.", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/storybook/package.json b/packages/storybook/package.json index d165ce7b71edc5..cfab2325c62fe0 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -22,13 +22,13 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/theme": "^2.6.19", "@storybook/addon-knobs": "6.4.0", "@storybook/addon-essentials": "6.5.5", "@storybook/addons": "6.5.5", - "@fluentui/azure-themes": "^8.5.36", - "@fluentui/theme-samples": "^8.7.34", + "@fluentui/azure-themes": "^8.5.37", + "@fluentui/theme-samples": "^8.7.35", "tslib": "^2.1.0" }, "peerDependencies": { diff --git a/packages/theme-samples/CHANGELOG.json b/packages/theme-samples/CHANGELOG.json index 2bbe918f94c382..9550e868ed080e 100644 --- a/packages/theme-samples/CHANGELOG.json +++ b/packages/theme-samples/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/theme-samples", "entries": [ + { + "date": "Tue, 13 Dec 2022 07:46:31 GMT", + "tag": "@fluentui/theme-samples_v8.7.35", + "version": "8.7.35", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@fluentui/theme-samples", + "comment": "Bump @fluentui/react to v8.103.8", + "commit": "c2b76828654d1cdccc1e710b6bf647992ba4d3ae" + } + ] + } + }, { "date": "Fri, 09 Dec 2022 07:54:31 GMT", "tag": "@fluentui/theme-samples_v8.7.34", diff --git a/packages/theme-samples/CHANGELOG.md b/packages/theme-samples/CHANGELOG.md index d1ab52851d77ed..ef5a5f540fd781 100644 --- a/packages/theme-samples/CHANGELOG.md +++ b/packages/theme-samples/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/theme-samples -This log was last generated on Fri, 09 Dec 2022 07:54:31 GMT and should not be manually modified. +This log was last generated on Tue, 13 Dec 2022 07:46:31 GMT and should not be manually modified. +## [8.7.35](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.35) + +Tue, 13 Dec 2022 07:46:31 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/theme-samples_v8.7.34..@fluentui/theme-samples_v8.7.35) + +### Patches + +- Bump @fluentui/react to v8.103.8 ([PR #25971](https://github.com/microsoft/fluentui/pull/25971) by beachball) + ## [8.7.34](https://github.com/microsoft/fluentui/tree/@fluentui/theme-samples_v8.7.34) Fri, 09 Dec 2022 07:54:31 GMT diff --git a/packages/theme-samples/package.json b/packages/theme-samples/package.json index abf2a58d46441e..7cc8112b6773a0 100644 --- a/packages/theme-samples/package.json +++ b/packages/theme-samples/package.json @@ -1,6 +1,6 @@ { "name": "@fluentui/theme-samples", - "version": "8.7.34", + "version": "8.7.35", "description": "Sample themes for use with Fabric components.", "main": "lib-commonjs/index.js", "module": "lib/index.js", @@ -26,7 +26,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react": "^8.103.7", + "@fluentui/react": "^8.103.8", "@fluentui/set-version": "^8.2.3", "@fluentui/scheme-utilities": "^8.3.20", "tslib": "^2.1.0" From 5256c57f35106c0f80c42e0ca34602c863be5e00 Mon Sep 17 00:00:00 2001 From: Milan Turon Date: Wed, 14 Dec 2022 11:04:09 +0100 Subject: [PATCH 011/172] fix: Carousel fix for FZ - Adding data-is-visible prop (#25973) * adding data-is-visible prop * adress PR comemnt * adding tests * amending changelog * fixing props for behavior test * add comment to explain behavior tests Co-authored-by: mituron --- packages/fluentui/CHANGELOG.md | 2 ++ .../behaviors/Carousel/carouselBehavior.ts | 12 ++++++++++ .../test/behaviors/caroselBehavior-test.tsx | 19 ++++++++++++---- .../src/components/Carousel/Carousel.tsx | 9 ++++++-- .../components/Carousel/Carousel-test.tsx | 22 +++++++++++++++++++ 5 files changed, 58 insertions(+), 6 deletions(-) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index f4ec533ca6c25d..27b24fcf862fed 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -17,6 +17,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Fixes +- `Carousel` fix for FZ - Adding data-is-visible prop #25973 @kolaps33 ([#25973](https://github.com/microsoft/fluentui/pull/25973)) ## [v0.65.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-northstar_v0.65.0) (2022-10-31) diff --git a/packages/fluentui/accessibility/src/behaviors/Carousel/carouselBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Carousel/carouselBehavior.ts index 41d87e79277229..6bdab6e146a98a 100644 --- a/packages/fluentui/accessibility/src/behaviors/Carousel/carouselBehavior.ts +++ b/packages/fluentui/accessibility/src/behaviors/Carousel/carouselBehavior.ts @@ -10,6 +10,8 @@ import { keyboardKey, SpacebarKey } from '../../keyboard-key'; * Adds attribute 'aria-label' to 'itemsContainer' slot if 'navigation' property is true. Does not set the attribute otherwise. * Adds attribute 'role=region' to 'itemsContainer' slot if 'navigation' property is true. Set 'role=none' otherwise. * Adds attribute 'tabIndex=-1' to 'itemsContainer' slot if 'navigation' property is false. Does not set the attribute otherwise. + * Adds attribute 'data-is-visible=false' to 'paddleNext' slot if 'paddleNextHidden' property is true. Does not set the attribute otherwise. + * Adds attribute 'data-is-visible=false' to 'paddlePrevious' slot if 'paddlePreviousHidden' property is false. Does not set the attribute otherwise. * @specification * Adds attribute 'role=region' to 'root' slot. * Adds attribute 'aria-live=polite' to 'itemsContainerWrapper' slot if 'ariaLiveOn' property is true. Sets the attribute to 'off' otherwise. @@ -45,12 +47,20 @@ export const carouselBehavior: Accessibility = props => ( tabIndex: -1, 'aria-hidden': 'true', }), + ...(props.paddleNextHidden && { + // we need the attribute when carousel is inside FZ + 'data-is-visible': 'false', + }), }, paddlePrevious: { ...(props.navigation && { tabIndex: -1, 'aria-hidden': 'true', }), + ...(props.paddlePreviousHidden && { + // we need the attribute when carousel is inside FZ + 'data-is-visible': 'false', + }), }, }, @@ -80,6 +90,8 @@ export type CarouselBehaviorProps = { /** Element type. */ navigation: Object | Object[]; ariaLiveOn: boolean; + paddleNextHidden: boolean; + paddlePreviousHidden: boolean; 'aria-roledescription'?: string; 'aria-label'?: string; }; diff --git a/packages/fluentui/accessibility/test/behaviors/caroselBehavior-test.tsx b/packages/fluentui/accessibility/test/behaviors/caroselBehavior-test.tsx index 4314fdf6b4d194..e5fbf8af3dfb80 100644 --- a/packages/fluentui/accessibility/test/behaviors/caroselBehavior-test.tsx +++ b/packages/fluentui/accessibility/test/behaviors/caroselBehavior-test.tsx @@ -2,11 +2,16 @@ import { carouselBehavior } from '@fluentui/accessibility'; const roleDescription = 'carousel'; const label = 'portrait collection'; +// set both props to false, as tests are writen in 'Carousel-test.tsx' file +const paddleHiddenProps = { + paddlePreviousHidden: false, + paddleNextHidden: false, +}; describe('carouselBehavior.ts', () => { describe('root', () => { test(`sets "role=region" when carousel has NO navigation`, () => { - const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false }); + const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ...paddleHiddenProps }); expect(expectedResult.attributes.root.role).toEqual('region'); }); @@ -15,6 +20,7 @@ describe('carouselBehavior.ts', () => { ariaLiveOn: false, navigation: false, 'aria-roledescription': roleDescription, + ...paddleHiddenProps, }); expect(expectedResult.attributes.root['aria-roledescription']).toEqual(roleDescription); }); @@ -24,6 +30,7 @@ describe('carouselBehavior.ts', () => { ariaLiveOn: false, navigation: false, 'aria-label': label, + ...paddleHiddenProps, }); expect(expectedResult.attributes.root['aria-label']).toEqual(label); }); @@ -34,6 +41,7 @@ describe('carouselBehavior.ts', () => { navigation: true, 'aria-roledescription': roleDescription, 'aria-label': label, + ...paddleHiddenProps, }); expect(expectedResult.attributes.root['aria-roledescription']).toBeUndefined(); expect(expectedResult.attributes.root['aria-label']).toBeUndefined(); @@ -43,7 +51,7 @@ describe('carouselBehavior.ts', () => { describe('itemsContainer', () => { test(`sets "role=region" when carousel has navigation`, () => { - const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true }); + const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: true, ...paddleHiddenProps }); expect(expectedResult.attributes.itemsContainer.role).toEqual('region'); }); @@ -52,6 +60,7 @@ describe('carouselBehavior.ts', () => { ariaLiveOn: false, navigation: true, 'aria-roledescription': roleDescription, + ...paddleHiddenProps, }); expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toEqual(roleDescription); }); @@ -61,6 +70,7 @@ describe('carouselBehavior.ts', () => { ariaLiveOn: false, navigation: true, 'aria-label': label, + ...paddleHiddenProps, }); expect(expectedResult.attributes.itemsContainer['aria-label']).toEqual(label); }); @@ -71,18 +81,19 @@ describe('carouselBehavior.ts', () => { navigation: false, 'aria-roledescription': roleDescription, 'aria-label': label, + ...paddleHiddenProps, }); expect(expectedResult.attributes.itemsContainer['aria-roledescription']).toBeUndefined(); expect(expectedResult.attributes.itemsContainer['aria-label']).toBeUndefined(); }); test(`sets "role=none" when carousel has NO navigation`, () => { - const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false }); + const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ...paddleHiddenProps }); expect(expectedResult.attributes.itemsContainer.role).toEqual('none'); }); test(`sets "tabindex=-1" when carousel has NO navigation`, () => { - const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false }); + const expectedResult = carouselBehavior({ ariaLiveOn: false, navigation: false, ...paddleHiddenProps }); expect(expectedResult.attributes.itemsContainer.tabIndex).toEqual(-1); }); }); diff --git a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx index ddf3cb305c0550..67b981e9597250 100644 --- a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx +++ b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx @@ -225,6 +225,9 @@ export const Carousel = (React.forwardRef((props, [items?.length], ); + const nextPaddleHidden = items !== undefined && !circular && activeIndex === items.length - 1; + const previousPaddleHidden = items !== undefined && !circular && activeIndex === 0; + const unhandledProps = useUnhandledProps(Carousel.handledProps, props); const getA11yProps = useAccessibility(accessibility, { debugName: Carousel.displayName, @@ -249,6 +252,8 @@ export const Carousel = (React.forwardRef((props, }, }, mapPropsToBehavior: () => ({ + paddlePreviousHidden: previousPaddleHidden, + paddleNextHidden: nextPaddleHidden, navigation, ariaLiveOn, 'aria-roledescription': ariaRoleDescription, @@ -428,7 +433,7 @@ export const Carousel = (React.forwardRef((props, getA11yProps('paddlePrevious', { className: carouselSlotClassNames.paddlePrevious, previous: true, - hidden: items !== undefined && !circular && activeIndex === 0, + hidden: previousPaddleHidden, disableClickableNav, }), overrideProps: (predefinedProps: CarouselPaddleProps) => @@ -441,7 +446,7 @@ export const Carousel = (React.forwardRef((props, getA11yProps('paddleNext', { className: carouselSlotClassNames.paddleNext, next: true, - hidden: items !== undefined && !circular && activeIndex === items.length - 1, + hidden: nextPaddleHidden, disableClickableNav, }), overrideProps: (predefinedProps: CarouselPaddleProps) => handlePaddleOverrides(predefinedProps, 'paddleNext'), diff --git a/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx index 1845ff374fac07..152ae0917ddadf 100644 --- a/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx +++ b/packages/fluentui/react-northstar/test/specs/components/Carousel/Carousel-test.tsx @@ -344,4 +344,26 @@ describe('Carousel', () => { ).toBe(animationEnterFromNext); }); }); + + describe('focus zone "visible" attribute', () => { + it('should has data-is-visible=false when previous paddle is hidden', () => { + const wrapper = renderCarousel({ defaultActiveIndex: 0 }); + const paddlePrevios = getPaddlePreviousWrapper(wrapper).getDOMNode(); + const paddleNext = getPaddleNextWrapper(wrapper).getDOMNode(); + + expect(paddlePrevios).toHaveAttribute('data-is-visible'); + expect(paddlePrevios.getAttribute('data-is-visible')).toEqual('false'); + expect(paddleNext).not.toHaveAttribute('data-is-visible'); + }); + + it('should has data-is-visible=false when next paddle is hidden', () => { + const wrapper = renderCarousel({ defaultActiveIndex: 3 }); + const paddleNext = getPaddleNextWrapper(wrapper).getDOMNode(); + const paddlePrevios = getPaddlePreviousWrapper(wrapper).getDOMNode(); + + expect(paddleNext).toHaveAttribute('data-is-visible'); + expect(paddleNext.getAttribute('data-is-visible')).toEqual('false'); + expect(paddlePrevios).not.toHaveAttribute('data-is-visible'); + }); + }); }); From a2eb241e4ef14e012bb3fd346426e6e321b7eb8f Mon Sep 17 00:00:00 2001 From: chajun <86579954+chpalac@users.noreply.github.com> Date: Wed, 14 Dec 2022 11:06:05 -0300 Subject: [PATCH 012/172] chore: add changelog (#25987) --- packages/fluentui/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 27b24fcf862fed..7240e46edf4ef3 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -20,6 +20,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - `Carousel` fix for FZ - Adding data-is-visible prop #25973 @kolaps33 ([#25973](https://github.com/microsoft/fluentui/pull/25973)) +### Fixes + +- Fix `Dropdown` allowing interaction with selected items when disabled @chpalac ([#25954](https://github.com/microsoft/fluentui/pull/25954)) + ## [v0.65.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-northstar_v0.65.0) (2022-10-31) [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-northstar_v0.64.0..@fluentui/react-northstar_v0.65.0) From 134bbf565b13a0375a8db4ac022737d45e46c425 Mon Sep 17 00:00:00 2001 From: Amber Date: Wed, 14 Dec 2022 15:42:30 +0100 Subject: [PATCH 013/172] Update CHANGELOG.md (#25988) --- packages/fluentui/CHANGELOG.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 7240e46edf4ef3..7c3614365accb1 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -17,11 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] -### Fixes -- `Carousel` fix for FZ - Adding data-is-visible prop #25973 @kolaps33 ([#25973](https://github.com/microsoft/fluentui/pull/25973)) ### Fixes - +- `Carousel` fix for FZ - Adding data-is-visible prop #25973 @kolaps33 ([#25973](https://github.com/microsoft/fluentui/pull/25973)) - Fix `Dropdown` allowing interaction with selected items when disabled @chpalac ([#25954](https://github.com/microsoft/fluentui/pull/25954)) From 9c6efea1aea75e3e0d7355a729785ade9af638c5 Mon Sep 17 00:00:00 2001 From: Ben Howell <48106640+behowell@users.noreply.github.com> Date: Wed, 14 Dec 2022 13:31:13 -0800 Subject: [PATCH 014/172] chore: Update Checkbox and Radio to use griffel reset styles (#25984) Use Griffel's makeResetStyles to combine all of the base styles for each of Checkbox and Radio's slots into a single CSS class. Also, merge the styles for the default state into the base styles (size: medium, labelPosition: after). --- ...-a337788c-cf01-4300-b7e9-9cfccba53f4c.json | 7 + ...-3244b173-95d4-4d07-aaf7-21e05ff4234a.json | 7 + .../components/Checkbox/useCheckboxStyles.ts | 250 +++++++++--------- .../src/components/Radio/useRadioStyles.ts | 201 +++++++------- 4 files changed, 236 insertions(+), 229 deletions(-) create mode 100644 change/@fluentui-react-checkbox-a337788c-cf01-4300-b7e9-9cfccba53f4c.json create mode 100644 change/@fluentui-react-radio-3244b173-95d4-4d07-aaf7-21e05ff4234a.json diff --git a/change/@fluentui-react-checkbox-a337788c-cf01-4300-b7e9-9cfccba53f4c.json b/change/@fluentui-react-checkbox-a337788c-cf01-4300-b7e9-9cfccba53f4c.json new file mode 100644 index 00000000000000..a1c11f1a682c09 --- /dev/null +++ b/change/@fluentui-react-checkbox-a337788c-cf01-4300-b7e9-9cfccba53f4c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Update Checkbox to use griffel reset styles", + "packageName": "@fluentui/react-checkbox", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-radio-3244b173-95d4-4d07-aaf7-21e05ff4234a.json b/change/@fluentui-react-radio-3244b173-95d4-4d07-aaf7-21e05ff4234a.json new file mode 100644 index 00000000000000..bcaa0c7acbfda2 --- /dev/null +++ b/change/@fluentui-react-radio-3244b173-95d4-4d07-aaf7-21e05ff4234a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Update Radio to use griffel reset styles", + "packageName": "@fluentui/react-radio", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts index f4ad51ad52c338..d0d22c2a609a3f 100644 --- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts +++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts @@ -1,4 +1,4 @@ -import { shorthands, makeStyles, mergeClasses } from '@griffel/react'; +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import { tokens } from '@fluentui/react-theme'; import { CheckboxSlots, CheckboxState } from './Checkbox.types'; @@ -15,133 +15,134 @@ export const checkboxClassNames: SlotClassNames = { const indicatorSizeMedium = '16px'; const indicatorSizeLarge = '20px'; -const useRootStyles = makeStyles({ - base: { - position: 'relative', - display: 'inline-flex', - ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }), - }, +const useRootBaseClassName = makeResetStyles({ + position: 'relative', + display: 'inline-flex', + ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }), }); -const useInputStyles = makeStyles({ - base: { - boxSizing: 'border-box', - cursor: 'pointer', - height: '100%', - ...shorthands.margin(0), +const useInputBaseClassName = makeResetStyles({ + boxSizing: 'border-box', + cursor: 'pointer', + height: '100%', + margin: 0, + opacity: 0, + position: 'absolute', + top: 0, + // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it. + // This is done so that clicking on that "empty space" still toggles the checkbox. + width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`, + + // When unchecked, hide the the checkmark icon (child of the indicator slot) + [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: { opacity: 0, - position: 'absolute', - top: 0, + }, - // When unchecked, hide the the checkmark icon (child of the indicator slot) - [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: { - opacity: 0, + // Colors for the unchecked state + ':enabled:not(:checked):not(:indeterminate)': { + [`& ~ .${checkboxClassNames.label}`]: { + color: tokens.colorNeutralForeground3, + }, + [`& ~ .${checkboxClassNames.indicator}`]: { + borderColor: tokens.colorNeutralStrokeAccessible, }, - // Colors for the unchecked state - ':enabled:not(:checked):not(:indeterminate)': { + ':hover': { [`& ~ .${checkboxClassNames.label}`]: { - color: tokens.colorNeutralForeground3, + color: tokens.colorNeutralForeground2, }, [`& ~ .${checkboxClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible), - }, - - ':hover': { - [`& ~ .${checkboxClassNames.label}`]: { - color: tokens.colorNeutralForeground2, - }, - [`& ~ .${checkboxClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover), - }, - }, - - ':active:hover': { - [`& ~ .${checkboxClassNames.label}`]: { - color: tokens.colorNeutralForeground1, - }, - [`& ~ .${checkboxClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed), - }, + borderColor: tokens.colorNeutralStrokeAccessibleHover, }, }, - // Colors for the checked state - ':enabled:checked:not(:indeterminate)': { + ':active:hover': { [`& ~ .${checkboxClassNames.label}`]: { color: tokens.colorNeutralForeground1, }, [`& ~ .${checkboxClassNames.indicator}`]: { - backgroundColor: tokens.colorCompoundBrandBackground, - color: tokens.colorNeutralForegroundInverted, - ...shorthands.borderColor(tokens.colorCompoundBrandBackground), + borderColor: tokens.colorNeutralStrokeAccessiblePressed, }, + }, + }, - ':hover': { - [`& ~ .${checkboxClassNames.indicator}`]: { - backgroundColor: tokens.colorCompoundBrandBackgroundHover, - ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover), - }, - }, + // Colors for the checked state + ':enabled:checked:not(:indeterminate)': { + [`& ~ .${checkboxClassNames.label}`]: { + color: tokens.colorNeutralForeground1, + }, + [`& ~ .${checkboxClassNames.indicator}`]: { + backgroundColor: tokens.colorCompoundBrandBackground, + color: tokens.colorNeutralForegroundInverted, + borderColor: tokens.colorCompoundBrandBackground, + }, - ':active:hover': { - [`& ~ .${checkboxClassNames.indicator}`]: { - backgroundColor: tokens.colorCompoundBrandBackgroundPressed, - ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed), - }, + ':hover': { + [`& ~ .${checkboxClassNames.indicator}`]: { + backgroundColor: tokens.colorCompoundBrandBackgroundHover, + borderColor: tokens.colorCompoundBrandBackgroundHover, }, }, - // Colors for the mixed state - ':enabled:indeterminate': { - [`& ~ .${checkboxClassNames.label}`]: { - color: tokens.colorNeutralForeground1, - }, + ':active:hover': { [`& ~ .${checkboxClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorCompoundBrandStroke), - color: tokens.colorCompoundBrandForeground1, + backgroundColor: tokens.colorCompoundBrandBackgroundPressed, + borderColor: tokens.colorCompoundBrandBackgroundPressed, }, + }, + }, + + // Colors for the mixed state + ':enabled:indeterminate': { + [`& ~ .${checkboxClassNames.label}`]: { + color: tokens.colorNeutralForeground1, + }, + [`& ~ .${checkboxClassNames.indicator}`]: { + borderColor: tokens.colorCompoundBrandStroke, + color: tokens.colorCompoundBrandForeground1, + }, - ':hover': { - [`& ~ .${checkboxClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover), - color: tokens.colorCompoundBrandForeground1Hover, - }, + ':hover': { + [`& ~ .${checkboxClassNames.indicator}`]: { + borderColor: tokens.colorCompoundBrandStrokeHover, + color: tokens.colorCompoundBrandForeground1Hover, }, + }, - ':active:hover': { - [`& ~ .${checkboxClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed), - color: tokens.colorCompoundBrandForeground1Pressed, - }, + ':active:hover': { + [`& ~ .${checkboxClassNames.indicator}`]: { + borderColor: tokens.colorCompoundBrandStrokePressed, + color: tokens.colorCompoundBrandForeground1Pressed, }, }, + }, - ':disabled': { - cursor: 'default', + ':disabled': { + cursor: 'default', - [`& ~ .${checkboxClassNames.label}`]: { - cursor: 'default', - color: tokens.colorNeutralForegroundDisabled, - '@media (forced-colors: active)': { - color: 'GrayText', - }, + [`& ~ .${checkboxClassNames.label}`]: { + cursor: 'default', + color: tokens.colorNeutralForegroundDisabled, + '@media (forced-colors: active)': { + color: 'GrayText', }, - [`& ~ .${checkboxClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), - color: tokens.colorNeutralForegroundDisabled, - '@media (forced-colors: active)': { - color: 'GrayText', - }, + }, + [`& ~ .${checkboxClassNames.indicator}`]: { + borderColor: tokens.colorNeutralStrokeDisabled, + color: tokens.colorNeutralForegroundDisabled, + '@media (forced-colors: active)': { + color: 'GrayText', }, - [`& ~ .${checkboxClassNames.indicator} svg`]: { - '@media (forced-colors: active)': { - color: 'GrayText', - }, + }, + [`& ~ .${checkboxClassNames.indicator} svg`]: { + '@media (forced-colors: active)': { + color: 'GrayText', }, }, }, +}); +const useInputStyles = makeStyles({ before: { right: 0, }, @@ -149,40 +150,33 @@ const useInputStyles = makeStyles({ left: 0, }, - // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it. - // This is done so that clicking on that "empty space" still toggles the checkbox. - medium: { - width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`, - }, large: { width: `calc(${indicatorSizeLarge} + 2 * ${tokens.spacingHorizontalS})`, }, }); -const useIndicatorStyles = makeStyles({ - base: { - alignSelf: 'flex-start', - boxSizing: 'border-box', - flexShrink: 0, - - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - ...shorthands.overflow('hidden'), - - ...shorthands.border(tokens.strokeWidthThin, 'solid'), - ...shorthands.borderRadius(tokens.borderRadiusSmall), - ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS), - fill: 'currentColor', - pointerEvents: 'none', - }, - - medium: { - fontSize: '12px', - height: indicatorSizeMedium, - width: indicatorSizeMedium, - }, +const useIndicatorBaseClassName = makeResetStyles({ + alignSelf: 'flex-start', + boxSizing: 'border-box', + flexShrink: 0, + + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + overflow: 'hidden', + + border: tokens.strokeWidthThin + ' solid', + borderRadius: tokens.borderRadiusSmall, + margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS, + fill: 'currentColor', + pointerEvents: 'none', + + fontSize: '12px', + height: indicatorSizeMedium, + width: indicatorSizeMedium, +}); +const useIndicatorStyles = makeStyles({ large: { fontSize: '16px', height: indicatorSizeLarge, @@ -194,10 +188,10 @@ const useIndicatorStyles = makeStyles({ }, }); +// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles. const useLabelStyles = makeStyles({ base: { alignSelf: 'center', - color: 'inherit', cursor: 'pointer', ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS), }, @@ -225,26 +219,28 @@ const useLabelStyles = makeStyles({ * Apply styling to the Checkbox slots based on the state */ export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => { - const rootStyles = useRootStyles(); - state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className); - const { labelPosition, shape, size } = state; + const rootBaseClassName = useRootBaseClassName(); + state.root.className = mergeClasses(checkboxClassNames.root, rootBaseClassName, state.root.className); + + const inputBaseClassName = useInputBaseClassName(); const inputStyles = useInputStyles(); state.input.className = mergeClasses( checkboxClassNames.input, - inputStyles.base, - inputStyles[size], + inputBaseClassName, + size === 'large' && inputStyles.large, inputStyles[labelPosition], state.input.className, ); + const indicatorBaseClassName = useIndicatorBaseClassName(); const indicatorStyles = useIndicatorStyles(); if (state.indicator) { state.indicator.className = mergeClasses( checkboxClassNames.indicator, - indicatorStyles.base, - indicatorStyles[size], + indicatorBaseClassName, + size === 'large' && indicatorStyles.large, shape === 'circular' && indicatorStyles.circular, state.indicator.className, ); diff --git a/packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts index b08bd96eda3622..4f5d2c1ad84e2c 100644 --- a/packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts +++ b/packages/react-components/react-radio/src/components/Radio/useRadioStyles.ts @@ -1,6 +1,6 @@ import { createFocusOutlineStyle } from '@fluentui/react-tabster'; import { tokens } from '@fluentui/react-theme'; -import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react'; import type { RadioSlots, RadioState } from './Radio.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -14,145 +14,137 @@ export const radioClassNames: SlotClassNames = { // The indicator size is used by the indicator and label styles const indicatorSize = '16px'; -/** - * Styles for the root slot - */ -const useRootStyles = makeStyles({ - base: { - display: 'inline-flex', - position: 'relative', - }, +const useRootBaseClassName = makeResetStyles({ + display: 'inline-flex', + position: 'relative', + ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }), +}); +const useRootStyles = makeStyles({ vertical: { flexDirection: 'column', alignItems: 'center', }, - - focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }), }); -const useInputStyles = makeStyles({ - base: { - position: 'absolute', - left: 0, - top: 0, - width: '100%', - height: '100%', - boxSizing: 'border-box', - ...shorthands.margin(0), - opacity: 0, - - ':enabled': { +const useInputBaseClassName = makeResetStyles({ + position: 'absolute', + left: 0, + top: 0, + width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`, + height: '100%', + boxSizing: 'border-box', + margin: 0, + opacity: 0, + + ':enabled': { + cursor: 'pointer', + [`& ~ .${radioClassNames.label}`]: { cursor: 'pointer', - [`& ~ .${radioClassNames.label}`]: { - cursor: 'pointer', - }, }, + }, + + // When unchecked, hide the circle icon (child of the indicator) + [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: { + opacity: '0', + }, - // When unchecked, hide the circle icon (child of the indicator) - [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: { - opacity: '0', + // Colors for the unchecked state + ':enabled:not(:checked)': { + [`& ~ .${radioClassNames.label}`]: { + color: tokens.colorNeutralForeground3, + }, + [`& ~ .${radioClassNames.indicator}`]: { + borderColor: tokens.colorNeutralStrokeAccessible, }, - // Colors for the unchecked state - ':enabled:not(:checked)': { + ':hover': { [`& ~ .${radioClassNames.label}`]: { - color: tokens.colorNeutralForeground3, + color: tokens.colorNeutralForeground2, }, [`& ~ .${radioClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible), - }, - - ':hover': { - [`& ~ .${radioClassNames.label}`]: { - color: tokens.colorNeutralForeground2, - }, - [`& ~ .${radioClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover), - }, - }, - - ':hover:active': { - [`& ~ .${radioClassNames.label}`]: { - color: tokens.colorNeutralForeground1, - }, - [`& ~ .${radioClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed), - }, + borderColor: tokens.colorNeutralStrokeAccessibleHover, }, }, - // Colors for the checked state - ':enabled:checked': { + ':hover:active': { [`& ~ .${radioClassNames.label}`]: { color: tokens.colorNeutralForeground1, }, [`& ~ .${radioClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorCompoundBrandStroke), - color: tokens.colorCompoundBrandForeground1, + borderColor: tokens.colorNeutralStrokeAccessiblePressed, }, + }, + }, - ':hover': { - [`& ~ .${radioClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover), - color: tokens.colorCompoundBrandForeground1Hover, - }, - }, + // Colors for the checked state + ':enabled:checked': { + [`& ~ .${radioClassNames.label}`]: { + color: tokens.colorNeutralForeground1, + }, + [`& ~ .${radioClassNames.indicator}`]: { + borderColor: tokens.colorCompoundBrandStroke, + color: tokens.colorCompoundBrandForeground1, + }, - ':hover:active': { - [`& ~ .${radioClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed), - color: tokens.colorCompoundBrandForeground1Pressed, - }, + ':hover': { + [`& ~ .${radioClassNames.indicator}`]: { + borderColor: tokens.colorCompoundBrandStrokeHover, + color: tokens.colorCompoundBrandForeground1Hover, }, }, - // Colors for the disabled state - ':disabled': { - [`& ~ .${radioClassNames.label}`]: { - color: tokens.colorNeutralForegroundDisabled, - cursor: 'default', - }, + ':hover:active': { [`& ~ .${radioClassNames.indicator}`]: { - ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled), - color: tokens.colorNeutralForegroundDisabled, + borderColor: tokens.colorCompoundBrandStrokePressed, + color: tokens.colorCompoundBrandForeground1Pressed, }, }, }, - after: { - width: `calc(${indicatorSize} + 2 * ${tokens.spacingHorizontalS})`, + // Colors for the disabled state + ':disabled': { + [`& ~ .${radioClassNames.label}`]: { + color: tokens.colorNeutralForegroundDisabled, + cursor: 'default', + }, + [`& ~ .${radioClassNames.indicator}`]: { + borderColor: tokens.colorNeutralStrokeDisabled, + color: tokens.colorNeutralForegroundDisabled, + }, }, +}); + +const useInputStyles = makeStyles({ below: { + width: '100%', height: `calc(${indicatorSize} + 2 * ${tokens.spacingVerticalS})`, }, }); -const useIndicatorStyles = makeStyles({ - base: { - width: indicatorSize, - height: indicatorSize, - fontSize: '12px', - boxSizing: 'border-box', - flexShrink: 0, - - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - ...shorthands.overflow('hidden'), - - ...shorthands.border(tokens.strokeWidthThin, 'solid'), - ...shorthands.borderRadius(tokens.borderRadiusCircular), - ...shorthands.margin(tokens.spacingVerticalS, tokens.spacingHorizontalS), - fill: 'currentColor', - pointerEvents: 'none', - }, +const useIndicatorBaseClassName = makeResetStyles({ + width: indicatorSize, + height: indicatorSize, + fontSize: '12px', + boxSizing: 'border-box', + flexShrink: 0, + + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + overflow: 'hidden', + + border: tokens.strokeWidthThin + ' solid', + borderRadius: tokens.borderRadiusCircular, + margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS, + fill: 'currentColor', + pointerEvents: 'none', }); +// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles. const useLabelStyles = makeStyles({ base: { alignSelf: 'center', - ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS), }, @@ -177,25 +169,30 @@ const useLabelStyles = makeStyles({ export const useRadioStyles_unstable = (state: RadioState) => { const { labelPosition } = state; + const rootBaseClassName = useRootBaseClassName(); const rootStyles = useRootStyles(); state.root.className = mergeClasses( radioClassNames.root, - rootStyles.base, - rootStyles.focusIndicator, + rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className, ); + const inputBaseClassName = useInputBaseClassName(); const inputStyles = useInputStyles(); state.input.className = mergeClasses( radioClassNames.input, - inputStyles.base, - inputStyles[labelPosition], + inputBaseClassName, + labelPosition === 'below' && inputStyles.below, state.input.className, ); - const indicatorStyles = useIndicatorStyles(); - state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className); + const indicatorBaseClassName = useIndicatorBaseClassName(); + state.indicator.className = mergeClasses( + radioClassNames.indicator, + indicatorBaseClassName, + state.indicator.className, + ); const labelStyles = useLabelStyles(); if (state.label) { From fdd8d8fb759a143e8f3d6792960ca10b197c3b23 Mon Sep 17 00:00:00 2001 From: tomi-msft <66456876+tomi-msft@users.noreply.github.com> Date: Wed, 14 Dec 2022 14:05:38 -0800 Subject: [PATCH 015/172] Rename Progress to ProgressBar (#25929) * Rename Progress to ProgressBar * api update and add deprecations * change files * Add deprecation warnings * api update * update imports in unstable * change files * api update * Update packages/react-components/react-progress/stories/ProgressBar/ProgressBarBestPractices.md Co-authored-by: Sean Monahan * keep deprecated exports * deprecation lint * Add deprecated types * api update react-components * Apply suggestions from code review Co-authored-by: Esteban Munoz Facusse * Add issue tracking to deprecated exports Co-authored-by: Sean Monahan Co-authored-by: Esteban Munoz Facusse --- .../src/stories/Progress.stories.tsx | 20 ------ .../src/stories/ProgressBar.stories.tsx | 20 ++++++ ...-28b3a6df-bf1f-41a8-b45b-609aba970cf9.json | 7 ++ ...-0f8045ac-14c1-4bda-8b82-094dc882f245.json | 7 ++ .../etc/react-components.unstable.api.md | 24 +++++++ .../react-components/src/unstable/index.ts | 30 ++++++++- .../bundle-size/Progress.fixture.js | 7 -- .../bundle-size/ProgressBar.fixture.js | 7 ++ .../react-progress/docs/MIGRATION.md | 8 +-- .../react-progress/docs/Spec.md | 36 +++++----- .../react-progress/etc/react-progress.api.md | 66 ++++++++++++++----- .../react-progress/src/Progress.ts | 1 - .../react-progress/src/ProgressBar.ts | 1 + .../src/components/Progress/Progress.tsx | 18 ----- .../src/components/Progress/Progress.types.ts | 53 --------------- .../src/components/Progress/index.ts | 5 -- .../components/Progress/renderProgress.tsx | 11 ---- .../ProgressBar.test.tsx} | 18 ++--- .../components/ProgressBar/ProgressBar.tsx | 22 +++++++ .../ProgressBar/ProgressBar.types.ts | 65 ++++++++++++++++++ .../src/components/ProgressBar/index.ts | 5 ++ .../ProgressBar/renderProgressBar.tsx | 15 +++++ .../useProgressBar.tsx} | 20 +++--- .../useProgressBarStyles.ts} | 34 ++++++---- .../ProgressField/ProgressField.tsx | 6 +- .../react-progress/src/index.ts | 32 ++++++++- .../Progress/ProgressDefault.stories.tsx | 6 -- .../ProgressIndeterminate.stories.tsx | 15 ----- .../stories/Progress/index.stories.tsx | 23 ------- .../ProgressBarBestPractices.md} | 4 +- .../ProgressBarDefault.stories.tsx | 6 ++ .../ProgressBarDescription.md} | 0 .../ProgressBarIndeterminate.stories.tsx | 15 +++++ .../ProgressBarMax.stories.tsx} | 6 +- .../ProgressBarShape.stories.tsx} | 8 +-- .../ProgressBarThickness.stories.tsx | 8 +-- .../ProgressBarValidationState.stories.tsx} | 8 +-- .../stories/ProgressBar/index.stories.tsx | 23 +++++++ 38 files changed, 408 insertions(+), 252 deletions(-) delete mode 100644 apps/vr-tests-react-components/src/stories/Progress.stories.tsx create mode 100644 apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx create mode 100644 change/@fluentui-react-components-28b3a6df-bf1f-41a8-b45b-609aba970cf9.json create mode 100644 change/@fluentui-react-progress-0f8045ac-14c1-4bda-8b82-094dc882f245.json delete mode 100644 packages/react-components/react-progress/bundle-size/Progress.fixture.js create mode 100644 packages/react-components/react-progress/bundle-size/ProgressBar.fixture.js delete mode 100644 packages/react-components/react-progress/src/Progress.ts create mode 100644 packages/react-components/react-progress/src/ProgressBar.ts delete mode 100644 packages/react-components/react-progress/src/components/Progress/Progress.tsx delete mode 100644 packages/react-components/react-progress/src/components/Progress/Progress.types.ts delete mode 100644 packages/react-components/react-progress/src/components/Progress/index.ts delete mode 100644 packages/react-components/react-progress/src/components/Progress/renderProgress.tsx rename packages/react-components/react-progress/src/components/{Progress/Progress.test.tsx => ProgressBar/ProgressBar.test.tsx} (81%) create mode 100644 packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx create mode 100644 packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts create mode 100644 packages/react-components/react-progress/src/components/ProgressBar/index.ts create mode 100644 packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx rename packages/react-components/react-progress/src/components/{Progress/useProgress.tsx => ProgressBar/useProgressBar.tsx} (53%) rename packages/react-components/react-progress/src/components/{Progress/useProgressStyles.ts => ProgressBar/useProgressBarStyles.ts} (76%) delete mode 100644 packages/react-components/react-progress/stories/Progress/ProgressDefault.stories.tsx delete mode 100644 packages/react-components/react-progress/stories/Progress/ProgressIndeterminate.stories.tsx delete mode 100644 packages/react-components/react-progress/stories/Progress/index.stories.tsx rename packages/react-components/react-progress/stories/{Progress/ProgressBestPractices.md => ProgressBar/ProgressBarBestPractices.md} (69%) create mode 100644 packages/react-components/react-progress/stories/ProgressBar/ProgressBarDefault.stories.tsx rename packages/react-components/react-progress/stories/{Progress/ProgressDescription.md => ProgressBar/ProgressBarDescription.md} (100%) create mode 100644 packages/react-components/react-progress/stories/ProgressBar/ProgressBarIndeterminate.stories.tsx rename packages/react-components/react-progress/stories/{Progress/ProgressMax.stories.tsx => ProgressBar/ProgressBarMax.stories.tsx} (73%) rename packages/react-components/react-progress/stories/{Progress/ProgressShape.stories.tsx => ProgressBar/ProgressBarShape.stories.tsx} (52%) rename packages/react-components/react-progress/stories/{Progress => ProgressBar}/ProgressBarThickness.stories.tsx (56%) rename packages/react-components/react-progress/stories/{Progress/ProgressValidationState.stories.tsx => ProgressBar/ProgressBarValidationState.stories.tsx} (72%) create mode 100644 packages/react-components/react-progress/stories/ProgressBar/index.stories.tsx diff --git a/apps/vr-tests-react-components/src/stories/Progress.stories.tsx b/apps/vr-tests-react-components/src/stories/Progress.stories.tsx deleted file mode 100644 index dbcb867f9375c8..00000000000000 --- a/apps/vr-tests-react-components/src/stories/Progress.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import { storiesOf } from '@storybook/react'; -import { Progress } from '@fluentui/react-progress'; - -storiesOf('Progress converged', module) - .addStory('Indeterminate', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('Indeterminate with thickness large', () => ) - .addStory('Determinate', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('Determinate with thickness large', () => ) - .addStory('Error', () => ) - .addStory('Warning', () => ) - .addStory('Success', () => ); diff --git a/apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx b/apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx new file mode 100644 index 00000000000000..3af10e14e95582 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/ProgressBar.stories.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; +import { storiesOf } from '@storybook/react'; +import { ProgressBar } from '@fluentui/react-progress'; + +storiesOf('ProgressBar converged', module) + .addStory('Indeterminate', () => , { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }) + .addStory('Indeterminate with thickness large', () => ) + .addStory('Determinate', () => , { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }) + .addStory('Determinate with thickness large', () => ) + .addStory('Error', () => ) + .addStory('Warning', () => ) + .addStory('Success', () => ); diff --git a/change/@fluentui-react-components-28b3a6df-bf1f-41a8-b45b-609aba970cf9.json b/change/@fluentui-react-components-28b3a6df-bf1f-41a8-b45b-609aba970cf9.json new file mode 100644 index 00000000000000..d539614d8fca52 --- /dev/null +++ b/change/@fluentui-react-components-28b3a6df-bf1f-41a8-b45b-609aba970cf9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Rename Progress to ProgressBar", + "packageName": "@fluentui/react-components", + "email": "ololubek@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-progress-0f8045ac-14c1-4bda-8b82-094dc882f245.json b/change/@fluentui-react-progress-0f8045ac-14c1-4bda-8b82-094dc882f245.json new file mode 100644 index 00000000000000..7925d378a147d1 --- /dev/null +++ b/change/@fluentui-react-progress-0f8045ac-14c1-4bda-8b82-094dc882f245.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: Change name to ProgressBar", + "packageName": "@fluentui/react-progress", + "email": "ololubek@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md index 279fe65305bd94..89c30dc1064660 100644 --- a/packages/react-components/react-components/etc/react-components.unstable.api.md +++ b/packages/react-components/react-components/etc/react-components.unstable.api.md @@ -136,6 +136,11 @@ import { PersonaProps } from '@fluentui/react-persona'; import { PersonaSlots } from '@fluentui/react-persona'; import { PersonaState } from '@fluentui/react-persona'; import { Progress } from '@fluentui/react-progress'; +import { ProgressBar } from '@fluentui/react-progress'; +import { progressBarClassNames } from '@fluentui/react-progress'; +import { ProgressBarProps } from '@fluentui/react-progress'; +import { ProgressBarSlots } from '@fluentui/react-progress'; +import { ProgressBarState } from '@fluentui/react-progress'; import { progressClassNames } from '@fluentui/react-progress'; import { ProgressField_unstable as ProgressField } from '@fluentui/react-progress'; import { progressFieldClassNames } from '@fluentui/react-progress'; @@ -167,6 +172,7 @@ import { renderOption_unstable } from '@fluentui/react-combobox'; import { renderOptionGroup_unstable } from '@fluentui/react-combobox'; import { renderPersona_unstable } from '@fluentui/react-persona'; import { renderProgress_unstable } from '@fluentui/react-progress'; +import { renderProgressBar_unstable } from '@fluentui/react-progress'; import { renderSelect_unstable } from '@fluentui/react-select'; import { renderTable_unstable } from '@fluentui/react-table'; import { renderTableBody_unstable } from '@fluentui/react-table'; @@ -318,6 +324,8 @@ import { useOverflowMenu } from '@fluentui/react-overflow'; import { usePersona_unstable } from '@fluentui/react-persona'; import { usePersonaStyles_unstable } from '@fluentui/react-persona'; import { useProgress_unstable } from '@fluentui/react-progress'; +import { useProgressBar_unstable } from '@fluentui/react-progress'; +import { useProgressBarStyles_unstable } from '@fluentui/react-progress'; import { useProgressStyles_unstable } from '@fluentui/react-progress'; import { useSelect_unstable } from '@fluentui/react-select'; import { useSelectStyles_unstable } from '@fluentui/react-select'; @@ -612,6 +620,16 @@ export { PersonaState } export { Progress } +export { ProgressBar } + +export { progressBarClassNames } + +export { ProgressBarProps } + +export { ProgressBarSlots } + +export { ProgressBarState } + export { progressClassNames } export { ProgressField } @@ -674,6 +692,8 @@ export { renderPersona_unstable } export { renderProgress_unstable } +export { renderProgressBar_unstable } + export { renderSelect_unstable } export { renderTable_unstable } @@ -977,6 +997,10 @@ export { usePersonaStyles_unstable } export { useProgress_unstable } +export { useProgressBar_unstable } + +export { useProgressBarStyles_unstable } + export { useProgressStyles_unstable } export { useSelect_unstable } diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index 9d12886c06de72..2cc1bf811b3488 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -363,10 +363,38 @@ export { export type { PersonaProps, PersonaState, PersonaSlots } from '@fluentui/react-persona'; export { + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation Progress, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation progressClassNames, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation renderProgress_unstable, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation useProgressStyles_unstable, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation useProgress_unstable, + ProgressBar, + progressBarClassNames, + renderProgressBar_unstable, + useProgressBarStyles_unstable, + useProgressBar_unstable, +} from '@fluentui/react-progress'; +export type { + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation + ProgressProps, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation + ProgressState, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation + ProgressSlots, + ProgressBarProps, + ProgressBarState, + ProgressBarSlots, } from '@fluentui/react-progress'; -export type { ProgressProps, ProgressState, ProgressSlots } from '@fluentui/react-progress'; diff --git a/packages/react-components/react-progress/bundle-size/Progress.fixture.js b/packages/react-components/react-progress/bundle-size/Progress.fixture.js deleted file mode 100644 index 73a0b613245c9c..00000000000000 --- a/packages/react-components/react-progress/bundle-size/Progress.fixture.js +++ /dev/null @@ -1,7 +0,0 @@ -import { Progress } from '@fluentui/react-progress'; - -console.log(Progress); - -export default { - name: 'Progress', -}; diff --git a/packages/react-components/react-progress/bundle-size/ProgressBar.fixture.js b/packages/react-components/react-progress/bundle-size/ProgressBar.fixture.js new file mode 100644 index 00000000000000..84ea825cf1162b --- /dev/null +++ b/packages/react-components/react-progress/bundle-size/ProgressBar.fixture.js @@ -0,0 +1,7 @@ +import { ProgressBar } from '@fluentui/react-progress'; + +console.log(ProgressBar); + +export default { + name: 'ProgressBar', +}; diff --git a/packages/react-components/react-progress/docs/MIGRATION.md b/packages/react-components/react-progress/docs/MIGRATION.md index 0075093435891c..086deb42c3b903 100644 --- a/packages/react-components/react-progress/docs/MIGRATION.md +++ b/packages/react-components/react-progress/docs/MIGRATION.md @@ -1,10 +1,10 @@ -# Progress Migration +# ProgressBar Migration ## Migration from v8 -v8 offers a component equivalent to v9's `Progress`. However, the API is slightly different. The main difference is that v9's `Progress` does not have the `label` or `description` props. Instead, the `label` and `hint` are located in the `ProgressField` that can be used in conjunction with `Progress`. +v8 offers a component equivalent to v9's `ProgressBar`. However, the API is slightly different. The main difference is that v9's `ProgressBar` does not have the `label` or `description` props. Instead, the `label` and `hint` are located in the `ProgressField` that can be used in conjunction with `ProgressBar`. -Here's how the API of v8's `Progress` compares to the one from v9's `Progress` component: +Here's how the API of v8's `ProgressIndicator` compares to the one from v9's `ProgressBar` component: - `className` => `className` - `description` => Use `ProgressField` to use the `hint` prop @@ -16,7 +16,7 @@ Here's how the API of v8's `Progress` compares to the one from v9's `Progress` c ## Property Mapping -| v8 `ProgressIndicator` | v9 `Progress` | +| v8 `ProgressIndicator` | v9 `ProgressBar` | | ---------------------- | ------------------------- | | `barHeight` | `thickness` | | `className` | `className` | diff --git a/packages/react-components/react-progress/docs/Spec.md b/packages/react-components/react-progress/docs/Spec.md index 75de53546c9255..578071a4f229d7 100644 --- a/packages/react-components/react-progress/docs/Spec.md +++ b/packages/react-components/react-progress/docs/Spec.md @@ -2,7 +2,7 @@ ## Background -The `Progress` component is used to display the current progress of an operation flow, or show that an operation is currently being executed. +The `ProgressBar` component is used to display the current progress of an operation flow, or show that an operation is currently being executed. ## Prior Art @@ -31,26 +31,26 @@ The existing components are: Basic example: ```jsx -import { Progress } from '@fluentui/react-progress'; +import { ProgressBar } from '@fluentui/react-progress'; function App() { - return ; + return ; } ``` ## Variants -- Indeterminate Progress - - The default Progress that animates indefinitely -- Determinate Progress - - The determinate form of the Progress component that incrementally loads from 0% to 100% +- Indeterminate ProgressBar + - The default ProgressBar that animates indefinitely +- Determinate ProgressBar + - The determinate form of the ProgressBar component that incrementally loads from 0% to 100% - Error/success - The validationState prop can be set to "error", "warning", or "success" to make the bar red, orange, or green, respectively. - The prop name was chosen to align with the Field prop of the same name, allowing ProgressField to have the same API as other fields. #### Adding Label and Description with ProgressField -There is a `ProgressField` component that adds a `label`, validation state(`success`, `warning`, `error`), and hint text to the `Progress`. +There is a `ProgressField` component that adds a `label`, validation state(`success`, `warning`, `error`), and hint text to the `ProgressBar`. You can use it like so: ```jsx @@ -72,25 +72,25 @@ export const Default = (props: ProgressFieldProps) => ( ### Shape -The Progress is represented as a rounded rectangular area with an inner animated bar that either travels across the area indefinitely or animates up till a specified point +The ProgressBar is represented as a rounded rectangular area with an inner animated bar that either travels across the area indefinitely or animates up till a specified point ## API ### Slots -- `root` - The root element of the Progress, which also serves as the track for the Progress bar. The html element is a `div` +- `root` - The root element of the ProgressBar, which also serves as the track for the Progress bar. The html element is a `div` - `bar` - The div element that gets animated into a Progress bar. The html element is `div` ### Props -See API at [Progress.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-progress/src/components/Progress/Progress.types.ts). +See API at [ProgressBar.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts). ## Structure ```html -
+
-
+
``` @@ -102,14 +102,14 @@ See [MIGRATION.md](./MIGRATION.md). ### States -- **Display** - The Progress will use the following priority: +- **Display** - The ProgressBar will use the following priority: - - Specifying the `value` prop will alter the Progress from `indeterminate` to `determinate`. + - Specifying the `value` prop will alter the ProgressBar from `indeterminate` to `determinate`. - The component also has `rtl` support and will animate the progress bar from right to left if set. ### Interaction -The Progress is non-interactive. +The ProgressBar is non-interactive. - **Keyboard** - Not keyboard focusable. - **Mouse** @@ -120,5 +120,5 @@ The Progress is non-interactive. ## Accessibility -- The `determinate` Progress has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `Progress`. -- When `reduced-motion` is active, the `indeterminate` `Progress` will animate only once. Use `ProgressField` to add a `description` and `hint` message to the `Progress` bar. +- The `determinate` ProgressBar has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `ProgressBar`. +- When `reduced-motion` is active, the `indeterminate` `ProgressBar` will animate only once. Use `ProgressField` to add a `description` and `hint` message to the `ProgressBar` bar. diff --git a/packages/react-components/react-progress/etc/react-progress.api.md b/packages/react-components/react-progress/etc/react-progress.api.md index fbcfb4fbafde71..7e4cfd86232404 100644 --- a/packages/react-components/react-progress/etc/react-progress.api.md +++ b/packages/react-components/react-progress/etc/react-progress.api.md @@ -6,7 +6,7 @@ /// -import type { ComponentProps } from '@fluentui/react-utilities'; +import { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; import { FieldControl } from '@fluentui/react-field'; import type { FieldProps } from '@fluentui/react-field'; @@ -16,23 +16,23 @@ import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; import { SlotClassNames } from '@fluentui/react-utilities'; -// @public -export const Progress: ForwardRefComponent; - -// @public (undocumented) -export const progressClassNames: SlotClassNames; - -// @public (undocumented) -export const ProgressField_unstable: ForwardRefComponent; +// @public @deprecated (undocumented) +export const Progress: React_2.ForwardRefExoticComponent, "size"> & { + shape?: "rounded" | "rectangular" | undefined; + value?: number | undefined; + max?: number | undefined; + thickness?: "medium" | "large" | undefined; + validationState?: "error" | "success" | "warning" | undefined; +} & React_2.RefAttributes>; -// @public (undocumented) -export const progressFieldClassNames: SlotClassNames>; +// @public +export const ProgressBar: ForwardRefComponent; // @public (undocumented) -export type ProgressFieldProps_unstable = FieldProps; +export const progressBarClassNames: SlotClassNames; // @public -export type ProgressProps = Omit, 'size'> & { +export type ProgressBarProps = Omit, 'size'> & { shape?: 'rounded' | 'rectangular'; value?: number; max?: number; @@ -41,22 +41,52 @@ export type ProgressProps = Omit, 'size'> & { }; // @public (undocumented) -export type ProgressSlots = { +export type ProgressBarSlots = { root: NonNullable>; bar?: NonNullable>; }; // @public -export type ProgressState = ComponentState & Required> & Pick; +export type ProgressBarState = ComponentState & Required> & Pick; + +// @public @deprecated (undocumented) +export const progressClassNames: SlotClassNames; + +// @public (undocumented) +export const ProgressField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const progressFieldClassNames: SlotClassNames>; + +// @public (undocumented) +export type ProgressFieldProps_unstable = FieldProps; + +// @public @deprecated (undocumented) +export type ProgressProps = ProgressBarProps; + +// @public @deprecated (undocumented) +export type ProgressSlots = ProgressBarSlots; + +// @public @deprecated (undocumented) +export type ProgressState = ProgressBarState; + +// @public @deprecated (undocumented) +export const renderProgress_unstable: (state: ProgressBarState) => JSX.Element; // @public -export const renderProgress_unstable: (state: ProgressState) => JSX.Element; +export const renderProgressBar_unstable: (state: ProgressBarState) => JSX.Element; + +// @public @deprecated (undocumented) +export const useProgress_unstable: (props: ProgressBarProps, ref: React_2.Ref) => ProgressBarState; // @public -export const useProgress_unstable: (props: ProgressProps, ref: React_2.Ref) => ProgressState; +export const useProgressBar_unstable: (props: ProgressBarProps, ref: React_2.Ref) => ProgressBarState; // @public -export const useProgressStyles_unstable: (state: ProgressState) => ProgressState; +export const useProgressBarStyles_unstable: (state: ProgressBarState) => ProgressBarState; + +// @public @deprecated (undocumented) +export const useProgressStyles_unstable: (state: ProgressBarState) => ProgressBarState; // (No @packageDocumentation comment for this package) diff --git a/packages/react-components/react-progress/src/Progress.ts b/packages/react-components/react-progress/src/Progress.ts deleted file mode 100644 index 43ca04b73d9af9..00000000000000 --- a/packages/react-components/react-progress/src/Progress.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/Progress/index'; diff --git a/packages/react-components/react-progress/src/ProgressBar.ts b/packages/react-components/react-progress/src/ProgressBar.ts new file mode 100644 index 00000000000000..1887caab93c6a7 --- /dev/null +++ b/packages/react-components/react-progress/src/ProgressBar.ts @@ -0,0 +1 @@ +export * from './components/ProgressBar/index'; diff --git a/packages/react-components/react-progress/src/components/Progress/Progress.tsx b/packages/react-components/react-progress/src/components/Progress/Progress.tsx deleted file mode 100644 index 314b815dff094e..00000000000000 --- a/packages/react-components/react-progress/src/components/Progress/Progress.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; -import { useProgress_unstable } from './useProgress'; -import { renderProgress_unstable } from './renderProgress'; -import { useProgressStyles_unstable } from './useProgressStyles'; -import type { ProgressProps } from './Progress.types'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; - -/** - * A progress bar shows the progression of a task. - */ -export const Progress: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useProgress_unstable(props, ref); - - useProgressStyles_unstable(state); - return renderProgress_unstable(state); -}); - -Progress.displayName = 'Progress'; diff --git a/packages/react-components/react-progress/src/components/Progress/Progress.types.ts b/packages/react-components/react-progress/src/components/Progress/Progress.types.ts deleted file mode 100644 index 93727ae9b068f6..00000000000000 --- a/packages/react-components/react-progress/src/components/Progress/Progress.types.ts +++ /dev/null @@ -1,53 +0,0 @@ -import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; - -export type ProgressSlots = { - /** - * The track behind the progress bar - */ - root: NonNullable>; - /** - * The filled portion of the progress bar. Animated in the indeterminate state, when no value is provided. - */ - bar?: NonNullable>; -}; - -/** - * Progress Props - */ -export type ProgressProps = Omit, 'size'> & { - /** - * The shape of the bar and track. - * @default 'rounded' - */ - shape?: 'rounded' | 'rectangular'; - /** - * A decimal number between `0` and `1` (or between `0` and `max` if given), - * which specifies how much of the task has been completed. - * - * If `undefined` (default), the Progress will display an **indeterminate** state. - */ - value?: number; - /** - * The maximum value, which indicates the task is complete. - * The progress bar will be full when `value` equals `max`. - * @default 1 - */ - max?: number; - /** - * The thickness of the Progress bar - * @default 'medium' - */ - thickness?: 'medium' | 'large'; - - /** - * The status of the progress bar. Changes the color of the bar. - */ - validationState?: 'success' | 'warning' | 'error'; -}; - -/** - * State used in rendering Progress - */ -export type ProgressState = ComponentState & - Required> & - Pick; diff --git a/packages/react-components/react-progress/src/components/Progress/index.ts b/packages/react-components/react-progress/src/components/Progress/index.ts deleted file mode 100644 index b8cea1fd85ad40..00000000000000 --- a/packages/react-components/react-progress/src/components/Progress/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './Progress'; -export * from './Progress.types'; -export * from './renderProgress'; -export * from './useProgress'; -export * from './useProgressStyles'; diff --git a/packages/react-components/react-progress/src/components/Progress/renderProgress.tsx b/packages/react-components/react-progress/src/components/Progress/renderProgress.tsx deleted file mode 100644 index c47b019565485e..00000000000000 --- a/packages/react-components/react-progress/src/components/Progress/renderProgress.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; -import type { ProgressState, ProgressSlots } from './Progress.types'; - -/** - * Render the final JSX of Progress - */ -export const renderProgress_unstable = (state: ProgressState) => { - const { slots, slotProps } = getSlots(state); - return {slots.bar && }; -}; diff --git a/packages/react-components/react-progress/src/components/Progress/Progress.test.tsx b/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.test.tsx similarity index 81% rename from packages/react-components/react-progress/src/components/Progress/Progress.test.tsx rename to packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.test.tsx index 86a8af6eb27320..8a290e41504be7 100644 --- a/packages/react-components/react-progress/src/components/Progress/Progress.test.tsx +++ b/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.test.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { Progress } from './Progress'; +import { ProgressBar } from './ProgressBar'; import { isConformant } from '../../testing/isConformant'; -describe('Progress', () => { +describe('ProgressBar', () => { isConformant({ - Component: Progress, - displayName: 'Progress', + Component: ProgressBar, + displayName: 'ProgressBar', testOptions: { 'has-static-classnames': [ { @@ -20,29 +20,29 @@ describe('Progress', () => { }); it('has role progressbar', () => { - const result = render(); + const result = render(); expect(result.getByRole('progressbar')).toBeDefined(); }); it('does not add aria attributes for indeterminate', () => { - const result = render(); + const result = render(); expect(result.getByRole('progressbar').getAttribute('aria-valuenow')).toBeFalsy(); expect(result.getByRole('progressbar').getAttribute('aria-valuemin')).toBeFalsy(); expect(result.getByRole('progressbar').getAttribute('aria-valuemax')).toBeFalsy(); }); it('adds aria attributes for determinate', () => { - const result = render(); + const result = render(); expect(result.getByRole('progressbar').getAttribute('aria-valuenow')).toEqual('0.52'); expect(result.getByRole('progressbar').getAttribute('aria-valuemin')).toEqual('0'); expect(result.getByRole('progressbar').getAttribute('aria-valuemax')).toEqual('1'); }); it('updates the max prop properly', () => { - const result = render(); + const result = render(); expect(result.getByRole('progressbar').getAttribute('aria-valuenow')).toEqual('13'); expect(result.getByRole('progressbar').getAttribute('aria-valuemin')).toEqual('0'); expect(result.getByRole('progressbar').getAttribute('aria-valuemax')).toEqual('42'); }); it('sets valuemin and valuemax when value is 0', () => { - const result = render(); + const result = render(); expect(result.getByRole('progressbar').getAttribute('aria-valuenow')).toEqual('0'); expect(result.getByRole('progressbar').getAttribute('aria-valuemin')).toEqual('0'); expect(result.getByRole('progressbar').getAttribute('aria-valuemax')).toEqual('1'); diff --git a/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx b/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx new file mode 100644 index 00000000000000..2e0a6ac68fabb4 --- /dev/null +++ b/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { useProgressBar_unstable } from './useProgressBar'; +import { renderProgressBar_unstable } from './renderProgressBar'; +import { useProgressBarStyles_unstable } from './useProgressBarStyles'; +import type { ProgressBarProps } from './ProgressBar.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * A ProgressBar bar shows the progression of a task. + */ +export const ProgressBar: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useProgressBar_unstable(props, ref); + + useProgressBarStyles_unstable(state); + return renderProgressBar_unstable(state); +}); + +// TODO #25997: Remove deprecated export before ProgressBar is released as stable +/** @deprecated renamed to ProgressBar */ +export const Progress = ProgressBar; + +ProgressBar.displayName = 'ProgressBar'; diff --git a/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts b/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts new file mode 100644 index 00000000000000..749edd2cef2a22 --- /dev/null +++ b/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts @@ -0,0 +1,65 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type ProgressBarSlots = { + /** + * The track behind the ProgressBar bar + */ + root: NonNullable>; + /** + * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided. + */ + bar?: NonNullable>; +}; + +// TODO #25997: Remove deprecated export before ProgressBar is released as stable +/** @deprecated renamed to ProgressBarSlots */ +export type ProgressSlots = ProgressBarSlots; + +/** + * ProgressBar Props + */ +export type ProgressBarProps = Omit, 'size'> & { + /** + * The shape of the bar and track. + * @default 'rounded' + */ + shape?: 'rounded' | 'rectangular'; + /** + * A decimal number between `0` and `1` (or between `0` and `max` if given), + * which specifies how much of the task has been completed. + * + * If `undefined` (default), the ProgressBar will display an **indeterminate** state. + */ + value?: number; + /** + * The maximum value, which indicates the task is complete. + * The ProgressBar bar will be full when `value` equals `max`. + * @default 1 + */ + max?: number; + /** + * The thickness of the ProgressBar bar + * @default 'medium' + */ + thickness?: 'medium' | 'large'; + + /** + * The status of the ProgressBar bar. Changes the color of the bar. + */ + validationState?: 'success' | 'warning' | 'error'; +}; + +// TODO #25997: Remove deprecated export before ProgressBar is released as stable +/** @deprecated renamed to ProgressBarProps */ +export type ProgressProps = ProgressBarProps; + +/** + * State used in rendering ProgressBar + */ +export type ProgressBarState = ComponentState & + Required> & + Pick; + +// TODO #25997: Remove deprecated export before ProgressBar is released as stable +/** @deprecated renamed to ProgressBarState */ +export type ProgressState = ProgressBarState; diff --git a/packages/react-components/react-progress/src/components/ProgressBar/index.ts b/packages/react-components/react-progress/src/components/ProgressBar/index.ts new file mode 100644 index 00000000000000..23bf0c0756c32c --- /dev/null +++ b/packages/react-components/react-progress/src/components/ProgressBar/index.ts @@ -0,0 +1,5 @@ +export * from './ProgressBar'; +export * from './ProgressBar.types'; +export * from './renderProgressBar'; +export * from './useProgressBar'; +export * from './useProgressBarStyles'; diff --git a/packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx b/packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx new file mode 100644 index 00000000000000..c195603129c09a --- /dev/null +++ b/packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { getSlots } from '@fluentui/react-utilities'; +import type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types'; + +/** + * Render the final JSX of ProgressBar + */ +export const renderProgressBar_unstable = (state: ProgressBarState) => { + const { slots, slotProps } = getSlots(state); + return {slots.bar && }; +}; + +// TODO #25997: Remove deprecated export before ProgressBar is released as stable +/** @deprecated renamed to renderProgressBar_unstable */ +export const renderProgress_unstable = renderProgressBar_unstable; diff --git a/packages/react-components/react-progress/src/components/Progress/useProgress.tsx b/packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx similarity index 53% rename from packages/react-components/react-progress/src/components/Progress/useProgress.tsx rename to packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx index 3e7f37bab88411..3d9f57db82594a 100644 --- a/packages/react-components/react-progress/src/components/Progress/useProgress.tsx +++ b/packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; -import type { ProgressProps, ProgressState } from './Progress.types'; +import type { ProgressBarProps, ProgressBarState } from './ProgressBar.types'; /** - * Create the state required to render Progress. + * Create the state required to render ProgressBar. * - * The returned state can be modified with hooks such as useProgressStyles_unstable, - * before being passed to renderProgress_unstable. + * The returned state can be modified with hooks such as useProgressBarStyles_unstable, + * before being passed to renderProgressBar_unstable. * - * @param props - props from this instance of Progress - * @param ref - reference to root HTMLElement of Progress + * @param props - props from this instance of ProgressBar + * @param ref - reference to root HTMLElement of ProgressBar */ -export const useProgress_unstable = (props: ProgressProps, ref: React.Ref): ProgressState => { +export const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref): ProgressBarState => { // Props const { max = 1.0, shape = 'rounded', thickness = 'medium', validationState, value } = props; @@ -28,7 +28,7 @@ export const useProgress_unstable = (props: ProgressProps, ref: React.Ref = { - root: 'fui-Progress', - bar: 'fui-Progress__bar', +export const progressBarClassNames: SlotClassNames = { + root: 'fui-ProgressBar', + bar: 'fui-ProgressBar__bar', }; +// TODO #25997: Remove deprecated export before ProgressBar is released as stable +/** @deprecated renamed to progressBarClassNames */ +export const progressClassNames = progressBarClassNames; + // If the percentComplete is near 0, don't animate it. // This prevents animations on reset to 0 scenarios. const ZERO_THRESHOLD = 0.01; @@ -18,7 +22,7 @@ const barThicknessValues = { large: '4px', }; -const indeterminateProgress = { +const indeterminateProgressBar = { '0%': { left: '0%', }, @@ -26,7 +30,7 @@ const indeterminateProgress = { left: '100%', }, }; -const indeterminateProgressRTL = { +const indeterminateProgressBarRTL = { '100%': { right: '-100%', }, @@ -64,7 +68,7 @@ const useRootStyles = makeStyles({ }); /** - * Styles for the progress bar + * Styles for the ProgressBar bar */ const useBarStyles = makeStyles({ base: { @@ -95,7 +99,7 @@ const useBarStyles = makeStyles({ ${tokens.colorTransparentBackground} 50%, ${tokens.colorNeutralBackground6} 100% )`, - animationName: indeterminateProgress, + animationName: indeterminateProgressBar, animationDuration: '3s', animationIterationCount: 'infinite', '@media screen and (prefers-reduced-motion: reduce)': { @@ -105,7 +109,7 @@ const useBarStyles = makeStyles({ }, rtl: { - animationName: indeterminateProgressRTL, + animationName: indeterminateProgressBarRTL, }, error: { @@ -120,16 +124,16 @@ const useBarStyles = makeStyles({ }); /** - * Apply styling to the Progress slots based on the state + * Apply styling to the ProgressBar slots based on the state */ -export const useProgressStyles_unstable = (state: ProgressState): ProgressState => { +export const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => { const { max, shape, thickness, validationState, value } = state; const rootStyles = useRootStyles(); const barStyles = useBarStyles(); const { dir } = useFluent(); state.root.className = mergeClasses( - progressClassNames.root, + progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], @@ -138,7 +142,7 @@ export const useProgressStyles_unstable = (state: ProgressState): ProgressState if (state.bar) { state.bar.className = mergeClasses( - progressClassNames.bar, + progressBarClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, @@ -158,3 +162,7 @@ export const useProgressStyles_unstable = (state: ProgressState): ProgressState return state; }; + +// TODO #25997: Remove deprecated export before ProgressBar is released as stable +/** @deprecated renamed to useProgressBarStyles_unstable */ +export const useProgressStyles_unstable = useProgressBarStyles_unstable; diff --git a/packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx b/packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx index 64c6c2f357792e..545adeab6b9bc6 100644 --- a/packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx +++ b/packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx @@ -7,15 +7,15 @@ import { useField_unstable, } from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { Progress } from '../../Progress'; +import { ProgressBar } from '../../ProgressBar'; -export type ProgressFieldProps = FieldProps; +export type ProgressFieldProps = FieldProps; export const progressFieldClassNames = getFieldClassNames('ProgressField'); export const ProgressField: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useField_unstable(props, ref, { - component: Progress, + component: ProgressBar, classNames: progressFieldClassNames, labelConnection: 'aria-labelledby', ariaInvalidOnError: false, diff --git a/packages/react-components/react-progress/src/index.ts b/packages/react-components/react-progress/src/index.ts index 7c49362a2fcdd5..09a115c379600d 100644 --- a/packages/react-components/react-progress/src/index.ts +++ b/packages/react-components/react-progress/src/index.ts @@ -1,11 +1,39 @@ export { + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation Progress, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation progressClassNames, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation renderProgress_unstable, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation useProgress_unstable, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation useProgressStyles_unstable, -} from './Progress'; -export type { ProgressProps, ProgressSlots, ProgressState } from './Progress'; + ProgressBar, + progressBarClassNames, + renderProgressBar_unstable, + useProgressBar_unstable, + useProgressBarStyles_unstable, +} from './ProgressBar'; +export type { + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation + ProgressProps, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation + ProgressSlots, + // TODO #25997: Remove deprecated export before ProgressBar is released as stable + // eslint-disable-next-line deprecation/deprecation + ProgressState, + ProgressBarProps, + ProgressBarSlots, + ProgressBarState, +} from './ProgressBar'; export { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField'; export type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField'; diff --git a/packages/react-components/react-progress/stories/Progress/ProgressDefault.stories.tsx b/packages/react-components/react-progress/stories/Progress/ProgressDefault.stories.tsx deleted file mode 100644 index a3202a17220824..00000000000000 --- a/packages/react-components/react-progress/stories/Progress/ProgressDefault.stories.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import * as React from 'react'; -import { Progress, ProgressProps } from '@fluentui/react-progress'; - -export const Default = (props: Partial) => { - return ; -}; diff --git a/packages/react-components/react-progress/stories/Progress/ProgressIndeterminate.stories.tsx b/packages/react-components/react-progress/stories/Progress/ProgressIndeterminate.stories.tsx deleted file mode 100644 index 29f8e45c015a1a..00000000000000 --- a/packages/react-components/react-progress/stories/Progress/ProgressIndeterminate.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import { Progress } from '@fluentui/react-progress'; - -export const Indeterminate = () => { - return ; -}; - -Indeterminate.parameters = { - docs: { - description: { - story: `Progress is indeterminate when 'value' is undefined. - Indeterminate Progress is best used to show that an operation is being executed.`, - }, - }, -}; diff --git a/packages/react-components/react-progress/stories/Progress/index.stories.tsx b/packages/react-components/react-progress/stories/Progress/index.stories.tsx deleted file mode 100644 index bf19fc27b00036..00000000000000 --- a/packages/react-components/react-progress/stories/Progress/index.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Progress } from '@fluentui/react-progress'; - -import descriptionMd from './ProgressDescription.md'; -import bestPracticesMd from './ProgressBestPractices.md'; - -export { Default } from './ProgressDefault.stories'; -export { Shape } from './ProgressShape.stories'; -export { Thickness } from './ProgressBarThickness.stories'; -export { Indeterminate } from './ProgressIndeterminate.stories'; -export { ValidationState } from './ProgressValidationState.stories'; -export { Max } from './ProgressMax.stories'; - -export default { - title: 'Preview Components/Progress', - component: Progress, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; diff --git a/packages/react-components/react-progress/stories/Progress/ProgressBestPractices.md b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarBestPractices.md similarity index 69% rename from packages/react-components/react-progress/stories/Progress/ProgressBestPractices.md rename to packages/react-components/react-progress/stories/ProgressBar/ProgressBarBestPractices.md index 6ea9714847e3f4..3c909b48c1c80b 100644 --- a/packages/react-components/react-progress/stories/Progress/ProgressBestPractices.md +++ b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarBestPractices.md @@ -2,11 +2,11 @@ ### Do -- Use an `indeterminate` Progress when the total units to completion is unknown +- Use an `indeterminate` `ProgressBar` when the total units to completion is unknown - Display operation description - Show text above and/or below the bar - Combine steps of a single operation into one bar -- Use `ProgressField` to add a `description` and `hint` message for the `indeterminate` `Progress` when `reduced-motion` is active +- Use `ProgressField` to add a `description` and `hint` message for the `indeterminate` `ProgressBar` when `reduced-motion` is active ### Don't diff --git a/packages/react-components/react-progress/stories/ProgressBar/ProgressBarDefault.stories.tsx b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarDefault.stories.tsx new file mode 100644 index 00000000000000..0d0cf27d160e59 --- /dev/null +++ b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarDefault.stories.tsx @@ -0,0 +1,6 @@ +import * as React from 'react'; +import { ProgressBar, ProgressBarProps } from '@fluentui/react-progress'; + +export const Default = (props: Partial) => { + return ; +}; diff --git a/packages/react-components/react-progress/stories/Progress/ProgressDescription.md b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarDescription.md similarity index 100% rename from packages/react-components/react-progress/stories/Progress/ProgressDescription.md rename to packages/react-components/react-progress/stories/ProgressBar/ProgressBarDescription.md diff --git a/packages/react-components/react-progress/stories/ProgressBar/ProgressBarIndeterminate.stories.tsx b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarIndeterminate.stories.tsx new file mode 100644 index 00000000000000..0e6e275efef033 --- /dev/null +++ b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarIndeterminate.stories.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import { ProgressBar } from '@fluentui/react-progress'; + +export const Indeterminate = () => { + return ; +}; + +Indeterminate.parameters = { + docs: { + description: { + story: `ProgressBar is indeterminate when 'value' is undefined. + Indeterminate ProgressBar is best used to show that an operation is being executed.`, + }, + }, +}; diff --git a/packages/react-components/react-progress/stories/Progress/ProgressMax.stories.tsx b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarMax.stories.tsx similarity index 73% rename from packages/react-components/react-progress/stories/Progress/ProgressMax.stories.tsx rename to packages/react-components/react-progress/stories/ProgressBar/ProgressBarMax.stories.tsx index 6693ed86d3b8b9..e3c30306916dae 100644 --- a/packages/react-components/react-progress/stories/Progress/ProgressMax.stories.tsx +++ b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarMax.stories.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; -import { Progress } from '@fluentui/react-progress'; +import { ProgressBar } from '@fluentui/react-progress'; export const Max = () => { - return ; + return ; }; Max.parameters = { docs: { description: { - story: `You can specify the maximum value of the determinate Progress. + story: `You can specify the maximum value of the determinate ProgressBar. This is useful for instances where you want to show capacity, or how much of a total has been uploaded/downloaded.`, }, diff --git a/packages/react-components/react-progress/stories/Progress/ProgressShape.stories.tsx b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarShape.stories.tsx similarity index 52% rename from packages/react-components/react-progress/stories/Progress/ProgressShape.stories.tsx rename to packages/react-components/react-progress/stories/ProgressBar/ProgressBarShape.stories.tsx index b5e7749bd24a9c..e99402e42c6c2e 100644 --- a/packages/react-components/react-progress/stories/Progress/ProgressShape.stories.tsx +++ b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarShape.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { makeStyles, shorthands } from '@fluentui/react-components'; -import { Progress } from '@fluentui/react-progress'; +import { ProgressBar } from '@fluentui/react-progress'; const useStyles = makeStyles({ container: { @@ -13,9 +13,9 @@ export const Shape = () => { return (
- + - +
); }; @@ -23,7 +23,7 @@ export const Shape = () => { Shape.parameters = { docs: { description: { - story: 'Progress supports different shapes. `rounded` is the default.', + story: 'ProgressBar supports different shapes. `rounded` is the default.', }, }, }; diff --git a/packages/react-components/react-progress/stories/Progress/ProgressBarThickness.stories.tsx b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarThickness.stories.tsx similarity index 56% rename from packages/react-components/react-progress/stories/Progress/ProgressBarThickness.stories.tsx rename to packages/react-components/react-progress/stories/ProgressBar/ProgressBarThickness.stories.tsx index 266183e429b02d..c20376632889fe 100644 --- a/packages/react-components/react-progress/stories/Progress/ProgressBarThickness.stories.tsx +++ b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarThickness.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { makeStyles, shorthands } from '@fluentui/react-components'; -import { Progress } from '@fluentui/react-progress'; +import { ProgressBar } from '@fluentui/react-progress'; const useStyles = makeStyles({ container: { @@ -13,9 +13,9 @@ export const Thickness = () => { return (
- + - +
); }; @@ -23,7 +23,7 @@ export const Thickness = () => { Thickness.parameters = { docs: { description: { - story: `Progress can be one of two sizes.\n` + `It can be shown as the medium or large`, + story: `ProgressBar can be one of two sizes.\n` + `It can be shown as the medium or large`, }, }, }; diff --git a/packages/react-components/react-progress/stories/Progress/ProgressValidationState.stories.tsx b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarValidationState.stories.tsx similarity index 72% rename from packages/react-components/react-progress/stories/Progress/ProgressValidationState.stories.tsx rename to packages/react-components/react-progress/stories/ProgressBar/ProgressBarValidationState.stories.tsx index 5a1b00cf0b5c5c..4e0a7699e87859 100644 --- a/packages/react-components/react-progress/stories/Progress/ProgressValidationState.stories.tsx +++ b/packages/react-components/react-progress/stories/ProgressBar/ProgressBarValidationState.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { makeStyles } from '@fluentui/react-components'; -import { Progress } from '@fluentui/react-progress'; +import { ProgressBar } from '@fluentui/react-progress'; const useStyles = makeStyles({ container: { @@ -14,9 +14,9 @@ export const ValidationState = () => { const styles = useStyles(); return (
- - - + + +
); }; diff --git a/packages/react-components/react-progress/stories/ProgressBar/index.stories.tsx b/packages/react-components/react-progress/stories/ProgressBar/index.stories.tsx new file mode 100644 index 00000000000000..ea1c466e96ebc1 --- /dev/null +++ b/packages/react-components/react-progress/stories/ProgressBar/index.stories.tsx @@ -0,0 +1,23 @@ +import { ProgressBar } from '@fluentui/react-progress'; + +import descriptionMd from './ProgressBarDescription.md'; +import bestPracticesMd from './ProgressBarBestPractices.md'; + +export { Default } from './ProgressBarDefault.stories'; +export { Shape } from './ProgressBarShape.stories'; +export { Thickness } from './ProgressBarThickness.stories'; +export { Indeterminate } from './ProgressBarIndeterminate.stories'; +export { ValidationState } from './ProgressBarValidationState.stories'; +export { Max } from './ProgressBarMax.stories'; + +export default { + title: 'Preview Components/ProgressBar', + component: ProgressBar, + parameters: { + docs: { + description: { + component: [descriptionMd, bestPracticesMd].join('\n'), + }, + }, + }, +}; From 6312d0defd9a99d44af959a00a455a2ede267e65 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 14 Dec 2022 17:14:22 -0500 Subject: [PATCH 016/172] fix(vr-tests v0): fix broken v0 VR tests (#25959) Fixes a few react-northstar VR tests that were either flaky or completely broken due to components being written as class components. --- ...lExampleContentCustomization.shorthand.tsx | 42 ++++++------- ...tExampleSelectableControlled.shorthand.tsx | 44 +++++++------- ...ExampleWithSubmenuControlled.shorthand.tsx | 59 +++++++++---------- ...arExampleOverflowPositioning.shorthand.tsx | 4 +- .../docs/src/vr-tests/Chat/Chat.stories.tsx | 2 - .../docs/src/vr-tests/Video/Video.stories.tsx | 11 +++- 6 files changed, 79 insertions(+), 83 deletions(-) diff --git a/packages/fluentui/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx index 03aa84960ac6d1..965bb3e226f1cd 100644 --- a/packages/fluentui/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx +++ b/packages/fluentui/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx @@ -2,31 +2,27 @@ import * as React from 'react'; import { Label } from '@fluentui/react-northstar'; import { CloseIcon } from '@fluentui/react-icons-northstar'; -class LabelExampleContentCustomizationShorthand extends React.Component { - state = { hidden: false }; +const LabelExampleContentCustomizationShorthand: React.FunctionComponent = () => { + const [hidden, setHidden] = React.useState(false); - hide = () => { - this.setState({ hidden: true }); - setTimeout(() => this.setState({ hidden: false }), 2000); + const hide = () => { + setHidden(true); + setTimeout(() => setHidden(false), 2000); }; - render() { - const { hidden } = this.state; - - if (hidden) return 'Returning in 2 seconds...'; - - return ( -