Switch | +| Variant | A variant of the base component for more specific use cases | Secondary
Compound
Brand | +| Part | A specific element within the default component. Can be a single part or multiple parts. Typically maps to a DOM element | Icon
SecondaryIcon | +| Property | A visual attribute of the Component or Part. Often maps to a CSS property, but not always (e.g. stroke) | ForegroundColor
BackgroundColor
IconAfter
StrokeWidth | +| Modifier | Context that changes the value of a property based on state or mode. Usually maps to an interactive state or mode. | Rest
Hover
Pressed
Disabled
Selected-\* | + +_Variants_ + +The term “variants” is often used to describe alternative forms or styles of components. There are typically 3 types of variants representing different axes of changes: + +1. **Style variant**: Component has a different look and feel, but same behaviors and visual structure as the base component. + + a. In code, v9 typically uses appearance prop + + b. In Figma, the Style property controls these + + c. Example: Button has Secondary, Primary, Subtle, Transparent style variants + +2. **Layout variant**: Component has a different visual structure from the base component, but typically retains the same behaviors and data. Different Parts may be toggled on/off or have different visual treatments due to their composition. + + a. In code, this might be controlled through optional component props e.g. Button icon and iconPosition + + b. In Figma, + + c. Example: Buttons can have just a text label, just an icon, or an icon and Button + +3. **Functional variant**: Component exposes different interactions or data than the base component. + + a. In code, these might be separate components with different APIs + +## Expose expanded tokens in Theme + +Each component that exposes tokens would add a Component.tokens.ts file to expose its tokens API: + +```javascript +// Button.tokens.ts + +import { tokens } from '@fluentui/react-theme'; + +// Semantic button, shared between all Button-family components + +export const buttonGroupTokens = { + + buttonBorderRadius: `var(--buttonBorderRadius, ${tokens.borderRadiusMedium})`, + + buttonFontFamily: `var(--buttonFontFamily,${tokens.fontFamilyBase})`, + + // ... + +} +// Button control tokens, used by Default button + +export const buttonTokens = { + + // Default + + ctrlButtonBorderRadius: `var(--ctrlButtonBorderRadius, ${buttonGroupTokens.buttonBorderRadius})`, + + ctrlButtonFontFamily: `var(--ctrlButtonFontFamily,${buttonGroupTokens.buttonFontFamily})`, + + ... + +} + +``` + +These would then be added to the current Theme object: + +```javascript +// Tokens/src/types.ts +import { ButtonTokens } from '@fluentui/react-components'; + +export type Theme = FontSizeTokens & + LineHeightTokens & + BorderRadiusTokens & + StrokeWidthTokens & + HorizontalSpacingTokens & + VerticalSpacingTokens & + DurationTokens & + CurveTokens & + ShadowTokens & + ShadowBrandTokens & + FontFamilyTokens & + FontWeightTokens & + ColorPaletteTokens & + ColorStatusTokens & + ColorTokens & + ButtonTokens; // Addition +``` + +### Other options considered + +| Option | Pros | Cons | +| --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Option A: Add all tokens to current FluentProvider** | • Simple
• Builds on existing API
• No additional deps for partners | • Theme typings will get large as we'd include all component tokens
• Tokens object will get larger but not massive since we'd only ship values for component groups and not component tokens (these are optional slots) | +| Option B.1: Create separate semantic FluentProvider | • Separates Fluent Semantic Tokens (FSTs) from FluentProvider and Theme.
• Optional layering so partners only pull it in when needed. | • Requires extra layer
• May not be as intuitive as just using the existing provider already in applications
• May not provide much value since the components still need to have some level of awareness of the group and component tokens. | +| Option B.2: Create separate semantic FluentProvider and package | • Same pros as above but with added flexibility around packaging and versioning | See above | + +## Update components to optionally consume expanded tokens + +Once exposed in the theme, the new tokens could be accessed in existing components simply by updating existing references to alias tokens with var(), passing the more precise token as the first argument and retaining original alias token as the second. + +For example, instead of: + +```javascript +const useRootBaseClassName = makeStyles({ backgroundColor: 'var(--colorNeutralForeground1)' }); +``` + +We would use this: + +```javascript +const useRootBaseClassName = makeStyles({ + backgroundColor: 'var(--buttonBackgroundColorRest, var(--colorNeutralForeground1))', +}); +``` + +This leverages `var()`’s fallback feature to read the new token’s value first only if defined in the theme, while falling back on the existing alias token if not defined. + +To ensure backwards compatibility with existing themes, all v9 components consuming the new tokens should **always** use alias token fallbacks. + +## Performance + +Given [previously observed performance issues](https://github.com/microsoft/fluentui/blob/6e6a1bf624e5a682b3607d918793d6f0eeb6b12a/rfcs/react-components/convergence/theme-shape.md#performance-analysis) when injecting a class with many CSS variables that referenced other CSS variables, we wanted to be sensitive to bloating the theme object with additional tokens. We noticed that performance penalties in the original tests were not concentrated at variable lookup time, but instead due to the root-level nature of the custom properties: each of the FluentProviders injected tokens that were associated with DOM elements, causing more reflows than would be expected with more scoped properties. + +Our hypothesis is that more granularly scoped tokens tied to fewer DOM nodes would not incur the same performance penalties, although of course this needs to be tested. + +### var() fallback test + +To test the effect of many var() fallbacks, we configured a test using [tensile-perf](https://github.com/microsoft/tensile-perf) to generate an extremely large DOM. We then defined a series of CSS classes with varying levels of fallbacks, often going 20 layers deep. + +[Test repo](https://github.com/brandonthomas/var-fallback-perf-test) _(currently private. Will make public asap)_ + +[Raw tensile-perf test results](https://github.com/brandonthomas/var-fallback-perf-test/tree/main/results) + +In both Chrome and tensile-perf, we saw little to no difference in both render and paint times compared to the baseline. + +Other options considered + +| Option | Pros | Cons | +| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Option A: Update existing components with var() fallbacks** | • Existing consumers automatically get the FST system without additional work beyond updating their packages
• Everyone stays in sync and should have equal capability improving interop and portability | • Once the changes are made, we are somewhat stuck with them (until the next major version)
• All consumers will pull these changes which means some increases in bundle size (gzipped impact seems minor based on our test PR so far). | +| Option B: Custom style hooks | • Fully opt in
• Removes component changes at the root and could allow us to ship separately from the core packages meaning breaking changes could be managed more easily in a separate package | • performance regressions were noted in testing. This might be due to the fact that styles were generated and inserted in runtime. Additionally, it depends on React's context which re-renders components.
• Because it's opt in we wouldn't have uniform adoption
Opportunity: If we can fix the performance issues or understand them better this might be a really interesting option with lower risk. Can we investigate using these styles hooks but with Griffel outputting static CSS? | +| Option C: Create component variants through recomposition | • Could be shipped in separate packages
• avoids breaking changes | • Could create confusion (which Button do consumers use? The base one or our SemanticTokenButton?)
There could be confusing ways in which semantic tokens could work in some places but not others if the right variants aren't used. | + +## Bundle Size + +On option to reduce bundle size is to hash the Control and Semantic tokens. In our tests we've shown a reduction in the GZipped file from [22 kB](https://github.com/microsoft/fluentui/pull/31692) to [18 kB](https://github.com/microsoft/fluentui/pull/32304) + +## Open questions + +In-product performance testing + +To date, we’ve mostly conducted synthetic tests against var() fallback performance. We still need to run integration tests against product scenarios to test real-world effects of additional CSS variables and fallbacks, as well as the overall dev experience. We plan to test this in Teams and will update accordingly. + +### Package location + +Where should the expanded tokens live? We’re leaning towards Option A (**bolded**) now but would like feedback. + +| Option | Pros | Cons | +| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **A: Expanded tokens would be co-located with corresponding components, adjacent to component code** | • Straightforward conceptual grouping for control tokens
• Easier to manage API surface for specific components | • Introduces circular dependency: react-components depends on tokens via react-theme, but not the other way around
• Where to host semantic tokens is less clear since they represent groups of components | +| B: Expanded tokens would be added adjacent to current tokens in @fluentui/tokens | • Doesn't introduce circular dependency
• Single entry point for all tokens
• Simpler to opt-in | • Ergonomics of splitting out component token API from component code might be awkward | +| C: In a new package, e.g. @fluentui/tokens-expanded | • Doesn't introduce circular dependency
• Flexibility around packaging & versioning
• Insulates @fluentui/tokens from control token churn | • More friction to opt-in to expanded tokens
• Adds overhead | + +## How far do we go in exposing semantic tokens? + +The expanded token system opens the door to adding many more tokens than might be needed while growing the API surface. We should consider the strategy we’ll use to scope and prioritize which components and variants will be tokenized, and how tokens will be exposed over time. We’re leaning towards Option C (**bolded**) but would like feedback. + +| Option | Pros | Cons | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Option A: Tokenize everything, even if it's a variant. This includes recreating tokens for those variants even if the base has tokens.
e.g. base button includes ctrlButtonBackgroundRest, rounded would then have ctrlButtonRoundedBackgroundRest | • Tokens can control all aspects of each control and its variants. | • Huge API surface
• A lot more work to implement
• Could easily get out of hand
• Hard to roll back (we basically couldn't) if we find we don't need this level of fidelity | +| Option B: Tokenize only the base styles, and use style overrides for variants and keep the tokens the same for the variants (pointing to alias or globals) aka don't have variant tokens | • Simpler mental model, no figuring out what applies to variants vs base etc. | • Less fidelity and no cross library interop. Overrides have to be done in the context of v9 (this doesn't meet some of our requirements)
• Could still allow for future expansion to include variants | +| **Option C: Tokenize the base and variant overrides only, expand the tokens to include additional variant tokens if needed.** | • Still a somewhat simple mental model but with enough fidelity that we can control what we currently see.
• Matches the way design is approaching this in Figma | • If there is a need to modify variants we might be prevented from doing so within the token system and need to expand it down the road.
• Could still allow for future expansion | + +## Usage guidance + +### Semantic tokens + +The expanded token enables deeper, more portable customization, but adding many extra CSS variables to a theme can have a performance tradeoff. To guide developers to make the most of this system, we’d propose adding the following guidance to the [Styles Handbook](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/styles-handbook.md) and/or [Theming page](https://react.fluentui.dev/?path=/docs/concepts-developer-theming--page). + +1. **Only include the tokens you need to customize in a theme.** Component tokens are pay-for-play: there is a small but measurable cost to using them. + +2. **Start by customizing semantic tokens, which target groups of components.** Semantic tokens are meant to share styling rules between highly related components. Only use control tokens when you truly need to scope changes to specific components, and take care that customizations are coherent with the application. + +3. Consider if other [v9 customization scenarios](https://github.com/microsoft/fluentui/blob/6e6a1bf624e5a682b3607d918793d6f0eeb6b12a/rfcs/react-components/convergence/custom-styling.md#appendix-current-mechanisms-analysis) meet your needs. Each has capabilities, limitations, and varying complexity that impact suitability. + + a. Custom themes using extended tokens = Customize a single component, family of components, or all components + + b. Custom themes using alias tokens => Customize generic style values for all components + + c. CustomStyleHook => Customize the style of all instances of a component + + d. classname prop => Customize the style of one instance of a component + + e. Hooks recomposition => Create a new component customizing the behavior, style, or rendering of an existing component. + +4. Consider local application or repository policies to limit usage of semantic tokens + +### Custom tokens + +We also propose adding formal guidance and best practices for how to handle **custom tokens** in projects. It might consist of: + +1. Follow Fluent’s naming guidelines for new tokens + +2. Prefix custom tokens with a product/brand prefix, e.g. OneDrive = --od-_token_ + +3. If creating custom tokens targeting a particular platform, always look for a fallback in the existing set + + a. Example: Ensure token extensions fall back to a related control token + +4. Don’t maintain copies of Fluent tokens directly as they are subject to change + +5. Consider creating a “proxy” internal tokens API that merges Fluent tokens and custom product tokens + +6. Clearly denote tokens that are custom and not part of Fluent. Example locations to clarify: + + a. Figma + + b. Code comments + + c. Typings diff --git a/docs/react-v9/contributing/rfcs/react-components/convergence/z-index-handling.md b/docs/react-v9/contributing/rfcs/react-components/convergence/z-index-handling.md new file mode 100644 index 00000000000000..2a8d7703831bab --- /dev/null +++ b/docs/react-v9/contributing/rfcs/react-components/convergence/z-index-handling.md @@ -0,0 +1,337 @@ +# RFC: z-index handling + +--- + +[@marcosmoura](https://github.com/marcosmoura) + +- [RFC: z-index handling](#rfc-z-index-handling) + - [Summary](#summary) + - [Background](#background) + - [Problem statement](#problem-statement) + - [Detailed Design or Proposal](#detailed-design-or-proposal) + - [Research](#research) + - [CSS Isolation and stacking context](#css-isolation-and-stacking-context) + - [Layering/elevation concept](#layeringelevation-concept) + - [What will be covered](#what-will-be-covered) + - [What won't be covered](#what-wont-be-covered) + - [Implementation](#implementation) + - [Pros](#pros) + - [Cons](#cons) + - [Discarded Options](#discarded-options) + - [Expose a named map of layers to z-index values (similarly to typography styles)](#expose-a-named-map-of-layers-to-z-index-values-similarly-to-typography-styles) + - [Pros](#pros-1) + - [Cons](#cons-1) + - [React Context for setting z-index values](#react-context-for-setting-z-index-values) + - [Pros](#pros-2) + - [Cons](#cons-2) + +## Summary + +This RFC outlines the ideas and implementation details for effectively handle z-index globally within Fluent UI components, with a particular focus on standardizing layers across the library. + +## Background + +In [v0](https://github.com/microsoft/fluentui/blob/c3f4b77f8160185518b1fea6d74be239519fba73/packages/style-utilities/src/styles/zIndexes.ts#L1-L11) and [v8](https://github.com/microsoft/fluentui/blob/c3f4b77f8160185518b1fea6d74be239519fba73/packages/fluentui/react-northstar/src/themes/teams/siteVariables.ts#L72-L79), naming conventions were defined to represent the z-index values for each layer. However, for v9, values were not used consistently across the library, leading to a lack of standardization and potential conflicts between components as well as with custom styles in the partner side. + +## Problem statement + +The current z-index handling in Fluent UI v9 is not consistent across components. This inconsistency can be observed by performing a simple code search in the repository: + + +## Detailed Design or Proposal + +The creation of a global z-index system will help to standardize the values across the library, making it easier to manage and avoid conflicts between components. This system will also provide a way to easily override the z-index values for custom components and applications. + +## Research + +### CSS Isolation and stacking context + +[CSS Isolation](https://developer.mozilla.org/en-US/docs/Web/CSS/isolation) is a new feature that allows developers to create a new stacking context for an element. This means that the element and its children will be rendered isolated from the rest of the page. This can be useful explicitly for components that require a z-index control. +The problem for our case is that we render most of our components that require a z axis control in a portal, which by itself creates a new stacking context. For the elements rendered in a portal, the z-index is relative to the portal element and we need a way to define the priority of them. + +## Layering/elevation concept + +As stated by [Fluent 2 design guidelines](https://fluent2.microsoft.design/elevation), objects/components have a defined elevation value to express its importance and create the sense of hierarchy of layers. These layers should have well defined shadow and z-axis values. Currently, the library have [shadows already defined](https://github.com/marcosmoura/fluentui/blob/943d1f166c5929ff65a683fbed3885434f16f2b9/packages/tokens/src/utils/shadows.ts#L6), but lacking the z-axis values. + +### What will be covered + +This proposal utilize this elevation system to define layers that translate into z-axis values, and those can be used by the components. The concepts are: + +- Each layer have a well-thought z-index number mapped to it +- Multiple components can occupy the same layer, if they share the same importance level in the stack (e.g. Drawer and Nav) +- A component can be defined without a z-index. Its placement fallbacks to its position within the [stack context](https://web.dev/learn/css/z-index/#stacking-context). + +### What won't be covered + +- Negative z-indexes. Components can define negative z-index values to represent background objects. Since this is very subjective, it'll be up to the component to define its own negative z-index values. +- Correlation between shadows and z-indexes. Even though it might be related, this is out of the scope of this proposal. If necessary, it can be covered by a follow-up RFC. + +## Implementation + +> [!NOTE] +> The approach here only standardize the layers and define z-index values for them. This is great for the current state of our components that can define arbitrary values, but won't solve a very specific problem: Defining priority for similar UI elements. e.g. Two Dropdowns are created. Which of them should have higher priority and therefore be displayed on top? + +Expose the z-index values as tokens. This would map the layers into token values that can be used anywhere in styles. + +The layers can be defined as follows: + +```ts +// packages/tokens/src/types.ts + +/** + * Design tokens for z-index groups and levels + */ +export type ZIndexTokens = { + zIndexBackground: string; + zIndexContent: string; + zIndexOverlay: string; + zIndexPopup: string; + zIndexMessages: string; + zIndexFloating: string; + zIndexPriority: string; + zIndexDebug: string; +}; +``` + +```ts +// packages/tokens/src/global/zIndexes.ts + +import type { ZIndexTokens } from '../types'; + +/** + * ZIndex global defaults + */ +export const zIndexes: ZIndexTokens = { + zIndexBackground: '0', // Elevation 0 + zIndexContent: '1', // Elevation 2 + zIndexOverlay: '1000', // Elevation 4 + zIndexPopup: '2000', // Elevation 8 + zIndexMessages: '3000', // Elevation 16 + zIndexFloating: '4000', // Elevation 28 + zIndexPriority: '5000', // Elevation 64 + zIndexDebug: '6000', // Used for debugging +}; +``` + +```ts +// Fluent/partner code + +import { tokens } from '@fluentui/theme'; + +const styles = { + root: { + zIndex: tokens.zIndexOverlay /* var(--zIndexOverlay, 1000) */, + }, +}; +``` + +In case the partner wants to override the z-index values, they can do so by providing a theme with the new values: + +```ts +// Fluent/partner code +import { FluentProvider, Theme, webLightTheme } from '@fluentui/react-components'; + +const customTheme: Theme = { + ...webLightTheme, + // 👇 customized values + zIndexOverlay: 100000, +}; + +function App() { + return
- 50
+ 80
{
- "x": 20,
+ "x": 40,
"values": [
{
"legend": "metaData1",
- "y": 50,
+ "y": 80,
"color": "red"
}
]
@@ -1189,7 +1189,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
cx={40}
cy={115.625}
data-is-focusable={true}
- fill="#ffffff"
+ fill="red"
id="circle2_0"
key="circle2_0"
onBlur={[Function]}
@@ -1197,7 +1197,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
- r={8}
+ r={0}
role="img"
stroke="red"
strokeWidth={3}
@@ -1207,7 +1207,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
cx={-20}
cy={20}
data-is-focusable={true}
- fill="red"
+ fill="#ffffff"
id="circle2_1"
key="circle2_1"
onBlur={[Function]}
@@ -1215,7 +1215,7 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
- r={0}
+ r={8}
role="img"
stroke="red"
strokeWidth={3}
@@ -1229,8 +1229,8 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
strokeDasharray={5.5}
strokeWidth={1}
visibility="visibility"
- x1={40}
- x2={40}
+ x1={-20}
+ x2={-20}
y1={0}
y2={310}
/>
@@ -1489,11 +1489,11 @@ exports[`AreaChart - mouse events Should render customized callout per stack on
{
- "x": 20,
+ "x": 40,
"values": [
{
"legend": "metaData1",
- "y": 50,
+ "y": 80,
"color": "red"
}
]
diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
index 5046ee0bb13a23..9522c3b562c1b7 100644
--- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
+++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx
@@ -68,9 +68,9 @@ export class CartesianChartBase extends React.Component
{
+ ref={(e: SVGSVGElement | null) => {
this.xAxisElement = e;
}}
id={`xAxisGElement${this.idForGraph}`}
@@ -522,7 +522,7 @@ export class CartesianChartBase extends React.Component {
+ ref={(e: SVGSVGElement | null) => {
this.yAxisElement = e;
}}
id={`yAxisGElement${this.idForGraph}`}
@@ -536,7 +536,7 @@ export class CartesianChartBase extends React.Component
{
+ ref={(e: SVGSVGElement | null) => {
this.yAxisElementSecondary = e;
}}
id={`yAxisGElementSecondary${this.idForGraph}`}
diff --git a/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts b/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts
index 996d39c50f52f4..05ecd7084fe89b 100644
--- a/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts
+++ b/packages/react-charting/src/components/DonutChart/Arc/Arc.styles.ts
@@ -1,11 +1,11 @@
-import { IArcProps, IArcStyles } from './Arc.types';
+import { IArcStyleProps, IArcStyles } from './Arc.types';
import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';
-export const getStyles = (props: IArcProps): IArcStyles => {
- const { color, href, theme } = props;
+export const getStyles = (props: IArcStyleProps): IArcStyles => {
+ const { solidFill, gradientFill, href, theme, opacity } = props;
return {
root: {
- fill: color,
+ fill: solidFill,
cursor: href ? 'pointer' : 'default',
stroke: theme.semanticColors.bodyBackground,
outline: 'transparent',
@@ -14,6 +14,13 @@ export const getStyles = (props: IArcProps): IArcStyles => {
border: '0',
},
},
+ opacity,
+ },
+ gradientArc: {
+ width: '100%',
+ height: '100%',
+ background: gradientFill,
+ opacity,
},
focusRing: {
stroke: theme.semanticColors.focusBorder,
diff --git a/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx b/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx
index a032a9f205ef9b..7d7baef9680452 100644
--- a/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx
+++ b/packages/react-charting/src/components/DonutChart/Arc/Arc.tsx
@@ -3,7 +3,7 @@ import { arc as d3Arc } from 'd3-shape';
import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
import { getStyles } from './Arc.styles';
import { IChartDataPoint } from '../index';
-import { IArcProps, IArcStyles } from './index';
+import { IArcProps, IArcStyleProps, IArcStyles } from './index';
import { format as d3Format } from 'd3-format';
import { formatValueWithSIPrefix } from '../../../utilities/index';
@@ -32,13 +32,7 @@ export class Arc extends React.Component {
public render(): JSX.Element {
const { arc, href, focusedArcId } = this.props;
- const getClassNames = classNamesFunction();
- const classNames = getClassNames(getStyles, {
- color: this.props.color,
- href: href!,
- theme: this.props.theme!,
- nextColor: this.props.nextColor,
- });
+ const getClassNames = classNamesFunction();
const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\s+/, '') + this.props.data!.data.data;
const opacity: number =
this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === '' ? 1 : 0.1;
@@ -47,6 +41,18 @@ export class Arc extends React.Component {
const endAngle = (this.props.data?.endAngle ?? 0) - startAngle;
const cornerRadius = this.props.roundCorners ? 3 : 0;
+ const classNames = getClassNames(getStyles, {
+ solidFill: this.props.enableGradient ? 'transparent' : this.props.color,
+ gradientFill: `conic-gradient(
+ from ${startAngle}rad,
+ ${this.props.color},
+ ${this.props.nextColor} ${endAngle}rad
+ )`,
+ href: href!,
+ theme: this.props.theme!,
+ opacity,
+ });
+
const clipId = getId('Arc_clip') + `${this.props.color}_${this.props.nextColor}`;
return (
@@ -64,13 +70,11 @@ export class Arc extends React.Component {
d={arc.cornerRadius(cornerRadius)(this.props.data)}
onFocus={this._onFocus.bind(this, this.props.data!.data, id)}
className={classNames.root}
- fill={this.props.enableGradient ? 'transparent' : this.props.color}
data-is-focusable={this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === ''}
onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}
onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}
onMouseLeave={this._hoverOff}
onBlur={this._onBlur}
- opacity={opacity}
onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}
aria-label={this._getAriaLabel()}
role="img"
@@ -83,20 +87,7 @@ export class Arc extends React.Component {
-
+
)}
diff --git a/packages/react-charting/src/components/DonutChart/Arc/Arc.types.ts b/packages/react-charting/src/components/DonutChart/Arc/Arc.types.ts
index 218eb3e58c87d6..6de0cdd0afc774 100644
--- a/packages/react-charting/src/components/DonutChart/Arc/Arc.types.ts
+++ b/packages/react-charting/src/components/DonutChart/Arc/Arc.types.ts
@@ -146,12 +146,44 @@ export interface IArcData {
value: number;
}
+export interface IArcStyleProps {
+ /**
+ * Theme
+ */
+ theme: ITheme;
+
+ /**
+ * internal prop for href
+ */
+ href: string;
+
+ /**
+ * solid color for the arc (when enableGradient is false)
+ */
+ solidFill: string;
+
+ /**
+ * gradient for the arc (when enableGradient is true)
+ */
+ gradientFill: string;
+
+ /**
+ * wether gradients are enabled for the arc
+ */
+ opacity: number;
+}
+
export interface IArcStyles {
/**
* Style set for the card header component root
*/
root: IStyle;
+ /**
+ * Style set for the gradient arc
+ */
+ gradientArc: IStyle;
+
/**
* styles for the focus
*/
diff --git a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
index f848b8d1036498..db7dcb00b7e582 100644
--- a/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
+++ b/packages/react-charting/src/components/DonutChart/DonutChartRTL.test.tsx
@@ -79,8 +79,8 @@ describe('Donut chart interactions', () => {
// Assert
const getById = queryAllByAttribute.bind(null, 'id');
- expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
- expect(getById(container, /Pie.*?third/i)[0]).toHaveAttribute('opacity', '0.1');
+ expect(getById(container, /Pie.*?second/i)[0]).toHaveStyle('opacity: 0.1');
+ expect(getById(container, /Pie.*?third/i)[0]).toHaveStyle('opacity: 0.1');
});
test('Should select legend on single mouse click on legends', () => {
@@ -94,7 +94,7 @@ describe('Donut chart interactions', () => {
// Assert
const getById = queryAllByAttribute.bind(null, 'id');
- expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+ expect(getById(container, /Pie.*?second/i)[0]).toHaveStyle('opacity: 0.1');
const firstLegend = screen.queryByText('first')?.closest('button');
expect(firstLegend).toHaveAttribute('aria-selected', 'true');
expect(firstLegend).toHaveAttribute('tabIndex', '0');
@@ -111,7 +111,7 @@ describe('Donut chart interactions', () => {
//single click on first legend
fireEvent.click(legend!);
const getById = queryAllByAttribute.bind(null, 'id');
- expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+ expect(getById(container, /Pie.*?second/i)[0]).toHaveStyle('opacity: 0.1');
const firstLegend = screen.queryByText('first')?.closest('button');
expect(firstLegend).toHaveAttribute('aria-selected', 'true');
expect(firstLegend).toHaveAttribute('tabIndex', '0');
@@ -131,12 +131,12 @@ describe('Donut chart interactions', () => {
expect(legend).toBeDefined();
fireEvent.mouseOver(legend!);
const getById = queryAllByAttribute.bind(null, 'id');
- expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '0.1');
+ expect(getById(container, /Pie.*?second/i)[0]).toHaveStyle('opacity: 0.1');
fireEvent.mouseOut(legend!);
// Assert
- expect(getById(container, /Pie.*?first/i)[0]).toHaveAttribute('opacity', '1');
- expect(getById(container, /Pie.*?second/i)[0]).toHaveAttribute('opacity', '1');
+ expect(getById(container, /Pie.*?first/i)[0]).toHaveStyle('opacity: 1');
+ expect(getById(container, /Pie.*?second/i)[0]).toHaveStyle('opacity: 1');
});
test('Should display correct callout data on mouse move', () => {
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
index 78c2160209fc6f..1daf5c828b2547 100644
--- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
+++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
@@ -55,6 +55,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -63,14 +64,12 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
}
d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
data-is-focusable={true}
- fill="#E5E5E5"
id="_Pie_1first20000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -82,6 +81,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
{
cursor: default;
fill: #0078D4;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -90,14 +90,12 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
}
d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
data-is-focusable={true}
- fill="#0078D4"
id="_Pie_1second39000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -109,6 +107,7 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
{
cursor: default;
fill: #DADADA;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -117,14 +116,12 @@ exports[`DonutChart - mouse events Should render callout correctly on mouseover
}
d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
data-is-focusable={true}
- fill="#DADADA"
id="_Pie_1third45000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -747,6 +744,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -755,14 +753,12 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
}
d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
data-is-focusable={true}
- fill="#E5E5E5"
id="_Pie_1first20000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -774,6 +770,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
{
cursor: default;
fill: #0078D4;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -782,14 +779,12 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
}
d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
data-is-focusable={true}
- fill="#0078D4"
id="_Pie_1second39000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -801,6 +796,7 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
{
cursor: default;
fill: #DADADA;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -809,14 +805,12 @@ exports[`DonutChart - mouse events Should render customized callout on mouseover
}
d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
data-is-focusable={true}
- fill="#DADADA"
id="_Pie_1third45000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -1348,6 +1342,7 @@ exports[`DonutChart snapShot testing Should elevate all smaller values to minimu
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -1356,14 +1351,12 @@ exports[`DonutChart snapShot testing Should elevate all smaller values to minimu
}
d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
data-is-focusable={true}
- fill="#E5E5E5"
id="_Pie_1first20000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -1375,6 +1368,7 @@ exports[`DonutChart snapShot testing Should elevate all smaller values to minimu
{
cursor: default;
fill: #0078D4;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -1383,14 +1377,12 @@ exports[`DonutChart snapShot testing Should elevate all smaller values to minimu
}
d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
data-is-focusable={true}
- fill="#0078D4"
id="_Pie_1second39000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -1402,6 +1394,7 @@ exports[`DonutChart snapShot testing Should elevate all smaller values to minimu
{
cursor: default;
fill: #DADADA;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -1410,14 +1403,12 @@ exports[`DonutChart snapShot testing Should elevate all smaller values to minimu
}
d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
data-is-focusable={true}
- fill="#DADADA"
id="_Pie_1third45000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -1869,6 +1860,7 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -1877,14 +1869,12 @@ exports[`DonutChart snapShot testing Should render arc labels 1`] = `
}
d="M0.6,-59.997A60,60,0,0,1,56.068,-21.363L0,0Z"
data-is-focusable={true}
- fill="#E5E5E5"
id="_Pie_1first20000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -3062,7 +3046,8 @@ exports[`DonutChart snapShot testing Should render gradients on arcs 1`] = `
{
cursor: default;
- fill: #795AA6;
+ fill: transparent;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -3071,14 +3056,12 @@ exports[`DonutChart snapShot testing Should render gradients on arcs 1`] = `
}
d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
data-is-focusable={true}
- fill="transparent"
id="_Pie_1second39000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -3118,7 +3101,8 @@ exports[`DonutChart snapShot testing Should render gradients on arcs 1`] = `
{
cursor: default;
- fill: #159195;
+ fill: transparent;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -3127,14 +3111,12 @@ exports[`DonutChart snapShot testing Should render gradients on arcs 1`] = `
}
d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
data-is-focusable={true}
- fill="transparent"
id="_Pie_1third45000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -3615,6 +3597,7 @@ exports[`DonutChart snapShot testing Should render rounded corners on arcs 1`] =
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -3623,14 +3606,12 @@ exports[`DonutChart snapShot testing Should render rounded corners on arcs 1`] =
}
d="M0.97,-96.949A3,3,0,0,1,4.092,-99.916A100,100,0,0,1,92.301,-38.477A3,3,0,0,1,90.6,-34.52L0,0Z"
data-is-focusable={true}
- fill="#E5E5E5"
id="_Pie_1first20000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -3642,6 +3623,7 @@ exports[`DonutChart snapShot testing Should render rounded corners on arcs 1`] =
{
cursor: default;
fill: #0078D4;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -3650,14 +3632,12 @@ exports[`DonutChart snapShot testing Should render rounded corners on arcs 1`] =
}
d="M91.272,-32.701A3,3,0,0,1,95.138,-30.801A100,100,0,0,1,-37.828,92.569A3,3,0,0,1,-39.434,88.572L0,0Z"
data-is-focusable={true}
- fill="#0078D4"
id="_Pie_1second39000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -3669,6 +3649,7 @@ exports[`DonutChart snapShot testing Should render rounded corners on arcs 1`] =
{
cursor: default;
fill: #DADADA;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -3677,14 +3658,12 @@ exports[`DonutChart snapShot testing Should render rounded corners on arcs 1`] =
}
d="M-41.197,87.766A3,3,0,0,1,-45.271,89.166A100,100,0,0,1,-4.092,-99.916A3,3,0,0,1,-0.97,-96.949L0,0Z"
data-is-focusable={true}
- fill="#DADADA"
id="_Pie_1third45000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -4136,6 +4115,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -4144,14 +4124,12 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
}
d="M1.141,-99.993A100,100,0,0,1,93.397,-35.736L51.182,-20.134A55,55,0,0,0,1.141,-54.988Z"
data-is-focusable={true}
- fill="#E5E5E5"
id="_Pie_1first20000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -4163,6 +4141,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
{
cursor: default;
fill: #0078D4;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -4171,14 +4150,12 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
}
d="M94.188,-33.595A100,100,0,0,1,-40.544,91.412L-21.828,50.483A55,55,0,0,0,51.974,-17.993Z"
data-is-focusable={true}
- fill="#0078D4"
id="_Pie_1second39000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -4190,6 +4167,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
{
cursor: default;
fill: #DADADA;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -4198,14 +4176,12 @@ exports[`DonutChart snapShot testing renders DonutChart correctly 1`] = `
}
d="M-42.619,90.463A100,100,0,0,1,-1.141,-99.993L-1.141,-54.988A55,55,0,0,0,-23.904,49.534Z"
data-is-focusable={true}
- fill="#DADADA"
id="_Pie_1third45000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -4657,6 +4633,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
{
cursor: default;
fill: #637cef;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -4665,14 +4642,12 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
}
d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
data-is-focusable={true}
- fill="#637cef"
id="_Pie_1first20000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -4684,6 +4659,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
{
cursor: default;
fill: #e3008c;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -4692,14 +4668,12 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
}
d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
data-is-focusable={true}
- fill="#e3008c"
id="_Pie_1second39000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -4711,6 +4685,7 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
{
cursor: default;
fill: #2aa0a4;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -4719,14 +4694,12 @@ exports[`DonutChart snapShot testing renders DonutChart correctly without color
}
d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
data-is-focusable={true}
- fill="#2aa0a4"
id="_Pie_1third45000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -5178,6 +5151,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -5186,14 +5160,12 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
}
d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
data-is-focusable={true}
- fill="#E5E5E5"
id="_Pie_1first20000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -5205,6 +5177,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
{
cursor: default;
fill: #0078D4;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -5213,14 +5186,12 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
}
d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
data-is-focusable={true}
- fill="#0078D4"
id="_Pie_1second39000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -5232,6 +5203,7 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
{
cursor: default;
fill: #DADADA;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -5240,14 +5212,12 @@ exports[`DonutChart snapShot testing renders enabledLegendsWrapLines correctly 1
}
d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
data-is-focusable={true}
- fill="#DADADA"
id="_Pie_1third45000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -5699,6 +5669,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -5707,14 +5678,12 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
}
d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
data-is-focusable={true}
- fill="#E5E5E5"
id="_Pie_1first20000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -5726,6 +5695,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
{
cursor: default;
fill: #0078D4;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -5734,14 +5704,12 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
}
d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
data-is-focusable={true}
- fill="#0078D4"
id="_Pie_1second39000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -5753,6 +5721,7 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
{
cursor: default;
fill: #DADADA;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -5761,14 +5730,12 @@ exports[`DonutChart snapShot testing renders hideLegend correctly 1`] = `
}
d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
data-is-focusable={true}
- fill="#DADADA"
id="_Pie_1third45000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -5837,6 +5804,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -5845,14 +5813,12 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
}
d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
data-is-focusable={true}
- fill="#E5E5E5"
id="_Pie_1first20000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -5864,6 +5830,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
{
cursor: default;
fill: #0078D4;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -5872,14 +5839,12 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
}
d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
data-is-focusable={true}
- fill="#0078D4"
id="_Pie_1second39000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -5891,6 +5856,7 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
{
cursor: default;
fill: #DADADA;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -5899,14 +5865,12 @@ exports[`DonutChart snapShot testing renders hideTooltip correctly 1`] = `
}
d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
data-is-focusable={true}
- fill="#DADADA"
id="_Pie_1third45000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -6358,6 +6322,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -6366,14 +6331,12 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
}
d="M1,-99.995A100,100,0,0,1,93.447,-35.604L0,0Z"
data-is-focusable={true}
- fill="#E5E5E5"
id="_Pie_1first20000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -6385,6 +6348,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
{
cursor: default;
fill: #0078D4;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -6393,14 +6357,12 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
}
d="M94.14,-33.728A100,100,0,0,1,-40.673,91.355L0,0Z"
data-is-focusable={true}
- fill="#0078D4"
id="_Pie_1second39000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
@@ -6412,6 +6374,7 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
{
cursor: default;
fill: #DADADA;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -6420,14 +6383,12 @@ exports[`DonutChart snapShot testing renders value inside onf the pie 1`] = `
}
d="M-42.492,90.523A100,100,0,0,1,-1,-99.995L0,0Z"
data-is-focusable={true}
- fill="#DADADA"
id="_Pie_1third45000"
onBlur={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseMove={[Function]}
onMouseOver={[Function]}
- opacity={1}
role="img"
/>
diff --git a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
index 7db5977e62062d..5dab0bf43a88d3 100644
--- a/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
+++ b/packages/react-charting/src/components/DonutChart/__snapshots__/DonutChartRTL.test.tsx.snap
@@ -54,6 +54,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -62,9 +63,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
}
d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
data-is-focusable="true"
- fill="#E5E5E5"
id="_Pie_1first20000"
- opacity="1"
role="img"
tabindex="0"
/>
@@ -77,6 +76,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
{
cursor: default;
fill: #0078D4;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -85,9 +85,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
}
d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
data-is-focusable="true"
- fill="#0078D4"
id="_Pie_1second39000"
- opacity="1"
role="img"
tabindex="-1"
/>
@@ -100,6 +98,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
{
cursor: default;
fill: #DADADA;
+ opacity: 1;
outline: transparent;
stroke: #ffffff;
}
@@ -108,9 +107,7 @@ exports[`Donut chart interactions Should hide callout on mouse leave 1`] = `
}
d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
data-is-focusable="true"
- fill="#DADADA"
id="_Pie_1third45000"
- opacity="1"
role="img"
tabindex="-1"
/>
@@ -706,6 +703,7 @@ exports[`Donut chart interactions Should reflect theme change 1`] = `
{
cursor: default;
fill: #E5E5E5;
+ opacity: 1;
outline: transparent;
stroke: #1b1a19;
}
@@ -714,9 +712,7 @@ exports[`Donut chart interactions Should reflect theme change 1`] = `
}
d="M0.585,-54.997A55,55,0,0,1,51.383,-19.615L-18.955,6.382Z"
data-is-focusable="true"
- fill="#E5E5E5"
id="_Pie_4first20000"
- opacity="1"
role="img"
tabindex="0"
/>
@@ -729,6 +725,7 @@ exports[`Donut chart interactions Should reflect theme change 1`] = `
{
cursor: default;
fill: #0078D4;
+ opacity: 1;
outline: transparent;
stroke: #1b1a19;
}
@@ -737,9 +734,7 @@ exports[`Donut chart interactions Should reflect theme change 1`] = `
}
d="M51.789,-18.517A55,55,0,0,1,-22.338,50.26L8.846,-17.938Z"
data-is-focusable="true"
- fill="#0078D4"
id="_Pie_4second39000"
- opacity="1"
role="img"
tabindex="-1"
/>
@@ -752,6 +747,7 @@ exports[`Donut chart interactions Should reflect theme change 1`] = `
{
cursor: default;
fill: #DADADA;
+ opacity: 1;
outline: transparent;
stroke: #1b1a19;
}
@@ -760,9 +756,7 @@ exports[`Donut chart interactions Should reflect theme change 1`] = `
}
d="M-23.402,49.773A55,55,0,0,1,-0.585,-54.997L-0.585,19.991Z"
data-is-focusable="true"
- fill="#DADADA"
id="_Pie_4third45000"
- opacity="1"
role="img"
tabindex="-1"
/>
diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.base.tsx b/packages/react-charting/src/components/GaugeChart/GaugeChart.base.tsx
index ce8b9cb622f510..2913d3bebf2383 100644
--- a/packages/react-charting/src/components/GaugeChart/GaugeChart.base.tsx
+++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.base.tsx
@@ -239,14 +239,23 @@ export class GaugeChartBase extends React.Component
-
+
)}
diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts b/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts
index f59d7d96a7aadf..ba28944b57db0a 100644
--- a/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts
+++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.styles.ts
@@ -2,7 +2,18 @@ import { FontSizes, FontWeights, HighContrastSelector, HighContrastSelectorBlack
import { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';
export const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {
- const { theme, chartValueSize, chartWidth, chartHeight, className, lineColor, toDrawShape } = props;
+ const {
+ theme,
+ chartValueSize,
+ chartWidth,
+ chartHeight,
+ className,
+ lineColor,
+ toDrawShape,
+ solidFill,
+ gradientFill,
+ opacity,
+ } = props;
return {
root: [
@@ -52,6 +63,15 @@ export const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {
segment: {
outline: 'none',
stroke: theme.semanticColors.focusBorder,
+ fill: solidFill,
+ fillOpacity: opacity,
+ },
+
+ gradientSegment: {
+ width: '100%',
+ height: '100%',
+ background: gradientFill,
+ opacity,
},
legendsContainer: {
diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.test.tsx b/packages/react-charting/src/components/GaugeChart/GaugeChart.test.tsx
index ff013172c2828c..a5871964a0d9c7 100644
--- a/packages/react-charting/src/components/GaugeChart/GaugeChart.test.tsx
+++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.test.tsx
@@ -367,16 +367,16 @@ describe('GaugeChart interaction and accessibility tests', () => {
const legend = screen.getByText(segments[0].legend);
fireEvent.mouseOver(legend);
const segs = container.querySelectorAll('[class^="segment"]');
- expect(segs[0]).toHaveAttribute('fill-opacity', '1');
+ expect(segs[0]).toHaveStyle('fill-opacity: 1');
for (let i = 0; i < segs.length; i++) {
if (i !== 0) {
- expect(segs[i]).toHaveAttribute('fill-opacity', '0.1');
+ expect(segs[i]).toHaveStyle('fill-opacity: 0.1');
}
}
fireEvent.mouseOut(legend);
for (let i = 0; i < segs.length; i++) {
- expect(segs[i]).toHaveAttribute('fill-opacity', '1');
+ expect(segs[i]).toHaveStyle('fill-opacity: 1');
}
});
@@ -389,16 +389,16 @@ describe('GaugeChart interaction and accessibility tests', () => {
const legend = screen.getByText(segments[0].legend);
fireEvent.click(legend);
const segs = container.querySelectorAll('[class^="segment"]');
- expect(segs[0]).toHaveAttribute('fill-opacity', '1');
+ expect(segs[0]).toHaveStyle('fill-opacity: 1');
for (let i = 0; i < segs.length; i++) {
if (i !== 0) {
- expect(segs[i]).toHaveAttribute('fill-opacity', '0.1');
+ expect(segs[i]).toHaveStyle('fill-opacity: 0.1');
}
}
fireEvent.click(legend);
for (let i = 0; i < segs.length; i++) {
- expect(segs[i]).toHaveAttribute('fill-opacity', '1');
+ expect(segs[i]).toHaveStyle('fill-opacity: 1');
}
});
diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts b/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts
index 337e5814bd1a9a..648dc7abeca07d 100644
--- a/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts
+++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts
@@ -209,6 +209,21 @@ export interface IGaugeChartStyleProps {
* Boolean flag which determines if shape is drawn in callout
*/
toDrawShape?: boolean;
+
+ /**
+ * solid color for the arc (when enableGradient is false)
+ */
+ solidFill?: string;
+
+ /**
+ * gradient for the arc (when enableGradient is true)
+ */
+ gradientFill?: string;
+
+ /**
+ * opacity of the arc
+ */
+ opacity?: number;
}
/**
@@ -256,6 +271,11 @@ export interface IGaugeChartStyles {
*/
segment?: IStyle;
+ /**
+ * Styles for gradient segments
+ */
+ gradientSegment?: IStyle;
+
/**
* Styles for the legends container
*/
diff --git a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
index 8fe0341419b5fa..41ff22e9be5407 100644
--- a/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
+++ b/packages/react-charting/src/components/GaugeChart/__snapshots__/GaugeChart.test.tsx.snap
@@ -77,13 +77,13 @@ exports[`GaugeChart interaction and accessibility tests should show a callout wh
class=
{
+ fill-opacity: 1;
+ fill: #107c10;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable="true"
- fill="#107c10"
- fill-opacity="1"
role="img"
stroke-width="0"
tabindex="0"
@@ -93,13 +93,13 @@ exports[`GaugeChart interaction and accessibility tests should show a callout wh
class=
{
+ fill-opacity: 1;
+ fill: #f7630c;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable="true"
- fill="#f7630c"
- fill-opacity="1"
role="img"
stroke-width="0"
tabindex="-1"
@@ -109,13 +109,13 @@ exports[`GaugeChart interaction and accessibility tests should show a callout wh
class=
{
+ fill-opacity: 1;
+ fill: #c50f1f;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable="true"
- fill="#c50f1f"
- fill-opacity="1"
role="img"
stroke-width="0"
tabindex="-1"
@@ -867,13 +867,13 @@ exports[`GaugeChart snapshot tests should not render min and max values of the g
className=
{
+ fill-opacity: 1;
+ fill: #107c10;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#107c10"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -886,13 +886,13 @@ exports[`GaugeChart snapshot tests should not render min and max values of the g
className=
{
+ fill-opacity: 1;
+ fill: #f7630c;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#f7630c"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -905,13 +905,13 @@ exports[`GaugeChart snapshot tests should not render min and max values of the g
className=
{
+ fill-opacity: 1;
+ fill: #c50f1f;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#c50f1f"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -1443,13 +1443,13 @@ exports[`GaugeChart snapshot tests should not render the legends when the hideLe
className=
{
+ fill-opacity: 1;
+ fill: #107c10;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#107c10"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -1462,13 +1462,13 @@ exports[`GaugeChart snapshot tests should not render the legends when the hideLe
className=
{
+ fill-opacity: 1;
+ fill: #f7630c;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#f7630c"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -1481,13 +1481,13 @@ exports[`GaugeChart snapshot tests should not render the legends when the hideLe
className=
{
+ fill-opacity: 1;
+ fill: #c50f1f;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#c50f1f"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -1634,13 +1634,13 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly 1`] = `
className=
{
+ fill-opacity: 1;
+ fill: #107c10;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#107c10"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -1653,13 +1653,13 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly 1`] = `
className=
{
+ fill-opacity: 1;
+ fill: #f7630c;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#f7630c"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -1672,13 +1672,13 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly 1`] = `
className=
{
+ fill-opacity: 1;
+ fill: #c50f1f;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#c50f1f"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -2223,13 +2223,13 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly in dark th
className=
{
+ fill-opacity: 1;
+ fill: #54b054;
outline: none;
stroke: #a19f9d;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#54b054"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -2242,13 +2242,13 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly in dark th
className=
{
+ fill-opacity: 1;
+ fill: #f87528;
outline: none;
stroke: #a19f9d;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#f87528"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -2261,13 +2261,13 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly in dark th
className=
{
+ fill-opacity: 1;
+ fill: #dc626d;
outline: none;
stroke: #a19f9d;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#dc626d"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -2800,13 +2800,13 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly when the l
className=
{
+ fill-opacity: 1;
+ fill: #c50f1f;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#c50f1f"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -2819,13 +2819,13 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly when the l
className=
{
+ fill-opacity: 1;
+ fill: #f7630c;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#f7630c"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -2838,13 +2838,13 @@ exports[`GaugeChart snapshot tests should render GaugeChart correctly when the l
className=
{
+ fill-opacity: 1;
+ fill: #107c10;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#107c10"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -3376,13 +3376,13 @@ exports[`GaugeChart snapshot tests should render a color from DataVizPalette for
className=
{
+ fill-opacity: 1;
+ fill: #3a96dd;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#3a96dd"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -3395,13 +3395,13 @@ exports[`GaugeChart snapshot tests should render a color from DataVizPalette for
className=
{
+ fill-opacity: 1;
+ fill: #e3008c;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#e3008c"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -3829,13 +3829,13 @@ exports[`GaugeChart snapshot tests should render a placeholder segment when the
className=
{
+ fill-opacity: 1;
+ fill: blue;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="blue"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -3848,13 +3848,13 @@ exports[`GaugeChart snapshot tests should render a placeholder segment when the
className=
{
+ fill-opacity: 1;
+ fill: #edebe9;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#edebe9"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -4295,13 +4295,13 @@ exports[`GaugeChart snapshot tests should render the chart title correctly 1`] =
className=
{
+ fill-opacity: 1;
+ fill: #107c10;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#107c10"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -4314,13 +4314,13 @@ exports[`GaugeChart snapshot tests should render the chart title correctly 1`] =
className=
{
+ fill-opacity: 1;
+ fill: #f7630c;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#f7630c"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -4333,13 +4333,13 @@ exports[`GaugeChart snapshot tests should render the chart title correctly 1`] =
className=
{
+ fill-opacity: 1;
+ fill: #c50f1f;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#c50f1f"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -4871,13 +4871,13 @@ exports[`GaugeChart snapshot tests should render the chart value in fraction for
className=
{
+ fill-opacity: 1;
+ fill: #107c10;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#107c10"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -4890,13 +4890,13 @@ exports[`GaugeChart snapshot tests should render the chart value in fraction for
className=
{
+ fill-opacity: 1;
+ fill: #f7630c;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#f7630c"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -4909,13 +4909,13 @@ exports[`GaugeChart snapshot tests should render the chart value in fraction for
className=
{
+ fill-opacity: 1;
+ fill: #c50f1f;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#c50f1f"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -5447,13 +5447,13 @@ exports[`GaugeChart snapshot tests should render the sublabel correctly 1`] = `
className=
{
+ fill-opacity: 1;
+ fill: #107c10;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#107c10"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -5466,13 +5466,13 @@ exports[`GaugeChart snapshot tests should render the sublabel correctly 1`] = `
className=
{
+ fill-opacity: 1;
+ fill: #f7630c;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#f7630c"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
@@ -5485,13 +5485,13 @@ exports[`GaugeChart snapshot tests should render the sublabel correctly 1`] = `
className=
{
+ fill-opacity: 1;
+ fill: #c50f1f;
outline: none;
stroke: #605e5c;
}
d="M0,0Z"
data-is-focusable={true}
- fill="#c50f1f"
- fillOpacity={1}
onBlur={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
index ff3184f44d9615..65d04ab60e1d23 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -709,6 +709,7 @@ export class LineChartBase extends React.Component;
}
const createXAxisParams = (xAxisParams?: ICreateXAxisParams): utils.IXAxisParams => {
- const xAxisElement = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ const xAxisElement = document.createElementNS('http://www.w3.org/2000/svg', 'g') as SVGSVGElement;
return {
xAxisElement,
@@ -316,7 +316,7 @@ describe('prepareDatapoints', () => {
});
const createYAxisParams = (yAxisParams?: Partial): utils.IYAxisParams => {
- const yAxisElement = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+ const yAxisElement = document.createElementNS('http://www.w3.org/2000/svg', 'g') as SVGSVGElement;
return {
yMinMaxValues: {
diff --git a/packages/react-charting/src/utilities/gradients.ts b/packages/react-charting/src/utilities/gradients.ts
index 05870d671456c8..9ba53b1884fbd4 100644
--- a/packages/react-charting/src/utilities/gradients.ts
+++ b/packages/react-charting/src/utilities/gradients.ts
@@ -151,8 +151,8 @@ const semanticGradientPalette: GradientPalette = {
['#D33F4C', '#DC626D'], // [cranberry.tint20, cranberry.tint30],
],
disabled: [
- ['#E6E6E6', '#F0F0F0'],
- ['#E6E6E6', '#F0F0F0'],
+ ['#E6E6E6', '#E6E6E6'],
+ ['#E6E6E6', '#E6E6E6'],
],
};
diff --git a/packages/react-charting/src/utilities/utilities.ts b/packages/react-charting/src/utilities/utilities.ts
index 374c8327ab6313..f8983880c944a6 100644
--- a/packages/react-charting/src/utilities/utilities.ts
+++ b/packages/react-charting/src/utilities/utilities.ts
@@ -69,14 +69,14 @@ export enum YAxisType {
}
export interface IWrapLabelProps {
- node: SVGElement | null;
+ node: SVGSVGElement | null;
xAxis: NumericAxis | StringAxis;
noOfCharsToTruncate: number;
showXAxisLablesTooltip: boolean;
}
export interface IRotateLabelProps {
- node: SVGElement | null;
+ node: SVGSVGElement | null;
xAxis: NumericAxis | StringAxis;
}
@@ -116,7 +116,7 @@ export interface IDomainNRange {
export interface IXAxisParams {
domainNRangeValues: IDomainNRange;
- xAxisElement?: SVGElement | null;
+ xAxisElement?: SVGSVGElement | null;
xAxisCount?: number;
showRoundOffXTickValues?: boolean;
xAxistickSize?: number;
@@ -141,7 +141,7 @@ export interface IYAxisParams {
margins: IMargins;
containerWidth: number;
containerHeight: number;
- yAxisElement?: SVGElement | null;
+ yAxisElement?: SVGSVGElement | null;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
yAxisTickFormat?: any;
yAxisTickCount: number;
diff --git a/packages/react-components/babel-preset-global-context/CHANGELOG.json b/packages/react-components/babel-preset-global-context/CHANGELOG.json
index 85ae8a0a11259c..0898320a83c324 100644
--- a/packages/react-components/babel-preset-global-context/CHANGELOG.json
+++ b/packages/react-components/babel-preset-global-context/CHANGELOG.json
@@ -1,6 +1,21 @@
{
"name": "@fluentui/babel-preset-global-context",
"entries": [
+ {
+ "date": "Tue, 10 Sep 2024 10:19:12 GMT",
+ "tag": "@fluentui/babel-preset-global-context_v9.0.0-beta.73",
+ "version": "9.0.0-beta.73",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "beachball",
+ "package": "@fluentui/babel-preset-global-context",
+ "comment": "Bump @fluentui/global-context to v9.0.0-beta.73",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ }
+ ]
+ }
+ },
{
"date": "Thu, 15 Aug 2024 08:22:07 GMT",
"tag": "@fluentui/babel-preset-global-context_v9.0.0-beta.72",
diff --git a/packages/react-components/babel-preset-global-context/CHANGELOG.md b/packages/react-components/babel-preset-global-context/CHANGELOG.md
index bc444caf959f31..643c428db93b15 100644
--- a/packages/react-components/babel-preset-global-context/CHANGELOG.md
+++ b/packages/react-components/babel-preset-global-context/CHANGELOG.md
@@ -1,9 +1,18 @@
# Change Log - @fluentui/babel-preset-global-context
-This log was last generated on Tue, 23 Jul 2024 20:13:14 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:19:12 GMT and should not be manually modified.
+## [9.0.0-beta.73](https://github.com/microsoft/fluentui/tree/@fluentui/babel-preset-global-context_v9.0.0-beta.73)
+
+Tue, 10 Sep 2024 10:19:12 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/babel-preset-global-context_v9.0.0-beta.72..@fluentui/babel-preset-global-context_v9.0.0-beta.73)
+
+### Changes
+
+- Bump @fluentui/global-context to v9.0.0-beta.73 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
## [9.0.0-beta.72](https://github.com/microsoft/fluentui/tree/@fluentui/babel-preset-global-context_v9.0.0-beta.72)
Tue, 23 Jul 2024 20:13:14 GMT
diff --git a/packages/react-components/babel-preset-global-context/package.json b/packages/react-components/babel-preset-global-context/package.json
index 3841dd384d4629..93271543f27534 100644
--- a/packages/react-components/babel-preset-global-context/package.json
+++ b/packages/react-components/babel-preset-global-context/package.json
@@ -1,6 +1,6 @@
{
"name": "@fluentui/babel-preset-global-context",
- "version": "9.0.0-beta.72",
+ "version": "9.0.0-beta.73",
"description": "Babel preset that transforms createContext calls to use global context shims",
"main": "lib-commonjs/index.js",
"typings": "./dist/index.d.ts",
@@ -40,7 +40,7 @@
"find-up": "^5.0.0"
},
"peerDependencies": {
- "@fluentui/global-context": "9.0.0-beta.72"
+ "@fluentui/global-context": "9.0.0-beta.73"
},
"beachball": {
"disallowedChangeTypes": [
diff --git a/packages/react-components/global-context/CHANGELOG.json b/packages/react-components/global-context/CHANGELOG.json
index 121846891f5f78..171aea495f09fd 100644
--- a/packages/react-components/global-context/CHANGELOG.json
+++ b/packages/react-components/global-context/CHANGELOG.json
@@ -1,6 +1,27 @@
{
"name": "@fluentui/global-context",
"entries": [
+ {
+ "date": "Tue, 10 Sep 2024 10:19:12 GMT",
+ "tag": "@fluentui/global-context_v9.0.0-beta.73",
+ "version": "9.0.0-beta.73",
+ "comments": {
+ "prerelease": [
+ {
+ "author": "beachball",
+ "package": "@fluentui/global-context",
+ "comment": "Bump @fluentui/react-context-selector to v9.1.66",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/global-context",
+ "comment": "Bump @fluentui/react-utilities to v9.18.14",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ }
+ ]
+ }
+ },
{
"date": "Thu, 15 Aug 2024 08:22:07 GMT",
"tag": "@fluentui/global-context_v9.0.0-beta.72",
diff --git a/packages/react-components/global-context/CHANGELOG.md b/packages/react-components/global-context/CHANGELOG.md
index 3cd822248cfd04..5991aab6561e70 100644
--- a/packages/react-components/global-context/CHANGELOG.md
+++ b/packages/react-components/global-context/CHANGELOG.md
@@ -1,9 +1,19 @@
# Change Log - @fluentui/global-context
-This log was last generated on Tue, 23 Jul 2024 20:13:14 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:19:12 GMT and should not be manually modified.
+## [9.0.0-beta.73](https://github.com/microsoft/fluentui/tree/@fluentui/global-context_v9.0.0-beta.73)
+
+Tue, 10 Sep 2024 10:19:12 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/global-context_v9.0.0-beta.72..@fluentui/global-context_v9.0.0-beta.73)
+
+### Changes
+
+- Bump @fluentui/react-context-selector to v9.1.66 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
## [9.0.0-beta.72](https://github.com/microsoft/fluentui/tree/@fluentui/global-context_v9.0.0-beta.72)
Tue, 23 Jul 2024 20:13:14 GMT
diff --git a/packages/react-components/global-context/package.json b/packages/react-components/global-context/package.json
index aa0799d4b54cc7..a724b5658eff47 100644
--- a/packages/react-components/global-context/package.json
+++ b/packages/react-components/global-context/package.json
@@ -1,6 +1,6 @@
{
"name": "@fluentui/global-context",
- "version": "9.0.0-beta.72",
+ "version": "9.0.0-beta.73",
"description": "Extension of React createContext to be a true singleton on the global scope",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
@@ -32,8 +32,8 @@
"@fluentui/scripts-tasks": "*"
},
"dependencies": {
- "@fluentui/react-context-selector": "^9.1.65",
- "@fluentui/react-utilities": "^9.18.13",
+ "@fluentui/react-context-selector": "^9.1.66",
+ "@fluentui/react-utilities": "^9.18.14",
"@swc/helpers": "^0.5.1"
},
"peerDependencies": {
diff --git a/packages/react-components/react-accordion/library/CHANGELOG.json b/packages/react-components/react-accordion/library/CHANGELOG.json
index aafe7fbe8b0fb6..f61c3536f395fe 100644
--- a/packages/react-components/react-accordion/library/CHANGELOG.json
+++ b/packages/react-components/react-accordion/library/CHANGELOG.json
@@ -1,6 +1,57 @@
{
"name": "@fluentui/react-accordion",
"entries": [
+ {
+ "date": "Tue, 10 Sep 2024 10:19:12 GMT",
+ "tag": "@fluentui/react-accordion_v9.5.4",
+ "version": "9.5.4",
+ "comments": {
+ "patch": [
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-accordion",
+ "comment": "Bump @fluentui/react-aria to v9.13.5",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-accordion",
+ "comment": "Bump @fluentui/react-context-selector to v9.1.66",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-accordion",
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.43",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-accordion",
+ "comment": "Bump @fluentui/react-motion to v9.5.1",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-accordion",
+ "comment": "Bump @fluentui/react-motion-components-preview to v0.1.3",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-accordion",
+ "comment": "Bump @fluentui/react-tabster to v9.22.6",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-accordion",
+ "comment": "Bump @fluentui/react-utilities to v9.18.14",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ }
+ ]
+ }
+ },
{
"date": "Fri, 16 Aug 2024 10:24:17 GMT",
"tag": "@fluentui/react-accordion_v9.5.3",
diff --git a/packages/react-components/react-accordion/library/CHANGELOG.md b/packages/react-components/react-accordion/library/CHANGELOG.md
index e5f1f20a32b662..323bcd49bc512d 100644
--- a/packages/react-components/react-accordion/library/CHANGELOG.md
+++ b/packages/react-components/react-accordion/library/CHANGELOG.md
@@ -1,9 +1,24 @@
# Change Log - @fluentui/react-accordion
-This log was last generated on Fri, 16 Aug 2024 10:24:17 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:19:12 GMT and should not be manually modified.
+## [9.5.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.5.4)
+
+Tue, 10 Sep 2024 10:19:12 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-accordion_v9.5.3..@fluentui/react-accordion_v9.5.4)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.13.5 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.66 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-motion to v9.5.1 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.1.3 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-accordion_v9.5.3)
Fri, 16 Aug 2024 10:24:17 GMT
diff --git a/packages/react-components/react-accordion/library/package.json b/packages/react-components/react-accordion/library/package.json
index af63051d24072e..a63795014f599f 100644
--- a/packages/react-components/react-accordion/library/package.json
+++ b/packages/react-components/react-accordion/library/package.json
@@ -1,6 +1,6 @@
{
"name": "@fluentui/react-accordion",
- "version": "9.5.3",
+ "version": "9.5.4",
"description": "Fluent UI accordion component",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
@@ -32,16 +32,16 @@
"@fluentui/scripts-tasks": "*"
},
"dependencies": {
- "@fluentui/react-aria": "^9.13.4",
- "@fluentui/react-context-selector": "^9.1.65",
+ "@fluentui/react-aria": "^9.13.5",
+ "@fluentui/react-context-selector": "^9.1.66",
"@fluentui/react-icons": "^2.0.245",
- "@fluentui/react-jsx-runtime": "^9.0.42",
+ "@fluentui/react-jsx-runtime": "^9.0.43",
"@fluentui/react-shared-contexts": "^9.20.0",
- "@fluentui/react-motion": "^9.5.0",
- "@fluentui/react-motion-components-preview": "^0.1.2",
- "@fluentui/react-tabster": "^9.22.5",
+ "@fluentui/react-motion": "^9.5.1",
+ "@fluentui/react-motion-components-preview": "^0.1.3",
+ "@fluentui/react-tabster": "^9.22.6",
"@fluentui/react-theme": "^9.1.19",
- "@fluentui/react-utilities": "^9.18.13",
+ "@fluentui/react-utilities": "^9.18.14",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1"
},
diff --git a/packages/react-components/react-aria/library/CHANGELOG.json b/packages/react-components/react-aria/library/CHANGELOG.json
index 6f2e8f11f63561..e279dcb0db30d9 100644
--- a/packages/react-components/react-aria/library/CHANGELOG.json
+++ b/packages/react-components/react-aria/library/CHANGELOG.json
@@ -1,6 +1,33 @@
{
"name": "@fluentui/react-aria",
"entries": [
+ {
+ "date": "Tue, 10 Sep 2024 10:19:12 GMT",
+ "tag": "@fluentui/react-aria_v9.13.5",
+ "version": "9.13.5",
+ "comments": {
+ "patch": [
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-aria",
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.43",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-aria",
+ "comment": "Bump @fluentui/react-tabster to v9.22.6",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-aria",
+ "comment": "Bump @fluentui/react-utilities to v9.18.14",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ }
+ ]
+ }
+ },
{
"date": "Thu, 15 Aug 2024 13:49:46 GMT",
"tag": "@fluentui/react-aria_v9.13.4",
diff --git a/packages/react-components/react-aria/library/CHANGELOG.md b/packages/react-components/react-aria/library/CHANGELOG.md
index e7ddd56547ea3c..e4915f5a420d1b 100644
--- a/packages/react-components/react-aria/library/CHANGELOG.md
+++ b/packages/react-components/react-aria/library/CHANGELOG.md
@@ -1,9 +1,20 @@
# Change Log - @fluentui/react-aria
-This log was last generated on Thu, 15 Aug 2024 13:49:46 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:19:12 GMT and should not be manually modified.
+## [9.13.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.13.5)
+
+Tue, 10 Sep 2024 10:19:12 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-aria_v9.13.4..@fluentui/react-aria_v9.13.5)
+
+### Patches
+
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
## [9.13.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-aria_v9.13.4)
Thu, 15 Aug 2024 13:49:46 GMT
diff --git a/packages/react-components/react-aria/library/package.json b/packages/react-components/react-aria/library/package.json
index 2fc6eb486a587d..c952dde1faad9f 100644
--- a/packages/react-components/react-aria/library/package.json
+++ b/packages/react-components/react-aria/library/package.json
@@ -1,6 +1,6 @@
{
"name": "@fluentui/react-aria",
- "version": "9.13.4",
+ "version": "9.13.5",
"description": "React helper to ensure ARIA",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
@@ -34,9 +34,9 @@
"dependencies": {
"@fluentui/keyboard-keys": "^9.0.7",
"@fluentui/react-shared-contexts": "^9.20.0",
- "@fluentui/react-jsx-runtime": "^9.0.42",
- "@fluentui/react-tabster": "^9.22.5",
- "@fluentui/react-utilities": "^9.18.13",
+ "@fluentui/react-jsx-runtime": "^9.0.43",
+ "@fluentui/react-tabster": "^9.22.6",
+ "@fluentui/react-utilities": "^9.18.14",
"@swc/helpers": "^0.5.1"
},
"peerDependencies": {
diff --git a/packages/react-components/react-avatar/library/CHANGELOG.json b/packages/react-components/react-avatar/library/CHANGELOG.json
index fc5825b85a0635..dfb65c80c912ec 100644
--- a/packages/react-components/react-avatar/library/CHANGELOG.json
+++ b/packages/react-components/react-avatar/library/CHANGELOG.json
@@ -1,6 +1,57 @@
{
"name": "@fluentui/react-avatar",
"entries": [
+ {
+ "date": "Tue, 10 Sep 2024 10:19:12 GMT",
+ "tag": "@fluentui/react-avatar_v9.6.38",
+ "version": "9.6.38",
+ "comments": {
+ "patch": [
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-avatar",
+ "comment": "Bump @fluentui/react-badge to v9.2.42",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-avatar",
+ "comment": "Bump @fluentui/react-context-selector to v9.1.66",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-avatar",
+ "comment": "Bump @fluentui/react-popover to v9.9.20",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-avatar",
+ "comment": "Bump @fluentui/react-tabster to v9.22.6",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-avatar",
+ "comment": "Bump @fluentui/react-tooltip to v9.4.38",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-avatar",
+ "comment": "Bump @fluentui/react-utilities to v9.18.14",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-avatar",
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.43",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ }
+ ]
+ }
+ },
{
"date": "Thu, 15 Aug 2024 13:49:46 GMT",
"tag": "@fluentui/react-avatar_v9.6.37",
diff --git a/packages/react-components/react-avatar/library/CHANGELOG.md b/packages/react-components/react-avatar/library/CHANGELOG.md
index 4ed245bbd298a6..6eb78e93ef5759 100644
--- a/packages/react-components/react-avatar/library/CHANGELOG.md
+++ b/packages/react-components/react-avatar/library/CHANGELOG.md
@@ -1,9 +1,24 @@
# Change Log - @fluentui/react-avatar
-This log was last generated on Thu, 15 Aug 2024 13:49:46 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:19:12 GMT and should not be manually modified.
+## [9.6.38](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.6.38)
+
+Tue, 10 Sep 2024 10:19:12 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-avatar_v9.6.37..@fluentui/react-avatar_v9.6.38)
+
+### Patches
+
+- Bump @fluentui/react-badge to v9.2.42 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.66 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-popover to v9.9.20 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tooltip to v9.4.38 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
## [9.6.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-avatar_v9.6.37)
Thu, 15 Aug 2024 13:49:46 GMT
diff --git a/packages/react-components/react-avatar/library/package.json b/packages/react-components/react-avatar/library/package.json
index 70fd1883ef1f50..8173b28301b358 100644
--- a/packages/react-components/react-avatar/library/package.json
+++ b/packages/react-components/react-avatar/library/package.json
@@ -1,6 +1,6 @@
{
"name": "@fluentui/react-avatar",
- "version": "9.6.37",
+ "version": "9.6.38",
"description": "React components for building Microsoft web experiences.",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
@@ -37,16 +37,16 @@
"@fluentui/scripts-tasks": "*"
},
"dependencies": {
- "@fluentui/react-badge": "^9.2.41",
- "@fluentui/react-context-selector": "^9.1.65",
+ "@fluentui/react-badge": "^9.2.42",
+ "@fluentui/react-context-selector": "^9.1.66",
"@fluentui/react-icons": "^2.0.245",
- "@fluentui/react-popover": "^9.9.19",
+ "@fluentui/react-popover": "^9.9.20",
"@fluentui/react-shared-contexts": "^9.20.0",
- "@fluentui/react-tabster": "^9.22.5",
+ "@fluentui/react-tabster": "^9.22.6",
"@fluentui/react-theme": "^9.1.19",
- "@fluentui/react-tooltip": "^9.4.37",
- "@fluentui/react-utilities": "^9.18.13",
- "@fluentui/react-jsx-runtime": "^9.0.42",
+ "@fluentui/react-tooltip": "^9.4.38",
+ "@fluentui/react-utilities": "^9.18.14",
+ "@fluentui/react-jsx-runtime": "^9.0.43",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1"
},
diff --git a/packages/react-components/react-badge/library/CHANGELOG.json b/packages/react-components/react-badge/library/CHANGELOG.json
index a4d07d05b9a8e3..a957a7410a611d 100644
--- a/packages/react-components/react-badge/library/CHANGELOG.json
+++ b/packages/react-components/react-badge/library/CHANGELOG.json
@@ -1,6 +1,27 @@
{
"name": "@fluentui/react-badge",
"entries": [
+ {
+ "date": "Tue, 10 Sep 2024 10:19:12 GMT",
+ "tag": "@fluentui/react-badge_v9.2.42",
+ "version": "9.2.42",
+ "comments": {
+ "patch": [
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-badge",
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.43",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-badge",
+ "comment": "Bump @fluentui/react-utilities to v9.18.14",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ }
+ ]
+ }
+ },
{
"date": "Tue, 23 Jul 2024 20:13:14 GMT",
"tag": "@fluentui/react-badge_v9.2.41",
diff --git a/packages/react-components/react-badge/library/CHANGELOG.md b/packages/react-components/react-badge/library/CHANGELOG.md
index 10392a1b49b5dc..1861d4e39ff966 100644
--- a/packages/react-components/react-badge/library/CHANGELOG.md
+++ b/packages/react-components/react-badge/library/CHANGELOG.md
@@ -1,9 +1,19 @@
# Change Log - @fluentui/react-badge
-This log was last generated on Tue, 23 Jul 2024 20:13:14 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:19:12 GMT and should not be manually modified.
+## [9.2.42](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.2.42)
+
+Tue, 10 Sep 2024 10:19:12 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-badge_v9.2.41..@fluentui/react-badge_v9.2.42)
+
+### Patches
+
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
## [9.2.41](https://github.com/microsoft/fluentui/tree/@fluentui/react-badge_v9.2.41)
Tue, 23 Jul 2024 20:13:14 GMT
diff --git a/packages/react-components/react-badge/library/package.json b/packages/react-components/react-badge/library/package.json
index ac421ab7be04e6..ca617d51c6814b 100644
--- a/packages/react-components/react-badge/library/package.json
+++ b/packages/react-components/react-badge/library/package.json
@@ -1,6 +1,6 @@
{
"name": "@fluentui/react-badge",
- "version": "9.2.41",
+ "version": "9.2.42",
"description": "React components for building web experiences",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
@@ -33,10 +33,10 @@
},
"dependencies": {
"@fluentui/react-icons": "^2.0.245",
- "@fluentui/react-jsx-runtime": "^9.0.42",
+ "@fluentui/react-jsx-runtime": "^9.0.43",
"@fluentui/react-shared-contexts": "^9.20.0",
"@fluentui/react-theme": "^9.1.19",
- "@fluentui/react-utilities": "^9.18.13",
+ "@fluentui/react-utilities": "^9.18.14",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1"
},
diff --git a/packages/react-components/react-breadcrumb/library/CHANGELOG.json b/packages/react-components/react-breadcrumb/library/CHANGELOG.json
index ced9ec0ff583cd..4c8a2435f96bbe 100644
--- a/packages/react-components/react-breadcrumb/library/CHANGELOG.json
+++ b/packages/react-components/react-breadcrumb/library/CHANGELOG.json
@@ -1,6 +1,51 @@
{
"name": "@fluentui/react-breadcrumb",
"entries": [
+ {
+ "date": "Tue, 10 Sep 2024 10:19:12 GMT",
+ "tag": "@fluentui/react-breadcrumb_v9.0.37",
+ "version": "9.0.37",
+ "comments": {
+ "patch": [
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-breadcrumb",
+ "comment": "Bump @fluentui/react-aria to v9.13.5",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-breadcrumb",
+ "comment": "Bump @fluentui/react-button to v9.3.90",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-breadcrumb",
+ "comment": "Bump @fluentui/react-link to v9.2.31",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-breadcrumb",
+ "comment": "Bump @fluentui/react-tabster to v9.22.6",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-breadcrumb",
+ "comment": "Bump @fluentui/react-utilities to v9.18.14",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-breadcrumb",
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.43",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ }
+ ]
+ }
+ },
{
"date": "Thu, 15 Aug 2024 13:49:46 GMT",
"tag": "@fluentui/react-breadcrumb_v9.0.36",
diff --git a/packages/react-components/react-breadcrumb/library/CHANGELOG.md b/packages/react-components/react-breadcrumb/library/CHANGELOG.md
index 8ddf1564dd92d6..391177385971d9 100644
--- a/packages/react-components/react-breadcrumb/library/CHANGELOG.md
+++ b/packages/react-components/react-breadcrumb/library/CHANGELOG.md
@@ -1,9 +1,23 @@
# Change Log - @fluentui/react-breadcrumb
-This log was last generated on Thu, 15 Aug 2024 13:49:46 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:19:12 GMT and should not be manually modified.
+## [9.0.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-breadcrumb_v9.0.37)
+
+Tue, 10 Sep 2024 10:19:12 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-breadcrumb_v9.0.36..@fluentui/react-breadcrumb_v9.0.37)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.13.5 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-button to v9.3.90 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-link to v9.2.31 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
## [9.0.36](https://github.com/microsoft/fluentui/tree/@fluentui/react-breadcrumb_v9.0.36)
Thu, 15 Aug 2024 13:49:46 GMT
diff --git a/packages/react-components/react-breadcrumb/library/package.json b/packages/react-components/react-breadcrumb/library/package.json
index 99bd06843f1156..f3030f607426f9 100644
--- a/packages/react-components/react-breadcrumb/library/package.json
+++ b/packages/react-components/react-breadcrumb/library/package.json
@@ -1,6 +1,6 @@
{
"name": "@fluentui/react-breadcrumb",
- "version": "9.0.36",
+ "version": "9.0.37",
"description": "Breadcrumb component for Fluent UI React.",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
@@ -38,15 +38,15 @@
"@fluentui/scripts-tasks": "*"
},
"dependencies": {
- "@fluentui/react-aria": "^9.13.4",
- "@fluentui/react-button": "^9.3.89",
+ "@fluentui/react-aria": "^9.13.5",
+ "@fluentui/react-button": "^9.3.90",
"@fluentui/react-icons": "^2.0.245",
- "@fluentui/react-link": "^9.2.30",
+ "@fluentui/react-link": "^9.2.31",
"@fluentui/react-shared-contexts": "^9.20.0",
- "@fluentui/react-tabster": "^9.22.5",
+ "@fluentui/react-tabster": "^9.22.6",
"@fluentui/react-theme": "^9.1.19",
- "@fluentui/react-utilities": "^9.18.13",
- "@fluentui/react-jsx-runtime": "^9.0.42",
+ "@fluentui/react-utilities": "^9.18.14",
+ "@fluentui/react-jsx-runtime": "^9.0.43",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1"
},
diff --git a/packages/react-components/react-button/library/CHANGELOG.json b/packages/react-components/react-button/library/CHANGELOG.json
index 11fc9c1955705f..ffb16df5ab5aeb 100644
--- a/packages/react-components/react-button/library/CHANGELOG.json
+++ b/packages/react-components/react-button/library/CHANGELOG.json
@@ -1,6 +1,45 @@
{
"name": "@fluentui/react-button",
"entries": [
+ {
+ "date": "Tue, 10 Sep 2024 10:19:04 GMT",
+ "tag": "@fluentui/react-button_v9.3.90",
+ "version": "9.3.90",
+ "comments": {
+ "patch": [
+ {
+ "author": "sarah.higley@microsoft.com",
+ "package": "@fluentui/react-button",
+ "commit": "99348c848e4729e8794581ed8499bb350cd54732",
+ "comment": "fix: medium and large SplitButton menuButton is at least 24px wide"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-button",
+ "comment": "Bump @fluentui/react-aria to v9.13.5",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-button",
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.43",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-button",
+ "comment": "Bump @fluentui/react-tabster to v9.22.6",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-button",
+ "comment": "Bump @fluentui/react-utilities to v9.18.14",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ }
+ ]
+ }
+ },
{
"date": "Thu, 15 Aug 2024 13:49:46 GMT",
"tag": "@fluentui/react-button_v9.3.89",
diff --git a/packages/react-components/react-button/library/CHANGELOG.md b/packages/react-components/react-button/library/CHANGELOG.md
index 8ee6251b37d02d..a856022f1ef6e9 100644
--- a/packages/react-components/react-button/library/CHANGELOG.md
+++ b/packages/react-components/react-button/library/CHANGELOG.md
@@ -1,9 +1,22 @@
# Change Log - @fluentui/react-button
-This log was last generated on Thu, 15 Aug 2024 13:49:46 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:19:04 GMT and should not be manually modified.
+## [9.3.90](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.90)
+
+Tue, 10 Sep 2024 10:19:04 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.89..@fluentui/react-button_v9.3.90)
+
+### Patches
+
+- fix: medium and large SplitButton menuButton is at least 24px wide ([PR #32309](https://github.com/microsoft/fluentui/pull/32309) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-aria to v9.13.5 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
## [9.3.89](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.89)
Thu, 15 Aug 2024 13:49:46 GMT
diff --git a/packages/react-components/react-button/library/package.json b/packages/react-components/react-button/library/package.json
index 7a2453e9228a7d..89f28f48a9fe6e 100644
--- a/packages/react-components/react-button/library/package.json
+++ b/packages/react-components/react-button/library/package.json
@@ -1,6 +1,6 @@
{
"name": "@fluentui/react-button",
- "version": "9.3.89",
+ "version": "9.3.90",
"description": "Fluent UI React Button component.",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
@@ -34,13 +34,13 @@
},
"dependencies": {
"@fluentui/keyboard-keys": "^9.0.7",
- "@fluentui/react-aria": "^9.13.4",
+ "@fluentui/react-aria": "^9.13.5",
"@fluentui/react-icons": "^2.0.245",
- "@fluentui/react-jsx-runtime": "^9.0.42",
+ "@fluentui/react-jsx-runtime": "^9.0.43",
"@fluentui/react-shared-contexts": "^9.20.0",
- "@fluentui/react-tabster": "^9.22.5",
+ "@fluentui/react-tabster": "^9.22.6",
"@fluentui/react-theme": "^9.1.19",
- "@fluentui/react-utilities": "^9.18.13",
+ "@fluentui/react-utilities": "^9.18.14",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1"
},
diff --git a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts
index 6b6826712ac3d3..f3ebfaf3efa880 100644
--- a/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts
+++ b/packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts
@@ -10,6 +10,10 @@ export const splitButtonClassNames: SlotClassNames = {
primaryActionButton: 'fui-SplitButton__primaryActionButton',
};
+// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:
+// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum
+const MIN_TARGET_SIZE = '24px';
+
const useFocusStyles = makeStyles({
primaryActionButton: createCustomFocusIndicatorStyle({
borderTopRightRadius: 0,
@@ -40,7 +44,7 @@ const useRootStyles = makeStyles({
borderLeftWidth: 0,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
- minWidth: 0,
+ minWidth: MIN_TARGET_SIZE,
},
},
diff --git a/packages/react-components/react-calendar-compat/library/CHANGELOG.json b/packages/react-components/react-calendar-compat/library/CHANGELOG.json
index aaec5609c650dd..bfa7be7dd65e3d 100644
--- a/packages/react-components/react-calendar-compat/library/CHANGELOG.json
+++ b/packages/react-components/react-calendar-compat/library/CHANGELOG.json
@@ -1,6 +1,33 @@
{
"name": "@fluentui/react-calendar-compat",
"entries": [
+ {
+ "date": "Tue, 10 Sep 2024 10:19:12 GMT",
+ "tag": "@fluentui/react-calendar-compat_v0.1.17",
+ "version": "0.1.17",
+ "comments": {
+ "patch": [
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-calendar-compat",
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.43",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-calendar-compat",
+ "comment": "Bump @fluentui/react-tabster to v9.22.6",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-calendar-compat",
+ "comment": "Bump @fluentui/react-utilities to v9.18.14",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ }
+ ]
+ }
+ },
{
"date": "Thu, 15 Aug 2024 13:49:46 GMT",
"tag": "@fluentui/react-calendar-compat_v0.1.16",
diff --git a/packages/react-components/react-calendar-compat/library/CHANGELOG.md b/packages/react-components/react-calendar-compat/library/CHANGELOG.md
index d61a78fb1058b2..dd179596d9e0a6 100644
--- a/packages/react-components/react-calendar-compat/library/CHANGELOG.md
+++ b/packages/react-components/react-calendar-compat/library/CHANGELOG.md
@@ -1,9 +1,20 @@
# Change Log - @fluentui/react-calendar-compat
-This log was last generated on Thu, 15 Aug 2024 13:49:46 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:19:12 GMT and should not be manually modified.
+## [0.1.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.1.17)
+
+Tue, 10 Sep 2024 10:19:12 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-calendar-compat_v0.1.16..@fluentui/react-calendar-compat_v0.1.17)
+
+### Patches
+
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
## [0.1.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-calendar-compat_v0.1.16)
Thu, 15 Aug 2024 13:49:46 GMT
diff --git a/packages/react-components/react-calendar-compat/library/package.json b/packages/react-components/react-calendar-compat/library/package.json
index 731331f076f33b..99d0c8473e88f5 100644
--- a/packages/react-components/react-calendar-compat/library/package.json
+++ b/packages/react-components/react-calendar-compat/library/package.json
@@ -1,6 +1,6 @@
{
"name": "@fluentui/react-calendar-compat",
- "version": "0.1.16",
+ "version": "0.1.17",
"description": "Calendar compat component for Fluent UI v9",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
@@ -32,11 +32,11 @@
"dependencies": {
"@fluentui/keyboard-keys": "^9.0.7",
"@fluentui/react-icons": "^2.0.245",
- "@fluentui/react-jsx-runtime": "^9.0.42",
+ "@fluentui/react-jsx-runtime": "^9.0.43",
"@fluentui/react-shared-contexts": "^9.20.0",
- "@fluentui/react-tabster": "^9.22.5",
+ "@fluentui/react-tabster": "^9.22.6",
"@fluentui/react-theme": "^9.1.19",
- "@fluentui/react-utilities": "^9.18.13",
+ "@fluentui/react-utilities": "^9.18.14",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1"
},
diff --git a/packages/react-components/react-card/library/CHANGELOG.json b/packages/react-components/react-card/library/CHANGELOG.json
index 393cd8d000f8f5..69dd7190ef0fe2 100644
--- a/packages/react-components/react-card/library/CHANGELOG.json
+++ b/packages/react-components/react-card/library/CHANGELOG.json
@@ -1,6 +1,45 @@
{
"name": "@fluentui/react-card",
"entries": [
+ {
+ "date": "Tue, 10 Sep 2024 10:19:04 GMT",
+ "tag": "@fluentui/react-card_v9.0.92",
+ "version": "9.0.92",
+ "comments": {
+ "patch": [
+ {
+ "author": "bernardo.sunderhus@gmail.com",
+ "package": "@fluentui/react-card",
+ "commit": "ce57deb4448c086d998d0400368906e0a996aeff",
+ "comment": "fix: follow up on assertSlots fixes"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-card",
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.43",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-card",
+ "comment": "Bump @fluentui/react-tabster to v9.22.6",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-card",
+ "comment": "Bump @fluentui/react-text to v9.4.24",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-card",
+ "comment": "Bump @fluentui/react-utilities to v9.18.14",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ }
+ ]
+ }
+ },
{
"date": "Thu, 15 Aug 2024 13:49:46 GMT",
"tag": "@fluentui/react-card_v9.0.91",
diff --git a/packages/react-components/react-card/library/CHANGELOG.md b/packages/react-components/react-card/library/CHANGELOG.md
index 944828609ba800..c6d4c2ee68897f 100644
--- a/packages/react-components/react-card/library/CHANGELOG.md
+++ b/packages/react-components/react-card/library/CHANGELOG.md
@@ -1,9 +1,22 @@
# Change Log - @fluentui/react-card
-This log was last generated on Thu, 15 Aug 2024 13:49:46 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:19:04 GMT and should not be manually modified.
+## [9.0.92](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.92)
+
+Tue, 10 Sep 2024 10:19:04 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.91..@fluentui/react-card_v9.0.92)
+
+### Patches
+
+- fix: follow up on assertSlots fixes ([PR #32323](https://github.com/microsoft/fluentui/pull/32323) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-text to v9.4.24 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
## [9.0.91](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.91)
Thu, 15 Aug 2024 13:49:46 GMT
diff --git a/packages/react-components/react-card/library/package.json b/packages/react-components/react-card/library/package.json
index 99440b3d4c7353..48414ebad41d67 100644
--- a/packages/react-components/react-card/library/package.json
+++ b/packages/react-components/react-card/library/package.json
@@ -1,6 +1,6 @@
{
"name": "@fluentui/react-card",
- "version": "9.0.91",
+ "version": "9.0.92",
"private": false,
"description": "Card container components for Fluent UI React.",
"main": "lib-commonjs/index.js",
@@ -39,11 +39,11 @@
},
"dependencies": {
"@fluentui/keyboard-keys": "^9.0.7",
- "@fluentui/react-jsx-runtime": "^9.0.42",
- "@fluentui/react-tabster": "^9.22.5",
- "@fluentui/react-text": "^9.4.23",
+ "@fluentui/react-jsx-runtime": "^9.0.43",
+ "@fluentui/react-tabster": "^9.22.6",
+ "@fluentui/react-text": "^9.4.24",
"@fluentui/react-theme": "^9.1.19",
- "@fluentui/react-utilities": "^9.18.13",
+ "@fluentui/react-utilities": "^9.18.14",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1"
},
diff --git a/packages/react-components/react-card/library/src/components/CardHeader/renderCardHeader.tsx b/packages/react-components/react-card/library/src/components/CardHeader/renderCardHeader.tsx
index ad78a2ed0f95f3..6e4f572dafd1af 100644
--- a/packages/react-components/react-card/library/src/components/CardHeader/renderCardHeader.tsx
+++ b/packages/react-components/react-card/library/src/components/CardHeader/renderCardHeader.tsx
@@ -13,7 +13,7 @@ export const renderCardHeader_unstable = (state: CardHeaderState) => {
return (
{state.image &&
diff --git a/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx b/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx
new file mode 100644
index 00000000000000..acd97129fbeba7
--- /dev/null
+++ b/packages/react-components/react-card/stories/src/Card/CardAction.stories.tsx
@@ -0,0 +1,169 @@
+import * as React from 'react';
+import {
+ Body1,
+ Button,
+ Caption1,
+ Card,
+ CardHeader,
+ CardFooter,
+ CardPreview,
+ Link,
+ makeStyles,
+ Subtitle1,
+ tokens,
+} from '@fluentui/react-components';
+import { MoreHorizontal20Regular, Open16Regular } from '@fluentui/react-icons';
+
+const resolveAsset = (asset: string) => {
+ const ASSET_URL =
+ 'https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/stories/src/assets/';
+
+ return `${ASSET_URL}${asset}`;
+};
+
+const useStyles = makeStyles({
+ main: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ flexDirection: 'column',
+ columnGap: '16px',
+ rowGap: '36px',
+ },
+
+ title: { margin: '0 0 12px' },
+
+ description: { margin: '0 0 12px' },
+
+ card: {
+ width: '400px',
+ maxWidth: '100%',
+ height: 'fit-content',
+ },
+
+ link: {
+ color: tokens.colorNeutralForeground1,
+
+ ':hover': {
+ color: tokens.colorNeutralForeground1,
+ textDecoration: 'none',
+ },
+ },
+
+ text: { margin: '0' },
+});
+
+const Header = ({ title, description }: Record) => {
+ const styles = useStyles();
+
+ return (
+ <>
+ {title ? (
+
+ {title}
+
+ ) : null}
+
+ {description ? (
+
+ {description}
+
+ ) : null}
+
+ );
+};
+
+export const WithAction = () => {
+ const styles = useStyles();
+ const linkRef = React.useRef(null);
+
+ const onActionCardKeyDown = (ev: React.KeyboardEvent) => {
+ if (ev.key === 'Enter') {
+ onActionCardClick();
+ }
+ };
+
+ const onActionCardClick = () => {
+ alert('Opened Classroom Collaboration app');
+ };
+
+ const onLinkedCardClick = () => {
+ linkRef.current?.click();
+ };
+
+ const onLinkedCardKeyDown = (ev: React.KeyboardEvent) => {
+ if (ev.key === 'Enter') {
+ onLinkedCardClick();
+ }
+ };
+
+ return (
+
+
+
+
+ })
+
+
+
+ App Name
+
+ }
+ description={Developer }
+ action={} aria-label="More options" />}
+ />
+
+
+ Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar
+ plum.
+
+
+
+ } onClick={onActionCardClick}>
+ Open
+
+
+
+
+
+
+
+
+
+
+
+ Developer }
+ action={} aria-label="More options" />}
+ />
+
+
+
+ );
+};
+
+WithAction.parameters = {
+ docs: {
+ description: {
+ story:
+ "When giving a card a top-level click handler, it's important to ensure the same action can be done by a button or link within the Card. " +
+ 'This ensures the action is accesible to screen reader, touch screen reader, keyboard, and voice control users.',
+ },
+ },
+};
diff --git a/packages/react-components/react-card/stories/src/Card/index.stories.tsx b/packages/react-components/react-card/stories/src/Card/index.stories.tsx
index 8efb93eb9a05b0..6645c549752b06 100644
--- a/packages/react-components/react-card/stories/src/Card/index.stories.tsx
+++ b/packages/react-components/react-card/stories/src/Card/index.stories.tsx
@@ -8,6 +8,7 @@ export { Size } from './CardSize.stories';
export { Appearance } from './CardAppearance.stories';
export { Selectable } from './CardSelectable.stories';
export { SelectableIndicator } from './CardSelectableIndicator.stories';
+export { WithAction } from './CardAction.stories';
export { FocusMode } from './CardFocusMode.stories';
export { Templates } from './CardTemplates.stories';
diff --git a/packages/react-components/react-carousel-preview/library/CHANGELOG.json b/packages/react-components/react-carousel-preview/library/CHANGELOG.json
index 62403684d4df58..86c504f3010310 100644
--- a/packages/react-components/react-carousel-preview/library/CHANGELOG.json
+++ b/packages/react-components/react-carousel-preview/library/CHANGELOG.json
@@ -1,6 +1,77 @@
{
"name": "@fluentui/react-carousel-preview",
"entries": [
+ {
+ "date": "Tue, 10 Sep 2024 10:19:05 GMT",
+ "tag": "@fluentui/react-carousel-preview_v0.3.0",
+ "version": "0.3.0",
+ "comments": {
+ "minor": [
+ {
+ "author": "mifraser@microsoft.com",
+ "package": "@fluentui/react-carousel-preview",
+ "commit": "26ad33a04b489d59a8e64dc7337734ea8568fbfc",
+ "comment": "feat: Add accessibility and focus modes to cards"
+ },
+ {
+ "author": "mifraser@microsoft.com",
+ "package": "@fluentui/react-carousel-preview",
+ "commit": "f481a67b7ea12fea5b9953f738872901225221ef",
+ "comment": "feat: Add brand appearance to nav buttons, update action states"
+ },
+ {
+ "author": "mifraser@microsoft.com",
+ "package": "@fluentui/react-carousel-preview",
+ "commit": "95e64e87fcbcebfde3ec8b2c0e45685d627116d6",
+ "comment": "feat: Add enableDrag option for mouse/touch scroll support"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-carousel-preview",
+ "comment": "Bump @fluentui/react-aria to v9.13.5",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-carousel-preview",
+ "comment": "Bump @fluentui/react-button to v9.3.90",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-carousel-preview",
+ "comment": "Bump @fluentui/react-context-selector to v9.1.66",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-carousel-preview",
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.43",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-carousel-preview",
+ "comment": "Bump @fluentui/react-tabster to v9.22.6",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ },
+ {
+ "author": "beachball",
+ "package": "@fluentui/react-carousel-preview",
+ "comment": "Bump @fluentui/react-utilities to v9.18.14",
+ "commit": "b1c2ab614e70a7e34a35d590fc2cc838452ef14d"
+ }
+ ],
+ "patch": [
+ {
+ "author": "bernardo.sunderhus@gmail.com",
+ "package": "@fluentui/react-carousel-preview",
+ "commit": "ce57deb4448c086d998d0400368906e0a996aeff",
+ "comment": "chore: follow up on assertSlots fixes"
+ }
+ ]
+ }
+ },
{
"date": "Thu, 15 Aug 2024 13:49:46 GMT",
"tag": "@fluentui/react-carousel-preview_v0.2.2",
diff --git a/packages/react-components/react-carousel-preview/library/CHANGELOG.md b/packages/react-components/react-carousel-preview/library/CHANGELOG.md
index 656de35fd230d8..56118d05c41d95 100644
--- a/packages/react-components/react-carousel-preview/library/CHANGELOG.md
+++ b/packages/react-components/react-carousel-preview/library/CHANGELOG.md
@@ -1,9 +1,30 @@
# Change Log - @fluentui/react-carousel-preview
-This log was last generated on Thu, 15 Aug 2024 13:49:46 GMT and should not be manually modified.
+This log was last generated on Tue, 10 Sep 2024 10:19:05 GMT and should not be manually modified.
+## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel-preview_v0.3.0)
+
+Tue, 10 Sep 2024 10:19:05 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-carousel-preview_v0.2.2..@fluentui/react-carousel-preview_v0.3.0)
+
+### Minor changes
+
+- feat: Add accessibility and focus modes to cards ([PR #32181](https://github.com/microsoft/fluentui/pull/32181) by mifraser@microsoft.com)
+- feat: Add brand appearance to nav buttons, update action states ([PR #32348](https://github.com/microsoft/fluentui/pull/32348) by mifraser@microsoft.com)
+- feat: Add enableDrag option for mouse/touch scroll support ([PR #32388](https://github.com/microsoft/fluentui/pull/32388) by mifraser@microsoft.com)
+- Bump @fluentui/react-aria to v9.13.5 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-button to v9.3.90 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.66 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
+
+### Patches
+
+- chore: follow up on assertSlots fixes ([PR #32323](https://github.com/microsoft/fluentui/pull/32323) by bernardo.sunderhus@gmail.com)
+
## [0.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-carousel-preview_v0.2.2)
Thu, 15 Aug 2024 13:49:46 GMT
diff --git a/packages/react-components/react-carousel-preview/library/config/tests.js b/packages/react-components/react-carousel-preview/library/config/tests.js
index 2e211ae9e21420..c6c67de97059e8 100644
--- a/packages/react-components/react-carousel-preview/library/config/tests.js
+++ b/packages/react-components/react-carousel-preview/library/config/tests.js
@@ -1 +1,3 @@
/** Jest test setup file. */
+
+require('@testing-library/jest-dom');
diff --git a/packages/react-components/react-carousel-preview/library/etc/react-carousel-preview.api.md b/packages/react-components/react-carousel-preview/library/etc/react-carousel-preview.api.md
index fb0fa29dfd16fc..cb2b770600fc5c 100644
--- a/packages/react-components/react-carousel-preview/library/etc/react-carousel-preview.api.md
+++ b/packages/react-components/react-carousel-preview/library/etc/react-carousel-preview.api.md
@@ -13,9 +13,13 @@ import { ButtonSlots } from '@fluentui/react-button';
import { ButtonState } from '@fluentui/react-button';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
+import { ContextSelector } from '@fluentui/react-context-selector';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
+import { FC } from 'react';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -33,9 +37,8 @@ export const carouselAutoplayButtonClassNames: SlotClassNames & {
- defaultAutoplay?: boolean;
- autoplay?: boolean;
- onAutoplayChange?: EventHandler;
+ autoplayAriaLabel?: CarouselAutoplayAriaLabelFunction;
+ onCheckedChange?: EventHandler;
};
// @public (undocumented)
@@ -44,7 +47,7 @@ export type CarouselAutoplayButtonSlots = ButtonSlots & {
};
// @public
-export type CarouselAutoplayButtonState = ToggleButtonState & ComponentState & Pick;
+export type CarouselAutoplayButtonState = ToggleButtonState & ComponentState;
// @public
export const CarouselButton: ForwardRefComponent;
@@ -53,8 +56,8 @@ export const CarouselButton: ForwardRefComponent;
export const carouselButtonClassNames: SlotClassNames;
// @public
-export type CarouselButtonProps = ButtonProps & ComponentProps & {
- navType: 'prev' | 'next';
+export type CarouselButtonProps = Partial & ComponentProps & {
+ navType?: 'prev' | 'next';
};
// @public (undocumented)
@@ -63,7 +66,7 @@ export type CarouselButtonSlots = ButtonSlots & {
};
// @public
-export type CarouselButtonState = ButtonState & ComponentState & Pick;
+export type CarouselButtonState = ButtonState & ComponentState & Required>;
// @public
export const CarouselCard: ForwardRefComponent;
@@ -72,7 +75,9 @@ export const CarouselCard: ForwardRefComponent;
export const carouselCardClassNames: SlotClassNames;
// @public
-export type CarouselCardProps = ComponentProps;
+export type CarouselCardProps = ComponentProps & {
+ autoSize?: boolean;
+};
// @public (undocumented)
export type CarouselCardSlots = {
@@ -80,28 +85,35 @@ export type CarouselCardSlots = {
};
// @public
-export type CarouselCardState = ComponentState;
+export type CarouselCardState = ComponentState & Pick;
// @public (undocumented)
export const carouselClassNames: SlotClassNames;
-// @public
-export const CarouselFooter: ForwardRefComponent;
+// @public (undocumented)
+export const carouselContextDefaultValue: CarouselContextValue;
// @public (undocumented)
-export const carouselFooterClassNames: SlotClassNames;
+export type CarouselContextValue = {
+ activeIndex: number;
+ circular: boolean;
+ selectPageByElement: (event: React_2.FocusEvent, element: HTMLElement, jump?: boolean) => number;
+ selectPageByDirection: (event: React_2.MouseEvent, direction: 'next' | 'prev') => number;
+ selectPageByIndex: (event: React_2.MouseEvent, value: number, jump?: boolean) => void;
+ subscribeForValues: (listener: (data: CarouselUpdateData) => void) => () => void;
+ enableAutoplay: (autoplay: boolean) => void;
+};
// @public
-export type CarouselFooterProps = ComponentProps & {};
+export type CarouselContextValues = {
+ carousel: CarouselContextValue;
+};
// @public (undocumented)
-export type CarouselFooterSlots = {
- root: Slot<'div'>;
+export type CarouselIndexChangeData = EventData<'click' | 'focus', React_2.FocusEvent | React_2.MouseEvent> & {
+ index: number;
};
-// @public
-export type CarouselFooterState = ComponentState;
-
// @public
export const CarouselNav: ForwardRefComponent;
@@ -122,11 +134,33 @@ export type CarouselNavButtonSlots = {
// @public
export type CarouselNavButtonState = ComponentState & {
selected?: boolean;
-};
+} & Pick;
// @public (undocumented)
export const carouselNavClassNames: SlotClassNames;
+// @public
+export const CarouselNavContainer: ForwardRefComponent;
+
+// @public (undocumented)
+export const carouselNavContainerClassNames: SlotClassNames;
+
+// @public
+export type CarouselNavContainerProps = ComponentProps & {
+ layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';
+};
+
+// @public (undocumented)
+export type CarouselNavContainerSlots = {
+ root: Slot<'div'>;
+ next?: Slot;
+ prev?: Slot;
+ autoplay?: Slot;
+};
+
+// @public
+export type CarouselNavContainerState = ComponentState & Pick;
+
// @public
export const CarouselNavImageButton: ForwardRefComponent;
@@ -139,7 +173,7 @@ export type CarouselNavImageButtonProps = ComponentProps>;
- image: Slot<'img'>;
+ image: NonNullable>;
};
// @public
@@ -150,7 +184,7 @@ export type CarouselNavImageButtonState = ComponentState>, 'children'> & {
children: NavButtonRenderFunction;
-};
+} & Partial>;
// @public (undocumented)
export type CarouselNavSlots = {
@@ -159,8 +193,9 @@ export type CarouselNavSlots = {
// @public (undocumented)
export type CarouselNavState = ComponentState & {
- totalSlides: number;
+ appearance?: 'brand';
renderNavButton: NavButtonRenderFunction;
+ totalSlides: number;
};
// @public
@@ -171,8 +206,13 @@ export type CarouselProps = ComponentProps & {
onActiveIndexChange?: EventHandler;
circular?: boolean;
groupSize?: number | 'auto';
+ draggable?: boolean;
+ whitespace?: boolean;
};
+// @public (undocumented)
+export const CarouselProvider: Provider & FC>;
+
// @public
export const CarouselSlider: ForwardRefComponent;
@@ -180,7 +220,9 @@ export const CarouselSlider: ForwardRefComponent;
export const carouselSliderClassNames: SlotClassNames;
// @public
-export type CarouselSliderProps = Partial>;
+export type CarouselSliderProps = Partial> & {
+ cardFocus?: boolean;
+};
// @public (undocumented)
export type CarouselSliderSlots = {
@@ -188,7 +230,7 @@ export type CarouselSliderSlots = {
};
// @public
-export type CarouselSliderState = ComponentState;
+export type CarouselSliderState = ComponentState & Pick;
// @public (undocumented)
export type CarouselSlots = {
@@ -214,19 +256,19 @@ export const renderCarouselButton_unstable: (state: CarouselButtonState) => JSX.
export const renderCarouselCard_unstable: (state: CarouselCardState) => JSX.Element;
// @public
-export const renderCarouselFooter_unstable: (state: CarouselFooterState) => JSX.Element;
+export const renderCarouselNav_unstable: (state: CarouselNavState, contextValues: CarouselNavContextValues) => JSX.Element;
// @public
-export const renderCarouselNav_unstable: (state: CarouselNavState) => JSX.Element;
+export const renderCarouselNavButton_unstable: (state: CarouselNavButtonState) => JSX.Element;
// @public
-export const renderCarouselNavButton_unstable: (state: CarouselNavButtonState) => JSX.Element;
+export const renderCarouselNavContainer_unstable: (state: CarouselNavContainerState) => JSX.Element;
// @public
export const renderCarouselNavImageButton_unstable: (state: CarouselNavImageButtonState) => JSX.Element;
// @public
-export const renderCarouselSlider_unstable: (state: CarouselSliderState) => JSX.Element;
+export const renderCarouselSlider_unstable: (state: CarouselSliderState, contextValues: CarouselSliderContextValues) => JSX.Element;
// @public
export function useCarousel_unstable(props: CarouselProps, ref: React_2.Ref): CarouselState;
@@ -249,11 +291,8 @@ export const useCarouselCard_unstable: (props: CarouselCardProps, ref: React_2.R
// @public
export const useCarouselCardStyles_unstable: (state: CarouselCardState) => CarouselCardState;
-// @public
-export const useCarouselFooter_unstable: (props: CarouselFooterProps, ref: React_2.Ref) => CarouselFooterState;
-
-// @public
-export const useCarouselFooterStyles_unstable: (state: CarouselFooterState) => CarouselFooterState;
+// @public (undocumented)
+export const useCarouselContext_unstable: (selector: ContextSelector) => T;
// @public
export const useCarouselNav_unstable: (props: CarouselNavProps, ref: React_2.Ref) => CarouselNavState;
@@ -264,6 +303,12 @@ export const useCarouselNavButton_unstable: (props: CarouselNavButtonProps, ref:
// @public
export const useCarouselNavButtonStyles_unstable: (state: CarouselNavButtonState) => CarouselNavButtonState;
+// @public
+export const useCarouselNavContainer_unstable: (props: CarouselNavContainerProps, ref: React_2.Ref) => CarouselNavContainerState;
+
+// @public
+export const useCarouselNavContainerStyles_unstable: (state: CarouselNavContainerState) => CarouselNavContainerState;
+
// @public
export const useCarouselNavImageButton_unstable: (props: CarouselNavImageButtonProps, ref: React_2.Ref) => CarouselNavImageButtonState;
diff --git a/packages/react-components/react-carousel-preview/library/package.json b/packages/react-components/react-carousel-preview/library/package.json
index 67803af555e913..6b360d215f0f75 100644
--- a/packages/react-components/react-carousel-preview/library/package.json
+++ b/packages/react-components/react-carousel-preview/library/package.json
@@ -1,6 +1,6 @@
{
"name": "@fluentui/react-carousel-preview",
- "version": "0.2.2",
+ "version": "0.3.0",
"description": "A composable carousel component that enables pagination with minimal rerenders",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
@@ -35,15 +35,15 @@
"@fluentui/scripts-tasks": "*"
},
"dependencies": {
- "@fluentui/react-aria": "^9.13.4",
- "@fluentui/react-button": "^9.3.89",
- "@fluentui/react-context-selector": "^9.1.65",
+ "@fluentui/react-aria": "^9.13.5",
+ "@fluentui/react-button": "^9.3.90",
+ "@fluentui/react-context-selector": "^9.1.66",
"@fluentui/react-icons": "^2.0.245",
- "@fluentui/react-jsx-runtime": "^9.0.42",
+ "@fluentui/react-jsx-runtime": "^9.0.43",
"@fluentui/react-shared-contexts": "^9.20.0",
- "@fluentui/react-tabster": "^9.22.5",
+ "@fluentui/react-tabster": "^9.22.6",
"@fluentui/react-theme": "^9.1.19",
- "@fluentui/react-utilities": "^9.18.13",
+ "@fluentui/react-utilities": "^9.18.14",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1",
"embla-carousel": "8.1.8",
diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselContext.ts b/packages/react-components/react-carousel-preview/library/src/CarouselContext.ts
new file mode 100644
index 00000000000000..29056ad29a3685
--- /dev/null
+++ b/packages/react-components/react-carousel-preview/library/src/CarouselContext.ts
@@ -0,0 +1,2 @@
+export * from './components/CarouselContext';
+export * from './components/CarouselContext.types';
diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselFooter.ts b/packages/react-components/react-carousel-preview/library/src/CarouselFooter.ts
deleted file mode 100644
index 92b20bc937eccd..00000000000000
--- a/packages/react-components/react-carousel-preview/library/src/CarouselFooter.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/CarouselFooter/index';
diff --git a/packages/react-components/react-carousel-preview/library/src/CarouselNavContainer.ts b/packages/react-components/react-carousel-preview/library/src/CarouselNavContainer.ts
new file mode 100644
index 00000000000000..df1c37cf0f5e32
--- /dev/null
+++ b/packages/react-components/react-carousel-preview/library/src/CarouselNavContainer.ts
@@ -0,0 +1 @@
+export * from './components/CarouselNavContainer/index';
diff --git a/packages/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.types.ts b/packages/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.types.ts
index 42f3d687926e5f..4e488b9c0486c1 100644
--- a/packages/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.types.ts
+++ b/packages/react-components/react-carousel-preview/library/src/components/Carousel/Carousel.types.ts
@@ -33,11 +33,24 @@ export type CarouselProps = ComponentProps & {
* Circular enables the carousel to loop back around on navigation past trailing index.
*/
circular?: boolean;
+
/**
* Controls the number of carousel cards per navigation element, will default to 'auto'
* Recommended to set to '1' when using full page carousel cards.
*/
groupSize?: number | 'auto';
+
+ /**
+ * Enables drag to scroll on carousel items.
+ * Defaults to: False
+ */
+ draggable?: boolean;
+
+ /**
+ * Adds whitespace to start/end so that 'align' prop is always respected for current index
+ * Defaults to: False
+ */
+ whitespace?: boolean;
};
/**
@@ -57,4 +70,6 @@ export type CarouselVisibilityChangeEvent = CustomEvent): CarouselState {
'use no memo';
- const { align = 'center', circular = false, onActiveIndexChange, groupSize = 'auto' } = props;
+ const {
+ align = 'center',
+ circular = false,
+ onActiveIndexChange,
+ groupSize = 'auto',
+ draggable = false,
+ whitespace = false,
+ } = props;
const { dir } = useFluent();
const { activeIndex, carouselApi, containerRef, subscribeForValues, enableAutoplay } = useEmblaCarousel({
@@ -28,6 +35,15 @@ export function useCarousel_unstable(props: CarouselProps, ref: React.Ref {
+ const foundIndex = carouselApi.scrollToElement(element, jump);
+ onActiveIndexChange?.(event, { event, type: 'focus', index: foundIndex });
+
+ return foundIndex;
});
const selectPageByIndex: CarouselContextValue['selectPageByIndex'] = useEventCallback((event, index, jump) => {
@@ -38,8 +54,9 @@ export function useCarousel_unstable(props: CarouselProps, ref: React.Ref {
const nextPageIndex = carouselApi.scrollInDirection(direction);
-
onActiveIndexChange?.(event, { event, type: 'click', index: nextPageIndex });
+
+ return nextPageIndex;
});
return {
@@ -57,10 +74,9 @@ export function useCarousel_unstable(props: CarouselProps, ref: React.Ref ({
activeIndex,
+ selectPageByElement,
selectPageByDirection,
selectPageByIndex,
subscribeForValues,
enableAutoplay,
circular,
}),
- [activeIndex, selectPageByDirection, selectPageByIndex, subscribeForValues, enableAutoplay, circular],
+ [
+ activeIndex,
+ selectPageByElement,
+ selectPageByDirection,
+ selectPageByIndex,
+ subscribeForValues,
+ enableAutoplay,
+ circular,
+ ],
);
return { carousel };
diff --git a/packages/react-components/react-carousel-preview/library/src/components/Carousel/useCarouselStyles.styles.ts b/packages/react-components/react-carousel-preview/library/src/components/Carousel/useCarouselStyles.styles.ts
index 1dea687ca67d1c..91ed9e7005b725 100644
--- a/packages/react-components/react-carousel-preview/library/src/components/Carousel/useCarouselStyles.styles.ts
+++ b/packages/react-components/react-carousel-preview/library/src/components/Carousel/useCarouselStyles.styles.ts
@@ -1,6 +1,8 @@
import { makeStyles, mergeClasses } from '@griffel/react';
import type { SlotClassNames } from '@fluentui/react-utilities';
+
import type { CarouselSlots, CarouselState } from './Carousel.types';
+import { tokens } from '@fluentui/react-theme';
export const carouselClassNames: SlotClassNames = {
root: 'fui-Carousel',
@@ -11,7 +13,10 @@ export const carouselClassNames: SlotClassNames = {
*/
const useStyles = makeStyles({
root: {
+ paddingTop: tokens.strokeWidthThick, // Leave room for focus border & overflow hidden
overflow: 'hidden',
+ overflowAnchor: 'none',
+ position: 'relative',
},
});
diff --git a/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.test.tsx b/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.test.tsx
index d19850f3ad8ab7..55794035f82a87 100644
--- a/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.test.tsx
+++ b/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.test.tsx
@@ -1,5 +1,6 @@
-import * as React from 'react';
import { render } from '@testing-library/react';
+import * as React from 'react';
+
import { isConformant } from '../../testing/isConformant';
import { CarouselAutoplayButton } from './CarouselAutoplayButton';
import { CarouselAutoplayButtonProps } from './CarouselAutoplayButton.types';
@@ -19,10 +20,32 @@ describe('CarouselAutoplayButton', () => {
},
});
- // TODO add more tests here, and create visual regression tests in /apps/vr-tests
-
it('renders a default state', () => {
const result = render(Hello world );
+
+ expect(getByText('Hello world')).toHaveAttribute('aria-pressed', 'true');
+ });
+
+ it('calls "onCheckedChange" when clicked', () => {
+ const onCheckedChange = jest.fn();
+ const { getByText } = render(
+
+ Hello world
+ ,
+ );
+
+ getByText('Hello world').click();
+
+ expect(onCheckedChange).toHaveBeenCalledTimes(1);
+ expect(onCheckedChange).toHaveBeenCalledWith(
+ expect.objectContaining({ type: 'click' }),
+ expect.objectContaining({ checked: false }),
+ );
+ });
});
diff --git a/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts b/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts
index fef00079fb6616..4f31d889b087c7 100644
--- a/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts
+++ b/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/CarouselAutoplayButton.types.ts
@@ -1,7 +1,7 @@
-import * as React from 'react';
import { ARIAButtonSlotProps } from '@fluentui/react-aria';
import { ButtonSlots, ToggleButtonProps, ToggleButtonState } from '@fluentui/react-button';
import type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';
+import * as React from 'react';
export type CarouselAutoplayButtonSlots = ButtonSlots & {
root: NonNullable>;
@@ -11,34 +11,28 @@ export type CarouselAutoplayChangeData = EventData<'click', React.MouseEvent string;
+
/**
* CarouselAutoplayButton Props
*/
export type CarouselAutoplayButtonProps = ToggleButtonProps &
ComponentProps & {
/**
- * Controls whether autoplay will initialized as true or false
- * Default: true
- */
- defaultAutoplay?: boolean;
-
- /**
- * User controlled autoplay state
+ * Override aria label property to provide state
*/
- autoplay?: boolean;
+ autoplayAriaLabel?: CarouselAutoplayAriaLabelFunction;
/**
* Callback that informs the user when internal autoplay value has changed
*/
- onAutoplayChange?: EventHandler;
+ onCheckedChange?: EventHandler;
};
/**
* State used in rendering CarouselAutoplayButton
*/
-export type CarouselAutoplayButtonState = ToggleButtonState &
- ComponentState &
- Pick;
+export type CarouselAutoplayButtonState = ToggleButtonState & ComponentState;
diff --git a/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/__snapshots__/CarouselAutoplayButton.test.tsx.snap b/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/__snapshots__/CarouselAutoplayButton.test.tsx.snap
index 8cf8f966e6adb7..fc77b4806ac0d3 100644
--- a/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/__snapshots__/CarouselAutoplayButton.test.tsx.snap
+++ b/packages/react-components/react-carousel-preview/library/src/components/CarouselAutoplayButton/__snapshots__/CarouselAutoplayButton.test.tsx.snap
@@ -3,7 +3,7 @@
exports[`CarouselAutoplayButton renders a default state 1`] = `