From 772c4dfb48bf4e8f2448be254db4c9c3fca79935 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Wed, 18 Oct 2023 19:39:24 +0000 Subject: [PATCH 1/5] moving react-infolabel to stable --- .github/CODEOWNERS | 2 +- apps/public-docsite-v9/package.json | 3 +- .../etc/react-components.api.md | 24 +++++++++++ .../react-components/package.json | 3 +- .../react-components/src/index.ts | 9 ++++ .../InfoLabel/InfoLabelInField.stories.tsx | 43 ------------------- .../.babelrc.json | 0 .../.eslintrc.json | 0 .../.npmignore | 0 .../.storybook/main.js | 0 .../.storybook/preview.js | 0 .../.storybook/tsconfig.json | 0 .../.swcrc | 0 .../CHANGELOG.json | 0 .../CHANGELOG.md | 0 .../LICENSE | 0 .../README.md | 2 +- .../config/api-extractor.json | 0 .../config/tests.js | 0 .../docs/Spec.md | 0 .../etc/react-infolabel.api.md} | 12 +++--- .../jest.config.js | 2 +- .../just.config.ts | 0 .../package.json | 4 +- .../project.json | 4 +- .../src/InfoButton.ts | 0 .../src/InfoLabel.ts | 0 .../InfoButton/DefaultInfoButtonIcons.tsx | 0 .../components/InfoButton/InfoButton.test.tsx | 0 .../src/components/InfoButton/InfoButton.tsx | 0 .../components/InfoButton/InfoButton.types.ts | 0 .../src/components/InfoButton/index.ts | 0 .../InfoButton/renderInfoButton.tsx | 0 .../components/InfoButton/useInfoButton.tsx | 0 .../InfoButton/useInfoButtonStyles.styles.ts | 0 .../src/components/InfoLabel/InfoLabel.cy.tsx | 2 +- .../components/InfoLabel/InfoLabel.test.tsx | 0 .../src/components/InfoLabel/InfoLabel.tsx | 0 .../components/InfoLabel/InfoLabel.types.ts | 0 .../src/components/InfoLabel/index.ts | 0 .../components/InfoLabel/renderInfoLabel.tsx | 0 .../src/components/InfoLabel/useInfoLabel.ts | 0 .../InfoLabel/useInfoLabelStyles.styles.ts | 0 .../src/index.ts | 0 .../src/testing/isConformant.ts | 0 .../InfoLabel/InfoLabelBestPractices.md | 0 .../InfoLabel/InfoLabelDefault.stories.tsx | 3 +- .../stories/InfoLabel/InfoLabelDescription.md | 0 .../InfoLabel/InfoLabelInField.stories.tsx | 30 +++++++++++++ .../InfoLabel/InfoLabelPatternDecision.md | 0 .../InfoLabel/InfoLabelRequired.stories.tsx | 2 +- .../InfoLabel/InfoLabelSize.stories.tsx | 3 +- .../stories/InfoLabel/index.stories.tsx | 4 +- .../tsconfig.json | 0 .../tsconfig.lib.json | 0 .../tsconfig.spec.json | 0 tsconfig.base.all.json | 4 +- tsconfig.base.json | 2 +- 58 files changed, 87 insertions(+), 71 deletions(-) delete mode 100644 packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelInField.stories.tsx rename packages/react-components/{react-infolabel-preview => react-infolabel}/.babelrc.json (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/.eslintrc.json (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/.npmignore (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/.storybook/main.js (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/.storybook/preview.js (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/.storybook/tsconfig.json (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/.swcrc (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/CHANGELOG.json (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/CHANGELOG.md (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/LICENSE (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/README.md (87%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/config/api-extractor.json (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/config/tests.js (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/docs/Spec.md (100%) rename packages/react-components/{react-infolabel-preview/etc/react-infolabel-preview.api.md => react-infolabel/etc/react-infolabel.api.md} (86%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/jest.config.js (91%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/just.config.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/package.json (96%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/project.json (58%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/InfoButton.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/InfoLabel.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoButton/DefaultInfoButtonIcons.tsx (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoButton/InfoButton.test.tsx (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoButton/InfoButton.tsx (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoButton/InfoButton.types.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoButton/index.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoButton/renderInfoButton.tsx (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoButton/useInfoButton.tsx (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoButton/useInfoButtonStyles.styles.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoLabel/InfoLabel.cy.tsx (97%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoLabel/InfoLabel.test.tsx (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoLabel/InfoLabel.tsx (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoLabel/InfoLabel.types.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoLabel/index.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoLabel/renderInfoLabel.tsx (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoLabel/useInfoLabel.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/components/InfoLabel/useInfoLabelStyles.styles.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/index.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/src/testing/isConformant.ts (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/stories/InfoLabel/InfoLabelBestPractices.md (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/stories/InfoLabel/InfoLabelDefault.stories.tsx (70%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/stories/InfoLabel/InfoLabelDescription.md (100%) create mode 100644 packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelInField.stories.tsx rename packages/react-components/{react-infolabel-preview => react-infolabel}/stories/InfoLabel/InfoLabelPatternDecision.md (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/stories/InfoLabel/InfoLabelRequired.stories.tsx (83%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/stories/InfoLabel/InfoLabelSize.stories.tsx (86%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/stories/InfoLabel/index.stories.tsx (84%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/tsconfig.json (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/tsconfig.lib.json (100%) rename packages/react-components/{react-infolabel-preview => react-infolabel}/tsconfig.spec.json (100%) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 6f50359bcd9fe..f2d8c9f86290e 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -249,7 +249,7 @@ packages/react-components/react-timepicker-compat-preview @microsoft/teams-prg packages/react-components/react-rating-preview @microsoft/cxe-red @tomi-msft packages/react-components/react-swatch-picker-preview @microsoft/cxe-prg packages/react-components/react-calendar-compat @microsoft/cxe-red @sopranopillow -packages/react-components/react-infolabel-preview @microsoft/cxe-red @sopranopillow +packages/react-components/react-infolabel @microsoft/cxe-red @sopranopillow # <%= NX-CODEOWNER-PLACEHOLDER %> ## Components diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index 6941dfc8843b1..84b1d46fc91ba 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -42,7 +42,6 @@ "react": "17.0.2", "react-dom": "17.0.2", "react-window": "^1.8.6", - "tslib": "^2.1.0", - "@fluentui/react-infolabel-preview": "*" + "tslib": "^2.1.0" } } diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md index 64060c0bae77e..dd086ad8ea043 100644 --- a/packages/react-components/react-components/etc/react-components.api.md +++ b/packages/react-components/react-components/etc/react-components.api.md @@ -314,6 +314,11 @@ import { imageClassNames } from '@fluentui/react-image'; import { ImageProps } from '@fluentui/react-image'; import { ImageSlots } from '@fluentui/react-image'; import { ImageState } from '@fluentui/react-image'; +import { InfoLabel } from '@fluentui/react-infolabel'; +import { infoLabelClassNames } from '@fluentui/react-infolabel'; +import { InfoLabelProps } from '@fluentui/react-infolabel'; +import { InfoLabelSlots } from '@fluentui/react-infolabel'; +import { InfoLabelState } from '@fluentui/react-infolabel'; import { Input } from '@fluentui/react-input'; import { inputClassNames } from '@fluentui/react-input'; import { InputOnChangeData } from '@fluentui/react-input'; @@ -594,6 +599,7 @@ import { renderField_unstable } from '@fluentui/react-field'; import { renderFlatTree_unstable } from '@fluentui/react-tree'; import { renderFluentProvider_unstable } from '@fluentui/react-provider'; import { renderImage_unstable } from '@fluentui/react-image'; +import { renderInfoLabel_unstable } from '@fluentui/react-infolabel'; import { renderInput_unstable } from '@fluentui/react-input'; import { renderInteractionTag_unstable } from '@fluentui/react-tags'; import { renderInteractionTagPrimary_unstable } from '@fluentui/react-tags'; @@ -1087,6 +1093,8 @@ import { useHeadlessFlatTree_unstable } from '@fluentui/react-tree'; import { useId } from '@fluentui/react-utilities'; import { useImage_unstable } from '@fluentui/react-image'; import { useImageStyles_unstable } from '@fluentui/react-image'; +import { useInfoLabel_unstable } from '@fluentui/react-infolabel'; +import { useInfoLabelStyles_unstable } from '@fluentui/react-infolabel'; import { useInput_unstable } from '@fluentui/react-input'; import { useInputStyles_unstable } from '@fluentui/react-input'; import { useInteractionTag_unstable } from '@fluentui/react-tags'; @@ -1915,6 +1923,16 @@ export { ImageSlots } export { ImageState } +export { InfoLabel } + +export { infoLabelClassNames } + +export { InfoLabelProps } + +export { InfoLabelSlots } + +export { InfoLabelState } + export { Input } export { inputClassNames } @@ -2475,6 +2493,8 @@ export { renderFluentProvider_unstable } export { renderImage_unstable } +export { renderInfoLabel_unstable } + export { renderInput_unstable } export { renderInteractionTag_unstable } @@ -3461,6 +3481,10 @@ export { useImage_unstable } export { useImageStyles_unstable } +export { useInfoLabel_unstable } + +export { useInfoLabelStyles_unstable } + export { useInput_unstable } export { useInputStyles_unstable } diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json index 54086736ac820..adc524d0da54b 100644 --- a/packages/react-components/react-components/package.json +++ b/packages/react-components/react-components/package.json @@ -79,7 +79,8 @@ "@fluentui/react-tree": "^9.4.6", "@griffel/react": "^1.5.14", "@swc/helpers": "^0.5.1", - "@fluentui/react-message-bar": "^9.0.1" + "@fluentui/react-message-bar": "^9.0.1", + "@fluentui/react-infolabel": "9.0.0-alpha.0" }, "peerDependencies": { "@types/react": ">=16.14.0 <19.0.0", diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index 7bd69278ad1c8..4f9b3f0c5babd 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -1414,3 +1414,12 @@ export type { MessageBarGroupSlots, MessageBarGroupState, } from '@fluentui/react-message-bar'; + +export { + InfoLabel, + infoLabelClassNames, + renderInfoLabel_unstable, + useInfoLabelStyles_unstable, + useInfoLabel_unstable, +} from '@fluentui/react-infolabel'; +export type { InfoLabelProps, InfoLabelSlots, InfoLabelState } from '@fluentui/react-infolabel'; diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelInField.stories.tsx b/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelInField.stories.tsx deleted file mode 100644 index 5e7a5f310a129..0000000000000 --- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelInField.stories.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; - -import { Field, Input, LabelProps, makeStyles } from '@fluentui/react-components'; -import { InfoLabel } from '@fluentui/react-infolabel-preview'; - -const useStyles = makeStyles({ - infoLabelSurface: { - // Since we render the Popover inline and Input uses position: relative, we need to set a zIndex. If we don't, - // the Popover surface will render behind the input. See #27891 for more details. - zIndex: 1, - }, -}); - -export const InField = () => { - const styles = useStyles(); - - return ( - ( - - Field with info label - - ), - }} - > - - - ); -}; - -InField.storyName = 'In a Field'; -InField.parameters = { - docs: { - description: { - story: - 'An `InfoLabel` can be used in a `Field` by rendering the label prop as an InfoLabel. This uses the slot ' + - '[render function]' + - '(./?path=/docs/concepts-developer-customizing-components-with-slots--page#replacing-the-entire-slot) ' + - 'support. See the code from this story for an example.', - }, - }, -}; diff --git a/packages/react-components/react-infolabel-preview/.babelrc.json b/packages/react-components/react-infolabel/.babelrc.json similarity index 100% rename from packages/react-components/react-infolabel-preview/.babelrc.json rename to packages/react-components/react-infolabel/.babelrc.json diff --git a/packages/react-components/react-infolabel-preview/.eslintrc.json b/packages/react-components/react-infolabel/.eslintrc.json similarity index 100% rename from packages/react-components/react-infolabel-preview/.eslintrc.json rename to packages/react-components/react-infolabel/.eslintrc.json diff --git a/packages/react-components/react-infolabel-preview/.npmignore b/packages/react-components/react-infolabel/.npmignore similarity index 100% rename from packages/react-components/react-infolabel-preview/.npmignore rename to packages/react-components/react-infolabel/.npmignore diff --git a/packages/react-components/react-infolabel-preview/.storybook/main.js b/packages/react-components/react-infolabel/.storybook/main.js similarity index 100% rename from packages/react-components/react-infolabel-preview/.storybook/main.js rename to packages/react-components/react-infolabel/.storybook/main.js diff --git a/packages/react-components/react-infolabel-preview/.storybook/preview.js b/packages/react-components/react-infolabel/.storybook/preview.js similarity index 100% rename from packages/react-components/react-infolabel-preview/.storybook/preview.js rename to packages/react-components/react-infolabel/.storybook/preview.js diff --git a/packages/react-components/react-infolabel-preview/.storybook/tsconfig.json b/packages/react-components/react-infolabel/.storybook/tsconfig.json similarity index 100% rename from packages/react-components/react-infolabel-preview/.storybook/tsconfig.json rename to packages/react-components/react-infolabel/.storybook/tsconfig.json diff --git a/packages/react-components/react-infolabel-preview/.swcrc b/packages/react-components/react-infolabel/.swcrc similarity index 100% rename from packages/react-components/react-infolabel-preview/.swcrc rename to packages/react-components/react-infolabel/.swcrc diff --git a/packages/react-components/react-infolabel-preview/CHANGELOG.json b/packages/react-components/react-infolabel/CHANGELOG.json similarity index 100% rename from packages/react-components/react-infolabel-preview/CHANGELOG.json rename to packages/react-components/react-infolabel/CHANGELOG.json diff --git a/packages/react-components/react-infolabel-preview/CHANGELOG.md b/packages/react-components/react-infolabel/CHANGELOG.md similarity index 100% rename from packages/react-components/react-infolabel-preview/CHANGELOG.md rename to packages/react-components/react-infolabel/CHANGELOG.md diff --git a/packages/react-components/react-infolabel-preview/LICENSE b/packages/react-components/react-infolabel/LICENSE similarity index 100% rename from packages/react-components/react-infolabel-preview/LICENSE rename to packages/react-components/react-infolabel/LICENSE diff --git a/packages/react-components/react-infolabel-preview/README.md b/packages/react-components/react-infolabel/README.md similarity index 87% rename from packages/react-components/react-infolabel-preview/README.md rename to packages/react-components/react-infolabel/README.md index 4e67e5261d2e7..cb7140cef9b52 100644 --- a/packages/react-components/react-infolabel-preview/README.md +++ b/packages/react-components/react-infolabel/README.md @@ -1,4 +1,4 @@ -# @fluentui/react-infolabel-preview +# @fluentui/react-infolabel **React Infolabel components for [Fluent UI React](https://react.fluentui.dev/)** diff --git a/packages/react-components/react-infolabel-preview/config/api-extractor.json b/packages/react-components/react-infolabel/config/api-extractor.json similarity index 100% rename from packages/react-components/react-infolabel-preview/config/api-extractor.json rename to packages/react-components/react-infolabel/config/api-extractor.json diff --git a/packages/react-components/react-infolabel-preview/config/tests.js b/packages/react-components/react-infolabel/config/tests.js similarity index 100% rename from packages/react-components/react-infolabel-preview/config/tests.js rename to packages/react-components/react-infolabel/config/tests.js diff --git a/packages/react-components/react-infolabel-preview/docs/Spec.md b/packages/react-components/react-infolabel/docs/Spec.md similarity index 100% rename from packages/react-components/react-infolabel-preview/docs/Spec.md rename to packages/react-components/react-infolabel/docs/Spec.md diff --git a/packages/react-components/react-infolabel-preview/etc/react-infolabel-preview.api.md b/packages/react-components/react-infolabel/etc/react-infolabel.api.md similarity index 86% rename from packages/react-components/react-infolabel-preview/etc/react-infolabel-preview.api.md rename to packages/react-components/react-infolabel/etc/react-infolabel.api.md index 35532d3b1aca2..a4f9dc64ffcd5 100644 --- a/packages/react-components/react-infolabel-preview/etc/react-infolabel-preview.api.md +++ b/packages/react-components/react-infolabel/etc/react-infolabel.api.md @@ -1,9 +1,8 @@ -## API Report File for "@fluentui/react-infolabel-preview" +## API Report File for "@fluentui/react-infolabel" > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). ```ts - /// import type { ComponentProps } from '@fluentui/react-utilities'; @@ -24,14 +23,14 @@ export const infoLabelClassNames: SlotClassNames; // @public export type InfoLabelProps = ComponentProps, 'label'> & { - info?: InfoButtonProps['info']; + info?: InfoButtonProps['info']; }; // @public (undocumented) export type InfoLabelSlots = { - root: NonNullable>; - label: NonNullable>; - infoButton: Slot; + root: NonNullable>; + label: NonNullable>; + infoButton: Slot; }; // @public @@ -47,5 +46,4 @@ export const useInfoLabel_unstable: (props: InfoLabelProps, ref: React_2.Ref InfoLabelState; // (No @packageDocumentation comment for this package) - ``` diff --git a/packages/react-components/react-infolabel-preview/jest.config.js b/packages/react-components/react-infolabel/jest.config.js similarity index 91% rename from packages/react-components/react-infolabel-preview/jest.config.js rename to packages/react-components/react-infolabel/jest.config.js index 73c3e2678f83c..3e2234c8dc5c0 100644 --- a/packages/react-components/react-infolabel-preview/jest.config.js +++ b/packages/react-components/react-infolabel/jest.config.js @@ -4,7 +4,7 @@ * @type {import('@jest/types').Config.InitialOptions} */ module.exports = { - displayName: 'react-infolabel-preview', + displayName: 'react-infolabel', preset: '../../../jest.preset.js', transform: { '^.+\\.tsx?$': [ diff --git a/packages/react-components/react-infolabel-preview/just.config.ts b/packages/react-components/react-infolabel/just.config.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/just.config.ts rename to packages/react-components/react-infolabel/just.config.ts diff --git a/packages/react-components/react-infolabel-preview/package.json b/packages/react-components/react-infolabel/package.json similarity index 96% rename from packages/react-components/react-infolabel-preview/package.json rename to packages/react-components/react-infolabel/package.json index 74b8deea2b214..4acee78124296 100644 --- a/packages/react-components/react-infolabel-preview/package.json +++ b/packages/react-components/react-infolabel/package.json @@ -1,6 +1,6 @@ { - "name": "@fluentui/react-infolabel-preview", - "version": "0.1.0", + "name": "@fluentui/react-infolabel", + "version": "9.0.0-alpha.0", "description": "InfoLabel component for Fluent UI v9", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-components/react-infolabel-preview/project.json b/packages/react-components/react-infolabel/project.json similarity index 58% rename from packages/react-components/react-infolabel-preview/project.json rename to packages/react-components/react-infolabel/project.json index 86d54995e87f3..84be00e68e4d5 100644 --- a/packages/react-components/react-infolabel-preview/project.json +++ b/packages/react-components/react-infolabel/project.json @@ -1,8 +1,8 @@ { - "name": "@fluentui/react-infolabel-preview", + "name": "@fluentui/react-infolabel", "$schema": "../../../node_modules/nx/schemas/project-schema.json", "projectType": "library", - "sourceRoot": "packages/react-components/react-infolabel-preview/src", + "sourceRoot": "packages/react-components/react-infolabel/src", "tags": ["platform:web", "vNext"], "implicitDependencies": [] } diff --git a/packages/react-components/react-infolabel-preview/src/InfoButton.ts b/packages/react-components/react-infolabel/src/InfoButton.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/src/InfoButton.ts rename to packages/react-components/react-infolabel/src/InfoButton.ts diff --git a/packages/react-components/react-infolabel-preview/src/InfoLabel.ts b/packages/react-components/react-infolabel/src/InfoLabel.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/src/InfoLabel.ts rename to packages/react-components/react-infolabel/src/InfoLabel.ts diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/DefaultInfoButtonIcons.tsx b/packages/react-components/react-infolabel/src/components/InfoButton/DefaultInfoButtonIcons.tsx similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/DefaultInfoButtonIcons.tsx rename to packages/react-components/react-infolabel/src/components/InfoButton/DefaultInfoButtonIcons.tsx diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.test.tsx b/packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.test.tsx similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.test.tsx rename to packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.test.tsx diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.tsx b/packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.tsx similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.tsx rename to packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.tsx diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.types.ts b/packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.types.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/InfoButton.types.ts rename to packages/react-components/react-infolabel/src/components/InfoButton/InfoButton.types.ts diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/index.ts b/packages/react-components/react-infolabel/src/components/InfoButton/index.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/index.ts rename to packages/react-components/react-infolabel/src/components/InfoButton/index.ts diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/renderInfoButton.tsx b/packages/react-components/react-infolabel/src/components/InfoButton/renderInfoButton.tsx similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/renderInfoButton.tsx rename to packages/react-components/react-infolabel/src/components/InfoButton/renderInfoButton.tsx diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/react-infolabel/src/components/InfoButton/useInfoButton.tsx similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/useInfoButton.tsx rename to packages/react-components/react-infolabel/src/components/InfoButton/useInfoButton.tsx diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoButton/useInfoButtonStyles.styles.ts b/packages/react-components/react-infolabel/src/components/InfoButton/useInfoButtonStyles.styles.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoButton/useInfoButtonStyles.styles.ts rename to packages/react-components/react-infolabel/src/components/InfoButton/useInfoButtonStyles.styles.ts diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.cy.tsx b/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.cy.tsx similarity index 97% rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.cy.tsx rename to packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.cy.tsx index 7b419e4c717b6..684a82a9aa1c5 100644 --- a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.cy.tsx +++ b/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.cy.tsx @@ -4,7 +4,7 @@ import * as React from 'react'; import { mount as mountBase } from '@cypress/react'; import { FluentProvider } from '@fluentui/react-provider'; import { teamsLightTheme } from '@fluentui/react-theme'; -import { InfoLabel } from '@fluentui/react-infolabel-preview'; +import { InfoLabel } from '@fluentui/react-infolabel'; const mount = (element: JSX.Element) => { mountBase({element}); diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.test.tsx b/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.test.tsx similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.test.tsx rename to packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.test.tsx diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.tsx b/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.tsx rename to packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.tsx diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.types.ts b/packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.types.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/InfoLabel.types.ts rename to packages/react-components/react-infolabel/src/components/InfoLabel/InfoLabel.types.ts diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/index.ts b/packages/react-components/react-infolabel/src/components/InfoLabel/index.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/index.ts rename to packages/react-components/react-infolabel/src/components/InfoLabel/index.ts diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/renderInfoLabel.tsx b/packages/react-components/react-infolabel/src/components/InfoLabel/renderInfoLabel.tsx similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/renderInfoLabel.tsx rename to packages/react-components/react-infolabel/src/components/InfoLabel/renderInfoLabel.tsx diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/useInfoLabel.ts b/packages/react-components/react-infolabel/src/components/InfoLabel/useInfoLabel.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/useInfoLabel.ts rename to packages/react-components/react-infolabel/src/components/InfoLabel/useInfoLabel.ts diff --git a/packages/react-components/react-infolabel-preview/src/components/InfoLabel/useInfoLabelStyles.styles.ts b/packages/react-components/react-infolabel/src/components/InfoLabel/useInfoLabelStyles.styles.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/src/components/InfoLabel/useInfoLabelStyles.styles.ts rename to packages/react-components/react-infolabel/src/components/InfoLabel/useInfoLabelStyles.styles.ts diff --git a/packages/react-components/react-infolabel-preview/src/index.ts b/packages/react-components/react-infolabel/src/index.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/src/index.ts rename to packages/react-components/react-infolabel/src/index.ts diff --git a/packages/react-components/react-infolabel-preview/src/testing/isConformant.ts b/packages/react-components/react-infolabel/src/testing/isConformant.ts similarity index 100% rename from packages/react-components/react-infolabel-preview/src/testing/isConformant.ts rename to packages/react-components/react-infolabel/src/testing/isConformant.ts diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelBestPractices.md b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelBestPractices.md similarity index 100% rename from packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelBestPractices.md rename to packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelBestPractices.md diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelDefault.stories.tsx b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelDefault.stories.tsx similarity index 70% rename from packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelDefault.stories.tsx rename to packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelDefault.stories.tsx index 5e4e2aaafe29d..b35a9e04363ba 100644 --- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelDefault.stories.tsx +++ b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelDefault.stories.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { Link } from '@fluentui/react-components'; -import { InfoLabel, InfoLabelProps } from '@fluentui/react-infolabel-preview'; +import { InfoLabel, InfoLabelProps, Link } from '@fluentui/react-components'; export const Default = (props: Partial) => ( ( + ( + + Field with info label + + ), + }} + > + + +); + +InField.storyName = 'In a Field'; +InField.parameters = { + docs: { + description: { + story: + 'An `InfoLabel` can be used in a `Field` by rendering the label prop as an InfoLabel. This uses the slot ' + + '[render function]' + + '(./?path=/docs/concepts-developer-customizing-components-with-slots--page#replacing-the-entire-slot) ' + + 'support. See the code from this story for an example.', + }, + }, +}; diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelPatternDecision.md b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelPatternDecision.md similarity index 100% rename from packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelPatternDecision.md rename to packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelPatternDecision.md diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelRequired.stories.tsx b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelRequired.stories.tsx similarity index 83% rename from packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelRequired.stories.tsx rename to packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelRequired.stories.tsx index e2038a81bf143..fcd5eec52df45 100644 --- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelRequired.stories.tsx +++ b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelRequired.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { InfoLabel } from '@fluentui/react-infolabel-preview'; +import { InfoLabel } from '@fluentui/react-components'; export const Required = () => ( diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelSize.stories.tsx b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelSize.stories.tsx similarity index 86% rename from packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelSize.stories.tsx rename to packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelSize.stories.tsx index 61710edb66914..e3b26aeaab408 100644 --- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/InfoLabelSize.stories.tsx +++ b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelSize.stories.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { makeStyles, tokens } from '@fluentui/react-components'; -import { InfoLabel } from '@fluentui/react-infolabel-preview'; +import { InfoLabel, makeStyles, tokens } from '@fluentui/react-components'; const useStyles = makeStyles({ container: { diff --git a/packages/react-components/react-infolabel-preview/stories/InfoLabel/index.stories.tsx b/packages/react-components/react-infolabel/stories/InfoLabel/index.stories.tsx similarity index 84% rename from packages/react-components/react-infolabel-preview/stories/InfoLabel/index.stories.tsx rename to packages/react-components/react-infolabel/stories/InfoLabel/index.stories.tsx index 5f883e28e12a0..1426287e4208b 100644 --- a/packages/react-components/react-infolabel-preview/stories/InfoLabel/index.stories.tsx +++ b/packages/react-components/react-infolabel/stories/InfoLabel/index.stories.tsx @@ -1,4 +1,4 @@ -import { InfoLabel } from '@fluentui/react-infolabel-preview'; +import { InfoLabel } from '@fluentui/react-components'; import descriptionMd from './InfoLabelDescription.md'; import bestPracticesMd from './InfoLabelBestPractices.md'; @@ -10,7 +10,7 @@ export { Size } from './InfoLabelSize.stories'; export { InField } from './InfoLabelInField.stories'; export default { - title: 'Preview Components/InfoLabel', + title: 'Components/InfoLabel', component: InfoLabel, parameters: { docs: { diff --git a/packages/react-components/react-infolabel-preview/tsconfig.json b/packages/react-components/react-infolabel/tsconfig.json similarity index 100% rename from packages/react-components/react-infolabel-preview/tsconfig.json rename to packages/react-components/react-infolabel/tsconfig.json diff --git a/packages/react-components/react-infolabel-preview/tsconfig.lib.json b/packages/react-components/react-infolabel/tsconfig.lib.json similarity index 100% rename from packages/react-components/react-infolabel-preview/tsconfig.lib.json rename to packages/react-components/react-infolabel/tsconfig.lib.json diff --git a/packages/react-components/react-infolabel-preview/tsconfig.spec.json b/packages/react-components/react-infolabel/tsconfig.spec.json similarity index 100% rename from packages/react-components/react-infolabel-preview/tsconfig.spec.json rename to packages/react-components/react-infolabel/tsconfig.spec.json diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json index 8658aa8d4092e..8b025a08a06ec 100644 --- a/tsconfig.base.all.json +++ b/tsconfig.base.all.json @@ -147,6 +147,7 @@ "@fluentui/react-storybook-addon-codesandbox": [ "packages/react-components/react-storybook-addon-codesandbox/src/index.ts" ], + "@fluentui/react-swatch-picker-preview": ["packages/react-components/react-swatch-picker-preview/src/index.ts"], "@fluentui/react-switch": ["packages/react-components/react-switch/src/index.ts"], "@fluentui/react-table": ["packages/react-components/react-table/src/index.ts"], "@fluentui/react-tabs": ["packages/react-components/react-tabs/src/index.ts"], @@ -168,8 +169,7 @@ "@fluentui/theme-designer": ["packages/react-components/theme-designer/src/index.ts"], "@fluentui/tokens": ["packages/tokens/src/index.ts"], "@fluentui/workspace-plugin": ["tools/workspace-plugin/src/index.ts"], - "@fluentui/react-infolabel-preview": ["packages/react-components/react-infolabel-preview/src/index.ts"], - "@fluentui/react-swatch-picker-preview": ["packages/react-components/react-swatch-picker-preview/src/index.ts"] + "@fluentui/react-infolabel": ["packages/react-components/react-infolabel/src/index.ts"] } } } diff --git a/tsconfig.base.json b/tsconfig.base.json index 34547e5708eb8..4eae1f386653f 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -46,7 +46,7 @@ "@fluentui/react-focus-management": ["packages/react-focus-management/src/index.ts"], "@fluentui/react-image": ["packages/react-components/react-image/src/index.ts"], "@fluentui/react-infobutton": ["packages/react-components/react-infobutton/src/index.ts"], - "@fluentui/react-infolabel-preview": ["packages/react-components/react-infolabel-preview/src/index.ts"], + "@fluentui/react-infolabel": ["packages/react-components/react-infolabel/src/index.ts"], "@fluentui/react-input": ["packages/react-components/react-input/src/index.ts"], "@fluentui/react-jsx-runtime": ["packages/react-components/react-jsx-runtime/src/index.ts"], "@fluentui/react-jsx-runtime/jsx-dev-runtime": [ From 55edeef097f052c82daf082bf980d3371a68d996 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Wed, 18 Oct 2023 19:40:23 +0000 Subject: [PATCH 2/5] change files --- ...ct-components-85b82cd1-04f5-4379-ac32-512b6347e767.json | 7 +++++++ ...act-infolabel-37109a23-dbeb-48ae-abb1-3b537f06afc9.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-components-85b82cd1-04f5-4379-ac32-512b6347e767.json create mode 100644 change/@fluentui-react-infolabel-37109a23-dbeb-48ae-abb1-3b537f06afc9.json diff --git a/change/@fluentui-react-components-85b82cd1-04f5-4379-ac32-512b6347e767.json b/change/@fluentui-react-components-85b82cd1-04f5-4379-ac32-512b6347e767.json new file mode 100644 index 0000000000000..d270bdbd4cdf4 --- /dev/null +++ b/change/@fluentui-react-components-85b82cd1-04f5-4379-ac32-512b6347e767.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Moving react-infolabel to stable.", + "packageName": "@fluentui/react-components", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-infolabel-37109a23-dbeb-48ae-abb1-3b537f06afc9.json b/change/@fluentui-react-infolabel-37109a23-dbeb-48ae-abb1-3b537f06afc9.json new file mode 100644 index 0000000000000..5c8fb36dbc6c3 --- /dev/null +++ b/change/@fluentui-react-infolabel-37109a23-dbeb-48ae-abb1-3b537f06afc9.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Move InfoLabel to stable.", + "packageName": "@fluentui/react-infolabel", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} From af67fe437736ee1591b12d51d9e4df54c6849d72 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Wed, 18 Oct 2023 19:56:13 +0000 Subject: [PATCH 3/5] update docs --- packages/react-components/react-infolabel/README.md | 10 +++++++++- .../stories/InfoLabel/InfoLabelDescription.md | 13 ------------- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/react-components/react-infolabel/README.md b/packages/react-components/react-infolabel/README.md index cb7140cef9b52..712dffdb95176 100644 --- a/packages/react-components/react-infolabel/README.md +++ b/packages/react-components/react-infolabel/README.md @@ -2,4 +2,12 @@ **React Infolabel components for [Fluent UI React](https://react.fluentui.dev/)** -These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. +To use InfoLabel import InfoLabel like this: + +```jsx +import { InfoLabel } from '@fluentui/react-components'; + +const InfoLabelExample = () => { + return Sample label; +}; +``` diff --git a/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelDescription.md b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelDescription.md index 646d691616acb..3f004f98e2996 100644 --- a/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelDescription.md +++ b/packages/react-components/react-infolabel/stories/InfoLabel/InfoLabelDescription.md @@ -1,15 +1,2 @@ An InfoLabel is a Label with an InfoButton at the end, properly handling layout and accessibility properties. It can be used as a drop-in replacement for Label when an InfoButton is also needed. - - - -> **⚠️ Preview components are considered unstable:** -> -> ```jsx -> -> import { InfoLabel } from '@fluentui/react-infolabel-preview'; -> -> ``` -> -> - Features and APIs may change before final release -> - Please contact us if you intend to use this in your product From 074e850605d82e334d2fa799c7917e00fd7bb4af Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Wed, 18 Oct 2023 21:08:19 +0000 Subject: [PATCH 4/5] remove infobutton stories to avoid duplicate InfoLabel component in docsite --- .../InfoLabel/InfoLabelBestPractices.md | 10 ----- .../InfoLabel/InfoLabelDefault.stories.tsx | 17 -------- .../stories/InfoLabel/InfoLabelDescription.md | 15 ------- .../InfoLabel/InfoLabelInField.stories.tsx | 43 ------------------- .../InfoLabel/InfoLabelPatternDecision.md | 38 ---------------- .../InfoLabel/InfoLabelRequired.stories.tsx | 17 -------- .../InfoLabel/InfoLabelSize.stories.tsx | 39 ----------------- .../stories/InfoLabel/index.stories.tsx | 22 ---------- 8 files changed, 201 deletions(-) delete mode 100644 packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelBestPractices.md delete mode 100644 packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx delete mode 100644 packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDescription.md delete mode 100644 packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelInField.stories.tsx delete mode 100644 packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelPatternDecision.md delete mode 100644 packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelRequired.stories.tsx delete mode 100644 packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelSize.stories.tsx delete mode 100644 packages/react-components/react-infobutton/stories/InfoLabel/index.stories.tsx diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelBestPractices.md b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelBestPractices.md deleted file mode 100644 index d1c867587ab35..0000000000000 --- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelBestPractices.md +++ /dev/null @@ -1,10 +0,0 @@ -
- -Best Practices - - -### Don't - -- Because the Popover isn't always visible, don't include information in the InfoButton that people must know in order to complete the field. - -
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx deleted file mode 100644 index 76a4ab5c344a9..0000000000000 --- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDefault.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; - -import { Link } from '@fluentui/react-components'; -import { InfoLabel, InfoLabelProps } from '@fluentui/react-components/unstable'; - -export const Default = (props: Partial) => ( - - This is example information for an InfoButton. Learn more - - } - {...props} - > - Example label - -); diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDescription.md b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDescription.md deleted file mode 100644 index f57b24810daa5..0000000000000 --- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelDescription.md +++ /dev/null @@ -1,15 +0,0 @@ -An InfoLabel is a Label with an InfoButton at the end, properly handling layout and accessibility properties. -It can be used as a drop-in replacement for Label when an InfoButton is also needed. - - - -> **⚠️ Preview components are considered unstable:** -> -> ```jsx -> -> import { InfoLabel } from '@fluentui/react-components/unstable'; -> -> ``` -> -> - Features and APIs may change before final release -> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelInField.stories.tsx b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelInField.stories.tsx deleted file mode 100644 index 573e742dea572..0000000000000 --- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelInField.stories.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; - -import { Field, Input, LabelProps, makeStyles } from '@fluentui/react-components'; -import { InfoLabel } from '@fluentui/react-components/unstable'; - -const useStyles = makeStyles({ - infoLabelSurface: { - // Since we render the Popover inline and Input uses position: relative, we need to set a zIndex. If we don't, - // the Popover surface will render behind the input. See #27891 for more details. - zIndex: 1, - }, -}); - -export const InField = () => { - const styles = useStyles(); - - return ( - ( - - Field with info label - - ), - }} - > - - - ); -}; - -InField.storyName = 'In a Field'; -InField.parameters = { - docs: { - description: { - story: - 'An `InfoLabel` can be used in a `Field` by rendering the label prop as an InfoLabel. This uses the slot ' + - '[render function]' + - '(./?path=/docs/concepts-developer-customizing-components-with-slots--page#replacing-the-entire-slot) ' + - 'support. See the code from this story for an example.', - }, - }, -}; diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelPatternDecision.md b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelPatternDecision.md deleted file mode 100644 index 16886c13f7a58..0000000000000 --- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelPatternDecision.md +++ /dev/null @@ -1,38 +0,0 @@ -
- -InfoButton/InfoLabel Pattern decision - - -### What is an InfoLabel? - -An InfoLabel is composed of two components and a wrapper. The main component is a Label and the secondary component is an InfoButton. -We packaged both components to be able to achieve the correct accessibility out of the box. We automatically link the label to the -button from the InfoButton component and apply `aria-owns` to the wrapper when the InfoButton's Popover is open. In addition, InfoLabel -allows you to render only the InfoButton if that's desired. The reason why we don't export InfoButton separately is to avoid having -issues with `aria-owns`. The PopoverSurface must be linked to the wrapper of the InfoButton when open, not doing so results in a -violation. - -### What is the InfoButton pattern? - -The InfoButton pattern is a button that exposes additional information about a field or a concept. To trigger the Popover, the user may -activate the button by clicking on it and focusing on it and pressing enter or space. When the Popover is open, the focus is programmatically moved -to the PopoverSurface. To close the Popover, the user may click the button again, click outside the popover, press the escape key, or tab out of -the PopoverSurface. - -#### Why is focus moved to the PopoverSurface? - -The reason why we move focus to the PopoverSurface is to allow the user to navigate the Popover with the keyboard. This allows screen reader and keyboard -users to read the content and interact with it without having to use the mouse and not have unreachable content. We move the focus specifically to the -PopoverSurface and not the first focusable element because there might be a case where there's a paragraph of text and the first focusable element is at the -bottom of the Surface. In this case, a screen reader user might not know there's more content above and therefore miss it. - -#### Can the InfoButton be opened on focus and not move focus to the PopoverSurface? - -InfoButtons can not be opened on focus. The pattern where you have an icon and a tooltip that appears on focus is not the InfoButton pattern. The tooltip -pattern is meant to have short text and no interaction with the content. We believe that if the content is short or even a few words, it should be included -in the label or a secondary label. If the content is longer and/or has interaction, then it must be an InfoButton. - -> If the tooltip + icon pattern is still needed, refer to the Icon example in tooltip on how to correctly achieve this pattern. Note that when using a -> tooltip, the content must be short and not have interaction. - -
diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelRequired.stories.tsx b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelRequired.stories.tsx deleted file mode 100644 index 2b12ba0cdc92b..0000000000000 --- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelRequired.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; - -import { InfoLabel } from '@fluentui/react-components/unstable'; - -export const Required = () => ( - - Required label - -); - -Required.parameters = { - docs: { - description: { - story: 'When marked `required`, the indicator asterisk is placed before the InfoButton.', - }, - }, -}; diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelSize.stories.tsx b/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelSize.stories.tsx deleted file mode 100644 index fd5b49b9600db..0000000000000 --- a/packages/react-components/react-infobutton/stories/InfoLabel/InfoLabelSize.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import * as React from 'react'; - -import { makeStyles, tokens } from '@fluentui/react-components'; -import { InfoLabel } from '@fluentui/react-components/unstable'; - -const useStyles = makeStyles({ - container: { - alignItems: 'start', - display: 'flex', - flexDirection: 'column', - rowGap: tokens.spacingVerticalL, - }, -}); - -export const Size = () => { - const styles = useStyles(); - - return ( -
- - Small label - - - Medium label - - - Large label - -
- ); -}; - -Size.parameters = { - docs: { - description: { - story: "InfoLabel's `size` prop affects the size of the Label and InfoButton. The default size is medium.", - }, - }, -}; diff --git a/packages/react-components/react-infobutton/stories/InfoLabel/index.stories.tsx b/packages/react-components/react-infobutton/stories/InfoLabel/index.stories.tsx deleted file mode 100644 index a5c3aa291b621..0000000000000 --- a/packages/react-components/react-infobutton/stories/InfoLabel/index.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { InfoLabel } from '@fluentui/react-infobutton'; - -import descriptionMd from './InfoLabelDescription.md'; -import bestPracticesMd from './InfoLabelBestPractices.md'; -import patternDecision from './InfoLabelPatternDecision.md'; - -export { Default } from './InfoLabelDefault.stories'; -export { Required } from './InfoLabelRequired.stories'; -export { Size } from './InfoLabelSize.stories'; -export { InField } from './InfoLabelInField.stories'; - -export default { - title: 'Preview Components/InfoLabel', - component: InfoLabel, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd, patternDecision].join('\n'), - }, - }, - }, -}; From 92262e564cd9a145419c019a33ea3f600013c2d4 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Facusse Date: Thu, 19 Oct 2023 19:52:45 +0000 Subject: [PATCH 5/5] requested changes --- packages/react-components/react-components/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json index adc524d0da54b..f1386fa362f2a 100644 --- a/packages/react-components/react-components/package.json +++ b/packages/react-components/react-components/package.json @@ -45,6 +45,7 @@ "@fluentui/react-field": "^9.1.38", "@fluentui/react-image": "^9.1.43", "@fluentui/react-infobutton": "9.0.0-beta.71", + "@fluentui/react-infolabel": "9.0.0-alpha.0", "@fluentui/react-input": "^9.4.48", "@fluentui/react-label": "^9.1.46", "@fluentui/react-link": "^9.1.29", @@ -79,8 +80,7 @@ "@fluentui/react-tree": "^9.4.6", "@griffel/react": "^1.5.14", "@swc/helpers": "^0.5.1", - "@fluentui/react-message-bar": "^9.0.1", - "@fluentui/react-infolabel": "9.0.0-alpha.0" + "@fluentui/react-message-bar": "^9.0.1" }, "peerDependencies": { "@types/react": ">=16.14.0 <19.0.0",