diff --git a/change/@fluentui-chart-web-components-bb1b0527-799b-4646-8872-14e1fd3966e3.json b/change/@fluentui-chart-web-components-bb1b0527-799b-4646-8872-14e1fd3966e3.json deleted file mode 100644 index ae07c6fd98c88e..00000000000000 --- a/change/@fluentui-chart-web-components-bb1b0527-799b-4646-8872-14e1fd3966e3.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "chore: upgrade to storybook 9", - "packageName": "@fluentui/chart-web-components", - "email": "dmytrokirpa@microsoft.com", - "dependentChangeType": "none" -} diff --git a/change/@fluentui-react-charting-99df84c1-d269-31c1-4d11-33w9pp1ry3l.json b/change/@fluentui-react-charting-99df84c1-d269-31c1-4d11-33w9pp1ry3l.json new file mode 100644 index 00000000000000..143e4c70e6a77b --- /dev/null +++ b/change/@fluentui-react-charting-99df84c1-d269-31c1-4d11-33w9pp1ry3l.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat(react-charting): Add prop to regulate removal of default annotation styling", + "packageName": "@fluentui/react-charting", + "email": "120183316+srmukher@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-web-components-1c227a93-f7e4-4902-a58c-cbe54cc6cd98.json b/change/@fluentui-web-components-1c227a93-f7e4-4902-a58c-cbe54cc6cd98.json deleted file mode 100644 index b1bd23056a1b46..00000000000000 --- a/change/@fluentui-web-components-1c227a93-f7e4-4902-a58c-cbe54cc6cd98.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "prerelease", - "comment": "chore: upgrade to storybook 9", - "packageName": "@fluentui/web-components", - "email": "dmytrokirpa@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/packages/charts/chart-web-components/CHANGELOG.json b/packages/charts/chart-web-components/CHANGELOG.json index 78d8b8cda4180a..71c9e12b81612e 100644 --- a/packages/charts/chart-web-components/CHANGELOG.json +++ b/packages/charts/chart-web-components/CHANGELOG.json @@ -1,6 +1,29 @@ { "name": "@fluentui/chart-web-components", "entries": [ + { + "date": "Wed, 14 Jan 2026 04:07:26 GMT", + "tag": "@fluentui/chart-web-components_v0.0.61", + "version": "0.0.61", + "comments": { + "none": [ + { + "author": "dmytrokirpa@microsoft.com", + "package": "@fluentui/chart-web-components", + "commit": "a5b354084d7de7c0c0567b96624590ba513f6d4c", + "comment": "chore: upgrade to storybook 9" + } + ], + "patch": [ + { + "author": "beachball", + "package": "@fluentui/chart-web-components", + "comment": "Bump @fluentui/web-components to v3.0.0-rc.3", + "commit": "a5b354084d7de7c0c0567b96624590ba513f6d4c" + } + ] + } + }, { "date": "Mon, 12 Jan 2026 04:07:48 GMT", "tag": "@fluentui/chart-web-components_v0.0.60", diff --git a/packages/charts/chart-web-components/CHANGELOG.md b/packages/charts/chart-web-components/CHANGELOG.md index 6b4595110ee894..86b0fc881f0688 100644 --- a/packages/charts/chart-web-components/CHANGELOG.md +++ b/packages/charts/chart-web-components/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/chart-web-components -This log was last generated on Mon, 12 Jan 2026 04:07:48 GMT and should not be manually modified. +This log was last generated on Wed, 14 Jan 2026 04:07:26 GMT and should not be manually modified. +## [0.0.61](https://github.com/microsoft/fluentui/tree/@fluentui/chart-web-components_v0.0.61) + +Wed, 14 Jan 2026 04:07:26 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/chart-web-components_v0.0.60..@fluentui/chart-web-components_v0.0.61) + +### Patches + +- Bump @fluentui/web-components to v3.0.0-rc.3 ([PR #35459](https://github.com/microsoft/fluentui/pull/35459) by beachball) + ## [0.0.60](https://github.com/microsoft/fluentui/tree/@fluentui/chart-web-components_v0.0.60) Mon, 12 Jan 2026 04:07:48 GMT diff --git a/packages/charts/chart-web-components/package.json b/packages/charts/chart-web-components/package.json index a7819ff3bdfddb..5dac43e0e0cf93 100644 --- a/packages/charts/chart-web-components/package.json +++ b/packages/charts/chart-web-components/package.json @@ -1,7 +1,7 @@ { "name": "@fluentui/chart-web-components", "description": "A library of Fluent Chart Web Components", - "version": "0.0.60", + "version": "0.0.61", "author": { "name": "Microsoft" }, @@ -70,7 +70,7 @@ "dependencies": { "@microsoft/fast-web-utilities": "^6.0.0", "@fluentui/tokens": "^1.0.0-alpha.22", - "@fluentui/web-components": "^3.0.0-rc.2", + "@fluentui/web-components": "^3.0.0-rc.3", "@types/d3-selection": "^3.0.0", "@types/d3-shape": "^3.0.0", "d3-selection": "^3.0.0", diff --git a/packages/charts/react-charting/src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx b/packages/charts/react-charting/src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx index af9ac4de6c4e38..010a78c86e4e08 100644 --- a/packages/charts/react-charting/src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx +++ b/packages/charts/react-charting/src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx @@ -217,7 +217,12 @@ export const AnnotationOnlyChart: React.FC = props => )}
{hasAnnotations ? ( - + ) : null}
diff --git a/packages/charts/react-charting/src/components/AnnotationOnlyChart/__snapshots__/AnnotationOnlyChart.test.tsx.snap b/packages/charts/react-charting/src/components/AnnotationOnlyChart/__snapshots__/AnnotationOnlyChart.test.tsx.snap index 6ac48e8d42a88a..6205941bd9be0b 100644 --- a/packages/charts/react-charting/src/components/AnnotationOnlyChart/__snapshots__/AnnotationOnlyChart.test.tsx.snap +++ b/packages/charts/react-charting/src/components/AnnotationOnlyChart/__snapshots__/AnnotationOnlyChart.test.tsx.snap @@ -118,10 +118,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = ` -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; align-items: center; - background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; - border: 1px solid #edebe9; - box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108); color: #323130; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; @@ -178,10 +175,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = ` -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; align-items: center; - background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; - border: 1px solid #edebe9; - box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108); color: #323130; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; @@ -228,10 +222,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = ` -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; align-items: center; - background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; - border: 1px solid #edebe9; - box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108); color: #323130; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; @@ -278,10 +269,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with all props 1`] = ` -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; align-items: center; - background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; - border: 1px solid #edebe9; - box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108); color: #323130; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; @@ -430,10 +418,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] = -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; align-items: center; - background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; - border: 1px solid #edebe9; - box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108); color: #323130; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; @@ -490,10 +475,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] = -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; align-items: center; - background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; - border: 1px solid #edebe9; - box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108); color: #323130; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; @@ -540,10 +522,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] = -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; align-items: center; - background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; - border: 1px solid #edebe9; - box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108); color: #323130; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; @@ -590,10 +569,7 @@ exports[`AnnotationOnlyChart Snapshots matches snapshot with default props 1`] = -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; align-items: center; - background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; - border: 1px solid #edebe9; - box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108); color: #323130; display: flex; font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; diff --git a/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts b/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts index 57390e9bbec4e9..93cf8253353954 100644 --- a/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts +++ b/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.styles.ts @@ -11,6 +11,7 @@ import { ChartAnnotationArrowHead } from '../../../types/IChartAnnotation'; export interface IChartAnnotationLayerStyles { root?: IStyle; annotation?: IStyle; + annotationNoDefaults?: IStyle; connectorLayer?: IStyle; measurement?: IStyle; annotationContent?: IStyle; @@ -79,12 +80,28 @@ export const getStyles: IStyleFunctionOrObject = React.memo(props => { - const { annotations: annotationsProp, theme, context, className } = props; + const { annotations: annotationsProp, theme, context, className, hideDefaultStyles } = props; const classNames = getClassNames(getStyles, { theme, className }); const idPrefix = React.useMemo(() => getId('chart-annotation'), []); @@ -439,9 +439,16 @@ export const ChartAnnotationLayer: React.FC = React. const containerStyle: React.CSSProperties = { maxWidth: layout?.maxWidth, - ...(hasCustomBackground && { - backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity), - }), + ...(hasCustomBackground + ? { + backgroundColor: applyOpacityToColor(baseBackgroundColor, backgroundOpacity), + } + : !hideDefaultStyles && { + backgroundColor: applyOpacityToColor( + theme.semanticColors.bodyBackground, + DEFAULT_ANNOTATION_BACKGROUND_OPACITY, + ), + }), borderColor: annotation.style?.borderColor, borderWidth: annotation.style?.borderWidth, borderStyle: annotation.style?.borderStyle ?? (annotation.style?.borderColor ? 'solid' : undefined), @@ -542,6 +549,8 @@ export const ChartAnnotationLayer: React.FC = React. ...containerStyle, }; + const annotationClass = hideDefaultStyles ? classNames.annotationNoDefaults : classNames.annotation; + if (!isMeasurementValid) { measurementElements.push(
= React. } } }} - className={css(classNames.annotation, classNames.measurement, layout?.className, annotation.style?.className)} + className={css(annotationClass, classNames.measurement, layout?.className, annotation.style?.className)} style={measurementStyle} aria-hidden={true} data-annotation-key={key} @@ -581,7 +590,7 @@ export const ChartAnnotationLayer: React.FC = React. data-annotation-key={key} >
diff --git a/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts b/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts index b4e1a8bcc1c2e1..b76393cca0ae1b 100644 --- a/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts +++ b/packages/charts/react-charting/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts @@ -36,6 +36,11 @@ export interface IChartAnnotationLayerProps { context: IChartAnnotationContext; theme: ITheme; className?: string; + /** + * When true, removes default border, shadow, and background styling from annotations. + * @default false + */ + hideDefaultStyles?: boolean; } export interface IResolvedAnnotationPosition { diff --git a/packages/web-components/CHANGELOG.json b/packages/web-components/CHANGELOG.json index 389c765d89192a..ef1a1b4de433eb 100644 --- a/packages/web-components/CHANGELOG.json +++ b/packages/web-components/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@fluentui/web-components", "entries": [ + { + "date": "Wed, 14 Jan 2026 04:07:26 GMT", + "tag": "@fluentui/web-components_v3.0.0-rc.3", + "version": "3.0.0-rc.3", + "comments": { + "prerelease": [ + { + "author": "dmytrokirpa@microsoft.com", + "package": "@fluentui/web-components", + "commit": "a5b354084d7de7c0c0567b96624590ba513f6d4c", + "comment": "chore: upgrade to storybook 9" + } + ] + } + }, { "date": "Mon, 12 Jan 2026 04:07:48 GMT", "tag": "@fluentui/web-components_v3.0.0-rc.2", diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md index c5c21d83622d89..fcc891421ce248 100644 --- a/packages/web-components/CHANGELOG.md +++ b/packages/web-components/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @fluentui/web-components -This log was last generated on Mon, 12 Jan 2026 04:07:48 GMT and should not be manually modified. +This log was last generated on Wed, 14 Jan 2026 04:07:26 GMT and should not be manually modified. +## [3.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.3) + +Wed, 14 Jan 2026 04:07:26 GMT +[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-rc.2..@fluentui/web-components_v3.0.0-rc.3) + +### Changes + +- chore: upgrade to storybook 9 ([PR #35459](https://github.com/microsoft/fluentui/pull/35459) by dmytrokirpa@microsoft.com) + ## [3.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-rc.2) Mon, 12 Jan 2026 04:07:48 GMT diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 15647347fe8513..d4c38df3a9a8b5 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -1,7 +1,7 @@ { "name": "@fluentui/web-components", "description": "A library of Fluent Web Components", - "version": "3.0.0-rc.2", + "version": "3.0.0-rc.3", "author": { "name": "Microsoft", "url": "https://discord.gg/FcSNfg4"