-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds Dropdown and Option Web Components #27766
Closed
brianchristopherbrady
wants to merge
249
commits into
microsoft:web-components-v3
from
brianchristopherbrady:user/brianbrady/dropdown-option-web-components
Closed
Adds Dropdown and Option Web Components #27766
brianchristopherbrady
wants to merge
249
commits into
microsoft:web-components-v3
from
brianchristopherbrady:user/brianbrady/dropdown-option-web-components
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* Enable build pipeline for web-components-v3 branch * Add comments
* Delete existing Web Components implementation * Reset storybook * Change file * Add empty test to pass CI * Comment out WCs in stress-test
* ci: setup wc v3 daily releases * chore: UNDO - remove web-components from stress-test deps * ci: add change files check so we dont accidentaly release something beside wc-3 * chore: remove changefiles from master that could trigger unwanted releases * generate changefiles
* bump FAST dependencies * Add theme tokens (from react-theme) * Add theme switcher to storybook * deduplicate packages * fix yarn.lock * Replace @fluentui/react-theme with @fluentui/tokens * change file * address PR comments
* chore: setup typescript 4.7 for web-components package * chore: generate change-file * fixup! chore: setup typescript 4.7 for web-components package * fixup! fixup! chore: setup typescript 4.7 for web-components package
* add text as a new component * update main.js to .cjs format for esm due to require syntax * update style rules to align with FUI react v9, export text options, update stories to leverage object.keys of options * export text, update node resolution to 16 and fix object.keys for size to object.values * prettier style files, may need to revert if it does not play nice with selectors * update display for host to ensure we can layout the element properly margin, etc... * update latest FAST packages * leverage ValuesOf type helper
* add badge as a new component * add counter badge as a new component * fix broken import and add export paths * use badge template for counter badge to render count * update badge svg styles and fix import syntax * fixup imports for stories * update partial with default styles * js extension missing from partial imports * update api report
* Adds web component version of ProgressBar * Generates change * Renames progressbar to progress-bar * Changes alphabetical ordering of imports * Enumerates null value; Adds ? to boolean in Story * Adds typedocs to progress-bar class * Fixes class to attribute typo in CSS * Removes duped CSS * Adds export of progress-bar to package.json * Removes null in validation state object * Removes local CSS variables; Removes defaults on thickness and rounded corners * Removes unused CSS * Removes unused options, pause and min, that don't exist in Fluent * Addresses remaining feedback on PR: Renames rect to square; Cleans up Storybook
…crosoft#26498) * chore: run manually bump to fix failed CI release * generate changefile
* feat: export theme * change file
* ci: fix github pushes auth for release * chore(web-components): run manually bump to fix failed CI release * generate changefile
* chore(web-components): turn of storybook telemetry * ci: setup web-components docsite CI/CD * generate change-file
* Update azure-static-web-apps-deploy.yml * Update and rename azure-static-web-apps-deploy.yml to azure-storage-web-components.yml * Update azure-storage-web-components.yml * Create azure-static-web-apps-deploy.yml
* applying package updates * fix: Select disabled state hover style, Combobox disabled state open on chevron click (#26068) * perf: Don't render Checkbox icon when unchecked (#26248) Don't render the checkmark at all when unchecked, and remove the universal selector rule in CSS. * revert: MenuItem root slot only supports div (#26261) * fix: Revert MenuItem root slot to support only div Follow up of #26257 * changefile * applying package updates * Fix: Allow root slot refs to merge with focus refs in Slider (#26243) * fix: allow refs passed in root slot to merge with focus refs * change file * cleanup * chore: Update Switch to use griffel reset styles (#26007) Update the styles to apply base styles with Griffe's makeResetStyles function, which combines all of the base styles into a single class. * Update styling for contentBefore and contentAfter input slots (#26115) * Update styling for contentBefore and contentAfter input slots * change files * Update styling * Azure Theme: reduced spin button height to match TextField / DropDowns at 24px height (#26265) * Reduced split button height to match textfields / dropdowns at 24px height. * Typo fix * Create @fluentui-azure-themes-f2eeb068-7c57-433f-9da0-60afb1302fc4.json * fix: web component menu layering bug (#26260) * fix: layering z-index issue for sub menus * chnage file * applying package updates * docs: Add documentation for react-overflow (#26183) * docs: Add documentation for react-overflow * add more docs * changefile * Update packages/react-components/react-overflow/stories/Overflow/index.stories.tsx Co-authored-by: Sean Monahan <[email protected]> * Update packages/react-components/react-overflow/stories/Overflow/OverflowDescription.md Co-authored-by: Sean Monahan <[email protected]> * Update packages/react-components/react-overflow/stories/Overflow/Wrapped.stories.tsx Co-authored-by: Sean Monahan <[email protected]> * add docs for pinned * remove gap from minimum visible * remove redundant overflowDirection prop * fix wrapped example styling * use aria-pressed for selected items * improve resizable area styling * add non-trivial solution for priority divider overflow * increase padding for divider examples, document utilities Co-authored-by: Sean Monahan <[email protected]> * fix: Tab should focus the window if trigger is the last focusable element (#26163) * fix: Tab should focus thewindow if trigger is the last focusable element Removes the explicit tab handling in the Menu. We know that React effects are sync so we always focus the menu trigger when the menu is closed. Since the browser only performs the default behaviour for Tab once events have fully bubbled up the window, the browser will move focus to the next tabbable element before/after the trigger if needed. If tab was not pressed, then we simply focus the trigger as expected. * changefile * Update change/@fluentui-react-menu-9787aa9c-cdf8-41b8-a9d6-c8d7e1f3c502.json Co-authored-by: Oleksandr Fediashov <[email protected]> * Update packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * Update packages/react-components/react-menu/src/components/Menu/useMenu.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * chore: bump storybook to 6.5.15 (#26259) * chore: manually dedupe prismjs * bump storybook to 6.5.15 * bump other packages * lock * update html as well * another lock * lock * dedup * locked deduped for sure * only dedup storybook * change file * chore: update yarn.lock again after deduping storybook * Update Menu.cy.tsx Co-authored-by: Tristan Watanabe <[email protected]> * ci: bump actions/checkout to v3 to fix node12 deprecation (#26281) * chore: migrate whole repo to new `@fluentui/scripts-*` family of packages (#26182) * chore(scripts/generators): update create-* generators to contain new granular script packages * chore: migrate scripts/ sub-folders to packages * chore: migrate apps/ to use new scripts-* packages * chore: migrate packages/ to use new scripts-* packages * chore(.github): update codeowners * generate change-files * chore: make danger work with packaged api * Fix suggestions no results infinite loop (#26267) * Set correct defaultRender * yarn change * docs: add migration guide for cards from V0 to V9 (#26186) * fix: button semantics for Combobox chevron, and pointer styles (#26075) * fix: button semantics for Combobox chevron, and pointer styles * Change file * add chevron accName and tests * add top-level aria-label* props to be overridden by chevron * update change file to resolve gh discussion * update order of icon aria-label* priorities * chore(react-datepicker): Scaffold package (#26286) * creating react-datepicker package * adding api file * update to new scripts-* setup * updating api extractor config * chore: Re-exporting missing exports from @fluentui/react-combobox. (#26294) * fix: react-field does not wrap SVG in inline parent (#26150) * update to use root-level grid layout for validation icon to avoid extra wrapping node * use named grid template areas for readability * fix: add aria-owns to react-combobox non-inline popups (#26246) * applying package updates * docs: Improve a11y for Table/DataGrid examples (#26218) Fixes #26210 Fixes #26208 Fixes #26197 Fixes #26209 * fix(TableSelectionCell): Radios should not change selection on focus (#26283) * fix(TableSelectionCell): Radios should not change selection on focus While native radios change selection on focus, it can be a bad experience for keyboard users on larger widgets. If an author wants to perform an action on row select, it won't force a keyboard user to perform that action for every row between the one that they're on and the one that they want. Fixes #26196 * update tests * changefile * feat: Implement DataGridBody powered by react-window (#26081) * feat: Implement DataGridBody powered by react-window Uses hooks to recompose `DataGridBody` that uses react-window internally. This component should be a straight replacement for the standard `DataGridBody` that supports virtualization. * remove useless import * update datagrid * refactor: render function children called in component render function Components like `DataGridBody` and `DataGridRow` only accept render functions as children. These render functions were always called during the `useComponent` hook. This was unnecessary, and makes recomposition harder because data is always processed even if the recomposed component should render children differently. * changefile * updates * remove useless story * changefile * update md * changefile * useScrollbarWidth * update changefile entry * remove unnecessary dependencies * remove TODO * expose width as prop * fix comment typo * fix datagrid virtualization story import * use unknown in * change to * add incrementing index to virtualization examples * update api md * chore: remove all package.json from v-build ownership to speed-up PR review velocity (#26285) * Organize storybook TOC for react-theme (#26185) * Separated different theme areas in storybook * yarn change * Update change/@fluentui-react-theme-04b2a905-c203-47f1-b3f1-493a4d6e50a7.json * chore: Simplify Checkbox style selectors using component checked/disabled state (#26247) Simplify the selectors used for applying colors to the checkbox. The colors are now applied via styles on the root slot, with selectors for `:hover` and `:active`. The label's color is applied by inheriting the root's color. The indicator's color is applied by a `> .${checkboxClassNames.indicator}` selector on the root. This makes it simpler to override styles for Checkbox. * fix(react-infobutton): Change role of PopoverSurface to note and fix API to not require cast (#26300) * update types to make the API more friendly for popover * change files * api file * updating types to keep slots * updating query by dialog to note * chore: Add bundle size fixtures for react-table (#26310) * chore: Add bundle size fixtures for react-table * changefile * chore(react-tree): removes BaseTreeItem premature generalization (#26302) * fix: toolbar a11y checklist (#26275) * fix: add missing aria label for toolbar stories * fix: add missing role for toolbar radio * fix: add missing aria orientation for vertical toolbar * feat: create radio group * chore: add aria pressed and checked * chore: update stories aria label * chore: fix class name var * chore: add changes * chore: update api * chore: update snapshot * chore: update unstable api * chore: remove aria-pressed * chore: remove aria pressed * chore: update changes * chore: reuse toolbar group * chore: remove inexistent exports * chore: update apis * chore: add changes * chore: update snapshots * fix(scripts-generators): use workspace package path on callsite to mitigate plop cwd issue (#26322) * add perf scenario for InfoButton (#26306) * test(react-18-tests-v9): mute TS error reporting from packages/ (#26324) * chore(react-datepicker): Create Calendar components and DatePicker component (#26325) * add Calendar components and DatePicker component * fix lint error * missed one * chore: rename react-builder index.tsx to index.ts (#26343) * fix react-builder tsconfig path * rename react builder index * Revert "fix react-builder tsconfig path" This reverts commit c6407ca2fa565ce770287b06a646a7f8bac8d69e. * chore: fix typo in Dialog docs (#26342) * chore: fix typo in Dialog docs * change file * chore: prepare release react-northstar 0.66.0 (#26217) * chore: prepare release react-northstar 0.66.0 * @fluentui/react-northstar_v0.66.0 * chore: fix dependencies after react-northstar release * chore: rename react-builder index.tsx to index.ts (#26343) * fix react-builder tsconfig path * rename react builder index * Revert "fix react-builder tsconfig path" This reverts commit c6407ca2fa565ce770287b06a646a7f8bac8d69e. Co-authored-by: Juraj Kapsiar <[email protected]> Co-authored-by: Fluent UI Build <[email protected]> Co-authored-by: Amber <[email protected]> * Update fluent 2 theme to reconcile with v9 (#26331) * Update fluent 2 theme to reconcile with v9 * yarn change * Update VR screenshot diff commenting flow (#26340) * chore: Re-exporting makeResetStyles in @fluentui/react-components (#26353) * chore: Re-exporting makeResetStyles in @fluentui/react-components. * Adding change file. Co-authored-by: Humberto Makoto Morimoto Burgos <[email protected]> * chore(react-infobutton): Add vr tests for InfoButton (#26305) * adding vr-tests for infobutton * updating tests to storywright * fix border for Teams HCM * update change files? * updating styles to remove custom focus indicator * applying package updates * applying package updates * BREAKING: rename types to be more consistent (#26304) * BREAKING: rename types to be more consistent * changefile * update md * refactor(scripts): move executors from monorepo to proper domain (#26345) * refactor(scripts-tasks): make api-extractor one closure to avoid scope leaks (#26346) * refactor(scripts-tasks): make api-extractor one closure to avoid scope leaks * chore(scripts-tasks): remove unnecessary check for ts task * chore: remove @fluentui/scripts-dependency-graph-generator (#26365) * chore: remove unused dependency on enhanced-resolve (#26364) * feat(PresenceBadge) Add `blocked` status (#26366) * feat(PresenceBadge): Add blocked status * changelog * update api * Update packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Juraj Kapsiar <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> * BREAKING(DataGrid): render functions need to by typed (#26371) * BREAKING(DataGrid): render functions need to by typed * changefile * fix dependencies * update story * fix(TableCellActions): Background should match rown on hover and active (#26373) * fix(TableCellActions): Background should match rown on hover and active * changefile * remove unnecessary styles, inherit background color * applying package updates * feat(scripts-tasks): use path aliases for api-extractor only on local env (#26370) * feat(scripts-tasks): use path aliases for api-extractor only on local env * docs: Hoist columns above react code (#26374) The intention of memoized columns was to make the code visible in `show code` button of the docsite. However this can encourage bad practices like memoizing when not necessary. Fixes #26297 * docs: Add row memoization example (#26379) Adds an example where selectable table rows are memoized. When a row's selection changes, only that affected row is re-rendered. * Release @fluentui/react-table as RC (#26381) * Release @fluentui/react-table as RC * changefile * Fix/message bar remove background in hc (#26221) * fix: added border with correct contrast ratio in HC in MessageBar * Release `@fluentui/react-toolbar` as stable (#26384) * Release `@fluentui/react-toolbar` as stable see title * changefiles * Update packages/react-components/react-toolbar/stories/Toolbar/index.stories.tsx Co-authored-by: Miroslav Stastny <[email protected]> Co-authored-by: Miroslav Stastny <[email protected]> * chore: Add bug bash to convergence checklist (#26367) * applying package updates * Release `@fluentui/priority-overflow` and `@fluentui/overflow` as stable (#26380) * Release `@fluentui/priority-overflow` and `@fluentui/overflow` as stable * changefile * update docs * update react-components * changefile * update stories imports * update stories * update stories * Update packages/react-components/react-overflow/stories/Overflow/index.stories.tsx * docs(Toolbar): Minor improvements (#26382) * docs: Minor improvements - Be more explicity about sizing - Make popover examples a bit cleaner (removed Example buttons) - Add link to overflow documentation * Add subcomponents * remove from preview section * fix subtle example * feat(react-tabster): add id to useModalAttributes options (#26387) * add id * chg * api * fix(react-northstar)(ChatMessage): action menu positioning in RTL (#26378) * fix: Styles should be inserted on portal at render time (#26377) * fix: Styles should be inserted on portal at render time Fixes #25432 again `useInsertionEffect`still runs after DOM has been mounted, which results in the same issue where transitions are triggered due to css variables changing. * changefile * remove useInsertionEffect * different code paths for React versions * make version check better * add test for bug * remove ts-expects-error * improve vr tests * cleanup useInsertionEffect * fix steps * fix vr test * applying package updates * Generic Virtualizer (#25451) * Squish and rebase * Add accessibility metrics to demos * useCallbacks for refs and update state update methods * feat: create migration shim packages for V0 (#26142) * chore: create package * chore: add api changes * chore: remove ununsed initializeIcons * chore: use as dev deps * chore: fix version mismatch * chore: use as deps * chore: remove spec * chore: add js docs * chore: update lock * chore: use V0 Input * chore: update N* in the shims package * chore: update package * Update hex color codes for MS Excel product (#26339) * chore: Simplify layout for Field (#26352) Simplify Field's layout: * For vertical alignment, use a single column grid with row auto flow (the default). * For horizontal alignment, use a two-column grid with the label taking up the entire first column. All other children of the root will be placed in the second column thanks to the grid's auto-flow behavior. * If there is no label, the label's column is replaced with an equal amount of padding. This keeps horizontal fields with and without labels aligned with each other. * Place the validation message icon as a child of the validation message, since it can no longer have its own grid cell in the root layout. * The icon is absolutely positioned in the validationMessage, and the message text is padded in by the width of the icon. * Use `makeResetStyles` where appropriate to reduce the number of class names on slots. The primary benefit of this change is that the `control` slot no longer needs to specify its grid area. This will allow a future change to avoid having to wrap the control in a `<div>` to position it properly. * fix: react components version (#26406) * update codeowners (#26307) * chore: fix Panel Confirm Dismiss example to properly restore focus after panel closes (#26301) * fix(scripts-tasks): unify api-extractor runs on any CI (#26411) * chore: update browser list db (#26407) * fix(vr-tests v8): fix flaky VR tests (#26348) Fixes undefined * docs: add migration guide for cards from v8 to v9 (#26347) Co-authored-by: Martin Hochel <[email protected]> Fixes https://github.com/microsoft/fluentui/issues/24020 * New min/max example (#26418) * feat: provide `launch` and `startServer` functions as single source of truth for creating new browser/server instance within monorepo (#26375) * feat(scripts-pupeteer): provide launch function as single source of truth for creating new browser instance * chore: bump puppeteer to v17 * refactor(scripts): make startServer generic and used everywhere * fix(ProgressBar): rename rectangular shape to square (#26419) * fix(ProgressBar): rename rectangular shape to square * change file * fix: Update Field label padding to match spec (#26413) Update padding of Field's label to match the visual spec. * chore(recipes): Create initial implementation for react-recipes (#26332) * setting up initial implementation * updating workspace to add package * adding blank file to register src folder * adding requested changeS * updating tsconfig * updating package.json * fix: Stretch Field components to full width (#26412) The component within a field stretches to fill the whole width of the field. The field itself can be resized to the desired width of the component, label, hint, etc. * chore: remove circular dependency within v0 and scripts/ and move e2e test to proper pipeline (#26410) * chore(fluentui/e2e): make scripts task naming consistent and rename test to e2e * refactor(fluent/perf): remove circular deps between scripts-gulp and fluent-perf and scope related tooling to the perf package * chore(scripts): copy parseDocblock to northstar conformance test to avoid compiling tooling code within current v0 tsc setup * fix: Field sets role="alert" on its error message so it is announced by screen readers (#26414) Add role="alert" to the field's validation message when it is an error, so that it is read by screen readers. * fix: react-combobox examples a11y updates (#26441) - add a "no results found" fallback item in the filtering example - update the freeform custom string option in the freeform example - add better warning language for the multiselect w/ value text example - set the Persona avatar to aria-hidden to prevent double announcement * Hotfix/portal memory leak (#26435) * clean virtual parent reference * changelog * reuse setVirtual and remove cleanVirtualParent * docs: make unsized icons searchable (#26451) Adds the ability to use the search engine on the docs page even for the "Unsized" icons. * docs: fix config for import rewrites for Storybook export (#26454) * Added README.md for public-docsite-v9 (#26434) * Added README.md to public-docsite-v9. * applying package updates * fix: make ssr-tests-v9 running on Windows (#26458) * fix: make ssr-tests-v9 running on Windows * Update test.ts * fix: disable fluentui debug console messages for the server runtime (#24803) * fix: disable fluentui debug console messages for the server runtime * Update createFelaRenderer.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * feat: export TextareaOnChangeData type (#26455) * fix: react-toolbar exports (#26462) The React hooks useToolbarButtonStyles_unstable and useToolbarButton_unstable were exported as Typescript types but they are functions. Updated to export them as functions, not types. * SpinButton fix for chevron buttons (#26464) * Splitbutton fix for spin button chevrons * Inline text centered vertically, labels on top remain same height (for Elixir) * CSS selector clean up * Create @fluentui-azure-themes-d4442d56-f31c-4e86-b175-7298d7d565de.json * chore: react-combobox spec and migration docs update (#26396) * fix: high contrast mode focus styles are applied (#26116) * fix: react-combobox add listbox max-height and shift shadow style location (#26470) * Adds Fluent 2 styles for v8 SpinButton (#26277) * SplitButton styles * Change file * applying package updates * feat(react-tree): create TreeItemLayout component (#26446) * feat(react-tree): create TreeItemLayout component * Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts * Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemStyles.ts * chore: move tokens from contexts folder * Azure Theme: Spinbutton CSS update (#26467) * Splitbutton fix for spin button chevrons * Inline text centered vertically, labels on top remain same height (for Elixir) * CSS selector clean up * Create @fluentui-azure-themes-d4442d56-f31c-4e86-b175-7298d7d565de.json * Second spin button fix: Elixir * Fixing class selector from previous PR * Create @fluentui-azure-themes-4447b77a-6462-4e32-a60e-e4bcefb1be23.json * fix: react-combobox story fixes and docs wording updates (#26471) * fix: react-combobox activedescendant calculation updates (#26444) - recalculate the active option when the children change while open - clear activedescendant if using left or right arrows to move text cursor * fix: Update `useId` to work correctly in React 18 and React 18 strictmode (#26465) * updated useId to check if React has useId Available an use it * change file * moving replace to be specific to style tag and return providedId when provided and React.useId is available * update ?? to || * change file * minor change * add requested changes * adding comment * chore(react-datepicker): Copy over files to package from personal branch (#26472) * copy over files from local branch * copy over stories and src * updating deps * adding missing dep * adding missing dep * fix typecheck errors * chore: update v8 ComboBox & Dropdown docs to explicitly prohibit nested interactive content (#26466) * feat(react-button): creates ButtonContext (#26478) * feat(react-button): creates ButtonContext * chore: add comments to the API * Update packages/react-components/react-button/src/components/Button/useButton.ts Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> * Add relative position to base picker (#26490) * Add relative position to base picker * changefile * snaps * Add labels to arcs in donut chart (#25967) * add labels to arcs in donut chart * add change file * update snapshots * fix overflowing arc labels * add prop to hide arc values * add tests * update example * minor * rename functions * Add new variant to horizontal bar chart (#26082) * add new variant to horizontal bar chart * add change file * add examples * add comments * add tests * rename variant * add rtl support * minor * rename function * chore: scaffolds TreeItemPersonaLayout component (#26369) * feat: create TreeItemPersonaLayout component * Update packages/react-components/react-tree/src/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.ts Co-authored-by: ling1726 <[email protected]> Co-authored-by: ling1726 <[email protected]> * chore: refactors Tree and TreeItem to stop using aria-owns (#26292) * chore(deps): bump ua-parser-js from 0.7.31 to 0.7.33 (#26484) Bumps [ua-parser-js](https://github.com/faisalman/ua-parser-js) from 0.7.31 to 0.7.33. - [Release notes](https://github.com/faisalman/ua-parser-js/releases) - [Changelog](https://github.com/faisalman/ua-parser-js/blob/master/changelog.md) - [Commits](https://github.com/faisalman/ua-parser-js/compare/0.7.31...0.7.33) --- updated-dependencies: - dependency-name: ua-parser-js dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Add property that manages if panels should be rerendered or not (#25368) * Add property that manages if panels should be rerendered or not * rename variable * Update changelog * Update CHANGELOG.md Co-authored-by: Volodymyr Hensorskyi <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * fix: update elementContains() to handle circular references (#26483) * fix: update elementContains() to handle circular references * update options, add test * Add overrides context to allow Input appearance overrides (#25262) * proto: add overrides context to allow per-component overrides * fix dependencies * overides merging * API files * change files * update change files * fix monorepo dependencies * api files * address PR comments * fix typings * revert appearance story, add vr test * add override to Select, SpinButton and TextArea * change files * fix test * rename overrides -> overrides_unstable * address PR comments, fix test * feat(web-components): bump tslib to 2.1. to align with rest of monorepo packages (#26457) * feat(web-components): bump tslib to 2.1. to align with rest of monorepo packages * chore: remove web-components from deps sync ignore list and fix repo violations * generate change file * chore(react-avatar): deprecates AvatarSizes in favor of AvatarSize (#26492) * chore(react-avatar): deprecates AvatarSizes in favor of AvatarSize * chore: updates AvatarGroup components to use AvatarSize * chore(react-tree): updates AvatarSizes for AvatarSize * react-migration-v8-v9 moved to v9 convergence package (retry PR) (#26503) * Deleted v8 migration package * Added new migration package * Add back migration shims and stories * yarn change * syncpack fix * syncpack fix * feat: Add Field component to replace InputField, ComboboxField, etc. (#26430) * Add a new `Field` component that can render any control as its child. * Applies props to the child using `cloneElement`, to hook it up to the labels and validation state. * Update `useField_unstable` to be used by the new Field. Existing users of this function will need to update their code. * Add conformance and bundle-size tests for Field. * Deprecate the `*Field` components, and replace them with shims that are implemented with the new `Field` component. * These will be removed in a future v9 release, as they were never released as stable. * `CheckboxField`, `ComboboxField`, `InputField`, `ProgressField`, `RadioGroupField`, `SelectField`, `SliderField`, `SpinButtonField`, `SwitchField`, `TextareaField` * RFC: Field with custom components (#26338) Implemented by #26430 * fix: update react-combobox multiselect checkbox styles to match Checkbox (#26509) * applying package updates * fix(Link): Handle "tabIndex" from user's input (#26456) * fix: handle "tabIndex" from user's input * Update packages/react-components/react-link/src/components/Link/useLinkState.ts Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> * fix(react): No pointer events on focus ring (#25088) * fix(react): No pointer events on focus ring * change file * make pointerEvents configurable in getFocusStyle() * update change files * Update packages/style-utilities/src/interfaces/IGetFocusStyles.ts Co-authored-by: David Zearing <[email protected]> Co-authored-by: David Zearing <[email protected]> * feat: add IdPrefixProvider (#26496) * feat: add IdPrefixProvider * Update packages/react-components/react-utilities/src/hooks/useId.ts Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> * applying package updates * feat(react-tree): uses ButtonContext to modify default button size (#26495) * feat(react-tree): starts using ButtonContext to modify default button size * Update packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts Co-authored-by: Makoto Morimoto <[email protected]> * Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts Co-authored-by: Makoto Morimoto <[email protected]> * Update packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> * feat: add combobox and dropdown vr tests (#26487) * fix(react-persona): Reduce spacing between first and second line (#26520) * updating spacing between second and first line * change file * applying package updates * chore: properly use tokens for border radius (#26516) * chore(scripts-puppeteer): migrate to puppeteer 19 (#26475) * chore(scripts-puppeteer): migrate to puppeteer 19 * fix(scripts-storybook): implement proper TS module and path aliases resolution to enable build-less DX (#26489) * fix(scripts-storybook): attempt to fix workspace addon loader * fix(scripts-storybook): implement proper ts registration and path aliases resolution in dev mode * feat(scripts-storybook): redo the solution to reuse storybook webpack module resolution and TS compilation * docs(scripts-storybook): update docs * Fix duplicate-id accessibility issue in line chart (#26486) * fix duplicate-id accessibility issue in line chart * add change file * chore(react-builder): migrate to axe-core v4 (#26453) * chore(react-builder): migrate to axe-core v4 * fix(scripts-jest): remove duplicate __mock__ violations in v00 when running test with build snaps present * chore: Change the default value of validationState to error when a validationMessage is set (#26523) Change Field's `validationState` to default to `error` when there is a `validationMessage`. This makes the default more useful, and makes the common case of showing an error message simpler. * chore(react-badge): updates border-radius to use proper token value (#26531) * filetype updates for loop, clipchamp [master branch] (#26276) * Update CDN information for filetype icons, new icons for loop and clipchamp * Change files * fix package name typo in readme file * fix: remove invalid and unnecessary DetailsRow check (#26519) * fix: Fixing button padding to get correct sizes from design spec (#26522) * fix: Fixing button padding + minHeight to get correct sizes from design spec. * Adding change file. * Cleanup. * Changing approach to not use minHeight. * Updating spacing constants to only use values directly instead of having some referencing tokens. Co-authored-by: Ben Howell <[email protected]> --------- Co-authored-by: Ben Howell <[email protected]> Co-authored-by: Humberto Makoto Morimoto Burgos <[email protected]> * applying package updates * chore: Bump storybook-addon-export-to-codesandbox to 0.8.1 (#26513) * feat: re-export useFocusWithin() hook (#26533) * fix: SSRProvider TypeScript definitions (#25582) * fix: SSRProvider TypeScript definitions * children prop now needs to be listed explicitly when defining props in React 18 * [How to Upgrade to React 18](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-typescript-definitions) * Create @fluentui-react-utilities-9259798e-d6da-420f-8da3-3bf377f4825b.json * update API file --------- Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> * fix(scripts-generators): run generate-version-files logic on node execution (#26532) * Jackieg/azuretheme cal (#26544) * azure theme calendar style fix * Context menu border fix * updated all border radius constants from 3 to 2px per feedback, adjusted "today is selected" sizing * Updated "today' selector to match figma * Removing border from focused pivot * Create @fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json * removing TS errors * Centered detailslist checkmark, removed the !important from border on detailslist rows for Elixir * Removing empty line * fix(react-persona): Make before and after textPositions align correctly when the Avatar's size is larger than the text lines together (#26546) * adding vr-tests and fixing centering of the text * change files * fix vr-tests * fixing vr-tests * feat: Release react-combobox as stable (#26518) * Export react tabs context (#26552) * Exported context for react-tabs * API updated, yarn change * Apply suggestions from code review Co-authored-by: Makoto Morimoto <[email protected]> * Remove wrong context export * updated API * components API update --------- Co-authored-by: Makoto Morimoto <[email protected]> * applying package updates * feat: expose Typography tokens as components and create documentation for it (#26403) * refactor: move all presets to a dedicated folder * feat: expose all typography tokens as presets * types: expose TextPresetProps * docs: link typography page to react-text docs * docs: code block not having monospace font in all elements * docs: recreate Typography documentation with better examples * test: add missing VR tests for text presets * docs: force code block to have correct font-size and font-family * test: use inline snapshots Co-authored-by: Miroslav Stastny <[email protected]> * docs: add description to code blocks * docs: move text block to the top for better discoverability --------- Co-authored-by: Miroslav Stastny <[email protected]> * feat: Release `@fluentui/react-select` as stable (#26491) * chore: Update Field VR tests to use new Field component (#26537) Rewrite Field VR tests to use new standalone `Field` component. * chore(react-infobutton): Add aria-label to InfoButton's button and add a11y guidance for using InfoButton with a label (#26557) * updating aria-label for infobutton and adding guidance on how to use infobutton with a label * change file * applying package updates * Adding fluent2-theme dependency (#26571) * fix: v8 SplitButton should not reset focus to trigger after opening menu (#26572) * fix: v8 Dropdown option focus should not be cut off in HCM (#26573) * applying package updates * [DatePicker] fix default date parser converting dates to UTC implicitly (#25962) * [DatePicker] fix default date parser converting to UTC instead to local timezone * add change file + better link --------- Co-authored-by: Karlo Sudec <[email protected]> * docs: use full source in "Show code" (#26562) * docs: use full source in "Show code" * Apply suggestions from code review Co-authored-by: Martin Hochel <[email protected]> * update the addon --------- Co-authored-by: Martin Hochel <[email protected]> * docs: Remove extra exports (#26567) * docs: Remove extra exports Doc examples should only have one export. * revert * feat: generate new component structure for react-drawer (#26554) * chore(react-tree): adds TreeItemLayout to all stories (#26550) * ci: bump gha to latest and use major for add-to-milestone to get latest fixes (#26581) * Fix dependency mismatch (#26586) * ci: use specific version of add-to-milestone as using v1 throws error (#26588) * chore(public-docsite-v9): enable build-less DX for storybook (#26476) * feat(scripts-storybook): implement createPathAliasesConfig util for creating tsconfig with whole repo path aliases * chore(.storybook): replace babel-loader with swc in root storybook config * feat(scripts-storybook): add registerRules helper and replace tsConfigPlugins within registerTsPaths if one already exists * chore(scripts-storybook): move logic from monorepo root /.storybook to package boundary * chore(public-docsite-v9): enable build-less DX for storybook with swc * Generated empty Breadcrumb component v9 (#26529) * Generated Breadcrumb package for FluentUI V9. * Generated Breadcrumbs component in @fluentui/react-breadcrumb package. * fix(ssr-tests-v9): don't open browser twice on CI to potentially mitigate TIMEOUT issues (#26587) * fix(public-docsite-v9): add migration packages as dep to properly build those when releasing (#26589) * remove mwf styles (#26592) * remove mwf styles * change file * Fix: Contextual menu label missing overflow hidden (#26591) * fix: ContextualMenu label was missing overflow hidden * change file * snaps * applying package updates * fix(scripts-generators): make create-component work properly on windows and improve DX (#26569) * fix(tools): make sure export maps always use posix paths * fix(scripts-generators): remove empty export {} and run lint fix when create-component is invoked * feat(eslint-plugin): turn off fluentui/max-lenght rule for v9 * generate change file * applying package updates * chore(react-infobutton): Making InfoButton's content focusable and update example's text (#26596) * fix: Remove ReallyClean from CI pipelines (#26637) Since component governance is forced, we should disable this step since it will remove all files from the working directory and fail component governance * fix: New overflow items all always dispatch updates to subscriber (#26565) * fix: New overflow items might not dispatch updates The dispatch process is done by analyzing the tops of the visibile and invisible queues. The update triggered after adding a new element might not be dispatched to the subscriber because the queue tops don't change. This can result in a desync between the visibility and the subscriber state. Adds a `forceDispatch` flag which is used when new items are added while observing so that the next batched update will flush to subscribers even if queue tops don't change. Fixes #23555 * changefile * Add tests * changefile * remoive old changefile * refactor processOverflowItems * make test cleaner * fix(createPositionManager): computePosition should not apply styles after destruction (#26593) * fix(createPositinoManager): computePosition should not apply styles after destruction Since `computePosition` is an async function, it can still resolve after the instance is destroyed. Updates the destruction mechanism to have a [flag similar to poppver v2](https://github.com/floating-ui/floating-ui/blob/2893e9a8d2ebd895eb4311a8873afac62f75123e/src/createPopper.js#L171). This flag is used both on `forceUpdate` (to avoid memory leaks) and `computePosition` (to avoid applying outdated position). * changefile * update changefilke * rename destroyed to isDestroyed * Update packages/react-components/react-positioning/src/createPositionManager.ts * Update packages/react-components/react-positioning/src/createPositionManager.ts * chore: export SlotRenderFunction type (#26600) * fix: HoverCard example adjusts to viewport, add docs (#26624) * scaffold react-skeleton components (#26640) * fix: Dropdown/Combobox checkboxes have double swipe stops for some screen readers (#26566) Add aria-hidden to label text to prevent it from being a duplicate non-interactive swipe stop. Add aria-labelledby to preserve accName for the checkbox. * fix: Using correct icon and color for away + out-of-office PresenceBadge (#26655) * fix: Using correct icon and color for away + out-of-office PresenceBadge. * Adding change file. --------- Co-authored-by: Humberto Makoto Morimoto Burgos <[email protected]> * fix: react-button high contrast mode primary variant (#26623) * Updated description for spin button (#26659) * Updated description for spin button * yarn change update * removed disabled property from Label (#26658) * Sankey revisit ankit (#25455) * Sankey chart changes for the new design * Sankey changes for updated design * Adding change file * Fixing build failure * Fixing build failure * fixing build failure * fixing build failure * fixing build failure * Adding border color and reverting changes for package.json * Adding changes for opacity changes for links,font size for text,different border for node hover * Resolving review comments and removing the examples used for testing * Fixing the gradient issue * Fixing the id issues * Fixing the tooltip position issue * Fixing the tooltip position issue * Adding comment for tooltip fix * Fixing the tooltip position issue * Fixing the tooltip position issue * Incorporating review comments and improving code efficiency followimg the best pratices * Adding Unit Test cases for Sankey Chart * Resolving review comments * Minor fixes * Resolving review comments * applying package updates * Table - Column resizing (#26477) * RFC: Styling Handbook for Fluent UI React v9 (#26148) * RFC: Styles handbook * Apply suggestions from code review Co-authored-by: Miroslav Stastny <[email protected]> Co-authored-by: ling1726 <[email protected]> * add a note about imports * rename to "Performance caveat" * add note about shorthands * Apply suggestions from code review Co-authored-by: Miroslav Stastny <[email protected]> * add a link to makeResetStyles section * update structure * Apply suggestions from code review Co-authored-by: ling1726 <[email protected]> * update system colors part * fix stats * highlight the important phrase * use makeResetStyles in examples * add notes about overrides * add order of mergeClasses to basic * split selectors cases, add "Use structured styles" * split and move RTL parts * Apply suggestions from code review Co-authored-by: Amber <[email protected]> * do not expand shorthands in makeResetStyles calls * make comment with a problem explicit * put a missing word * Apply suggestions from code review Co-authored-by: Sean Monahan <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> * add an example for `shorthands` & `@noflip` * improve base examples * mention FluentProvider in RTL section * update TOC --------- Co-authored-by: Miroslav Stastny <[email protected]> Co-authored-by: ling1726 <[email protected]> Co-authored-by: Amber <[email protected]> Co-authored-by: Sean Monahan <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> * fix(Dropdown): Allow clear on Enter/Space press (#26685) * fix(Dropdown): Allow clear on Enter/Space press * remove aria-hidden, add changelog * fix --------- Co-authored-by: Juraj Kapsiar <[email protected]> * Added information about `Open in CodeSandbox` button repo (#26536) * fix(react-card): improve description for card props (#26614) Co-authored-by: Martin Hochel <[email protected]> * docs(Card): improve a11y of storybook examples (#26613) Fixes https://github.com/microsoft/fluentui/issues/26583 * Azure Theme: toggle & commandbar style updates (#26654) * azure theme calendar style fix * Context menu border fix * updated all border radius constants from 3 to 2px per feedback, adjusted "today is selected" sizing * Updated "today' selector to match figma * Removing border from focused pivot * Create @fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json * removing TS errors * Centered detailslist checkmark, removed the !important from border on detailslist rows for Elixir * Removing empty line * Another spinbutton update to match Elixir usage * spin button was off by a few pixels in elixir * removed border from disabled action button per designs, reduced size of toggle per designs * 5.5 px border * [DatePicker] fix validationOnLoad prop is ignored (#25961) * fix: add validateOnLoad to useErrorMessage hook * add change file * [DatePicker] add test for validateOnLoad false * fix: missing variable in useEffect dependency list * fix lint error Co-authored-by: Karlo Sudec <[email protected]> * feat: Bump keyborg to 2.0.0 and tabster to 4.1.1 (#26584) * chore: Bump keyborg to 2.0.0 and tabster to 4.0.1 See title * changefile * update breaking change * deal with breaking change * bump to tabster 4.1.0 * bump 4.1.1 * revert changes to lock * feat: react-data-grid-react-window should be complete extension package (#26627) * feat: react-data-grid-react-window should be complete extension package Implements `aria-rowcount` and `aria-rowindex` support for the virtualized DataGrid. This PR also turns the package into a 'complete' extension package so that all DataGrid components are re-exported from it whether it is recomposed or not. This package should never be exported from react-components suite. * export useDataGridContextValues_unstable * changefile * remove duplicate export * remove DataGridBody tests, not a core component here * Update packages/react-components/react-table/src/components/DataGrid/useDataGridContextValues.ts * make hack nicer * update m * Update packages/react-components/react-data-grid-react-window/src/components/DataGrid/DataGrid.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * update md --------- Co-authored-by: Oleksandr Fediashov <[email protected]> * fix: react-combobox never uses Option value as a display string (#26617) Instead, `defaultValue` or `value` are required when setting `defaultSelectedOptions` or `selectedOptions` respectively. * applying package updates * feat: Initial release react-data-grid-react-window (#26731) * feat: Initial release react-data-grid-react-window Releases the package with `beta` tag since all functional requirements are implemented. * changefile * feat(react-tabster): add `unstable_hasDefault` option on `useArrowNavigationGroup` (#26732) * hasDefault * unstable * test * Revert "test" This reverts commit a2a1aee5f2d0cea83a5f770d96b272523afe1221. * update * add slash in comment * applying package updates * feat: TableCellLayout component now supports truncate prop (#26738) * feat: Release `Table` and `DataGrid` as stable (#26736) * feat: Release `Table` and `DataGrid` as stable See title * changefile * merge imports * fix * chore(react-datepicker): Remove @fluentui/react dependencies and update Field usage (#26726) * removing @fluentui/react * removing mdl2 icons initialization * adding requested changes * updating api * feat: DataGrid - resizable columns (#26690) * fix(storybook): turn off mangling on production builds to provide same output as with Terser (#26757) * fix(storybook): turn off mangling on production builds to provide same output as with Terser * chore: bump storybook-addon-export-to-codesandbox to fix swc story exports patterns * chore: prepare release react-northstar 0.66.1 (#26687) * chore: prepare release react-northstar 0.66.1 --------- Co-authored-by: Juraj Kapsiar <[email protected]> Co-authored-by: Fluent UI Build <[email protected]> * fix: keyboard navigation not working for select elements (#26612) * fix: Small mistake in docs for Avatar name prop (#26747) Fix doc comment for Avatar's name prop. * chore: Update Field Spec and Migration guide to match current implementation (#26549) Update the Spec and Migration guide to match the changes to make it a standalone component in PR #26430. * chore: Add perf tests for Field (#26603) * fix(react-utilities, react-provider): Remove colons from generated id and fix hook order error in React 18 (#26745) * change files * adding memo and fixing type of useId * chore: Update Field documentation and stories (#26599) Update Field stories and documentation for the changes to make Field a standalone component (in PR #26430), and for clarity. * chore(deps): bump http-cache-semantics from 4.1.0 to 4.1.1 (#26602) Bumps [http-cache-semantics](https://github.com/kornelski/http-cache-semantics) from 4.1.0 to 4.1.1. - [Release notes](https://github.com/kornelski/http-cache-semantics/releases) - [Commits](https://github.com/kornelski/http-cache-semantics/commits) --- updated-dependencies: - dependency-name: http-cache-semantics dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Fix svg-img-alt accessibility issue in vertical stacked bar chart (#26755) * fix svg-img-alt accessibility issue in vertical stacked bar chart * add change file * applying package updates * Fixing wrong link hover value (#26778) * Fixing value to show on link hover * Change file * Tree Item Layout & Persona Layout stories and styles (#26630) * stories * laoyut * stories update * remove prettier edited packages * remove changes by prettier * handle expand collapse only * default open tree * expand collapse * fix layout * Update LineChart.base.tsx * Update getFocusStyle.ts * Update TreeExpandCollapseIconOnly.stories.tsx --------- Co-authored-by: Petr Duda <[email protected]> * feat: Add `overflowBoundaryPadding` positioning prop (#26730) * feat: Add `overflowBoundaryPadding` positioning prop Introduces the `overflowBoundaryPadding` prop that will define a padding so that the positioned element will never hit the boundary. The prop can be used either as a single number shorthand or an object that uses logical sides. * changefile * add tests for toFloatingUIPadding * add documentation * revert d3 change * don't set padding if it's not used * put limitShift back * update story name * update story naming * fix story description * remove unstable_disableTether from public API * docs: Styling Component (v9) now introduces shorthands (#26773) * chore: bump storybook-addon-export-to-codesandbox to 0.8.4 (#26787) * Restore minimum width of Details List rows to be that of the container (#24096) * Remove override row width style to fix DetailsList layouts * Update snapshots * chore: better documentation for home/end behavior (#26724) - Adds test cases for home/end hotkeys - Updates "bounds" story with information about home/end - Updates "default" story to include min/max props so home/end behavior is observable - Changes the "keys" import for better tree-shaking * Initialize package for storybook full source code babel preset (#26781) * Initialize package for storybook full source code babel preset Preparing to move storybook codesandbox code to monorepo Addresses #26780 * api md * fix: handle single digit text input in SpinButton (#26789) Previously the internal state for handling SpinButton text input would only be updated after the second value was typed by a user. This lead to a bug where state would not be committed in some cases when a user typed just a single value, e.g., "2". * Coachmark reposition on page resize (#26725) * re-render and re-calculate bounds when page resizes * change * applying package updates * applying package updates * fix: MenuList is a single tabstop (#26803) * fix: MenuList is a single tabstop Since Menu needs to handle tab because it is a positionined element in a Portal, the MenuList does not need to. Disabling tabster's default handling for Tab in MenuList broke tabbing in that components. Fixes this by only disabling tabster's Tab behaviour when the MenuList is wrapped by a Menu. * changefile * fix snapshot * Port babel storybook full source plugin (#26790) * Port babel storybook full source plugin Ports the plugin from https://github.com/microsoft/fluentui-storybook-addons/blob/main/storybook-addon-export-to-codesandbox/src/plugins/fullsource.ts Addresses #26781 * caret for prettier * refactor to avoid code churn * eslint pragma * fix syncpack * fix deps * Initialize react-storybook-addon-codesandbox package (#26783) * Initialize react-storybook-addon-codesandbox package Preparing to move storybook codesandbox code to monorepo Addresses #26781 * Update workspace.json Co-authored-by: Martin Hochel <[email protected]> --------- Co-authored-by: Martin Hochel <[email protected]> * chore(beachball): add more ignore patterns to mitigate unwanted change file generation (#26807) * fix(scripts-format): make prettier fail process instead of silently failing (#26806) * fix(scripts-format): make prettier fail process instead of silently failing * feat(scripts-format): make prettier not fail on huge file lists with --since * chore: update prettierignore * style: fix formatting in files that were silently passed previously * generate change files * fixup! style: fix formatting in files that were silently passed previously * chore: update tooling setup for wc-3 after master update * chore: remove change files from master * chore(beachball): scope config only to web-components to be able to merge master udates * fix(ci) resolve issues reported by check-packages job * chore(stress-test): fix bad conflict resolution --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Fluent UI Build <[email protected]> Co-authored-by: Sarah Higley <[email protected]> Co-authored-by: Ben Howell <[email protected]> Co-authored-by: ling1726 <[email protected]> Co-authored-by: Micah Godbolt <[email protected]> Co-authored-by: tomi-msft <[email protected]> Co-authored-by: Jacqueline Gaherity <[email protected]> Co-authored-by: Jeff Smith <[email protected]> Co-authored-by: Sean Monahan <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Tristan Watanabe <[email protected]> Co-authored-by: Geoff Cox (Microsoft) <[email protected]> Co-authored-by: Marcos Moura <[email protected]> Co-authored-by: Esteban Munoz Facusse <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Bernardo Sunderhus <[email protected]> Co-authored-by: chajun <[email protected]> Co-authored-by: Amber <[email protected]> Co-authored-by: Jiří Vyhnálek <[email protected]> Co-authored-by: Juraj Kapsiar <[email protected]> Co-authored-by: Juraj Kapsiar <[email protected]> Co-authored-by: Sunil Surana <[email protected]> Co-authored-by: Humberto Makoto Morimoto Burgos <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: Valentina <[email protected]> Co-authored-by: Miroslav Stastny <[email protected]> Co-authored-by: Miroslav Stastny <[email protected]> Co-authored-by: Silviu Alexandru Avram <[email protected]> Co-authored-by: Mitch-At-Work <[email protected]> Co-authored-by: Javier Escobar-Avila <[email protected]> Co-authored-by: Connie Chen <[email protected]> Co-authored-by: Arthur Almeida (Tuka) <[email protected]> Co-authored-by: Martin Trobäck <[email protected]> Co-authored-by: Marwan Fikrat <[email protected]> Co-authored-by: Mason Tejera <[email protected]> Co-authored-by: krkshitij <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Hensorskyy <[email protected]> Co-authored-by: Volodymyr Hensorskyi <[email protected]> Co-authored-by: David Zearing <[email protected]> Co-authored-by: C. Perez <[email protected]> Co-authored-by: Jiří Vyhnálek <[email protected]> Co-authored-by: Desen Meng <[email protected]> Co-authored-by: Karlo Sudec <[email protected]> Co-authored-by: Karlo Sudec <[email protected]> Co-authored-by: Karan Kakroo <[email protected]> Co-authored-by: ankityadav4 <[email protected]> Co-authored-by: Amber <[email protected]> Co-authored-by: Petr Duda <[email protected]> Co-authored-by: Petr Duda <[email protected]> Co-authored-by: Thomas Michon <[email protected]>
* Adds basic implementation of Spinner component * Adds inverted Story to Spinner * Cleans up some typos * Generates API report * Adds change file * Removes kebab-case for key in Spinner in favor of camelCase; Adds spinner export to package.json; Properly comments spinner options with type docs * Address feedback in PR * Minor typo cleanup * Rebuilds
…t#26844) * update fast element and foundation versions and update reference to extend badge options * no options export yet for badge :(
…up/DX (microsoft#26843) * chore(web-components): implement ts path aliases setup with valid ts compilation * chore(web-components): refactor test setup and test/sb utils approach * fix(web-components): tweak npmignore to not ship non relevant assets * chore: re-generate api-report * generate change file * fixup! chore(web-components): refactor test setup and test/sb utils approach
brianchristopherbrady
requested review from
a team,
GeoffCoxMSFT,
marcosmoura,
sopranopillow,
tomi-msft,
spmonahan,
micahgodbolt,
smhigley,
behowell,
khmakoto,
dzearing,
Jacqueline-ms,
robtaft-ms,
Hirse,
JustSlone,
jurokapsiar and
tudorpopams
as code owners
May 6, 2024 22:02
radium-v
force-pushed
the
web-components-v3
branch
2 times, most recently
from
May 10, 2024 18:22
8f49a44
to
cb6fdf3
Compare
@brianchristopherbrady please update your PR to point to master following this guide: #31361 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Removal the dependency on the FAST Foundation's Select component. Instead, integrated the necessary code directly into our project. This change aims to enhance control over the component's functionality and streamline its integration with our existing codebase.
Dropdown
Design Spec
Link to Dropdown Design Spec in Figma
Engineering Spec
The Fluent WC3 Dropdown is a form associated component that extends from the FAST Select FAST Select and is intended to be as close to the Fluent UI React 9 Dropdown implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.
Class:
Dropdown
Component Name:
fluent-dropdown
Superclass
FormAssociatedSelect
@microsoft/fast-foundation
Static Fields
slottedOptionFilter
Fields
appearance
{ outline: 'outline', underline: 'underline', filledDarker: 'filled-darker', filledLighter: 'filled-lighter' }
outline
cleanup
() => void
disabled
boolean
displayValue
string
length
number
multiple
boolean
open
boolean
false
options
FlunetListboxOption[]
proxy
selectedIndex
number
-1
selectedOptions
FluentListboxOption[]
[]
size
number
control-size
{ small: 'small', medium: 'medium', large: 'large' }
value
string
Attributes
appearance
disabled
multiple
open
control-size
Methods
selectFirstOption
void
setPositioning
void
setSelectedOptions
Events
change
input
CSS Parts
control
indicator
listbox
selected-value
Slots
button-container
content
end
indicator
selected-value
Suggested Template
selectTemplate
from FastFoundationAccessibility
W3 Select Spec
WAI-ARIA Roles, States, and Properties
<fluent-dropdown>
aria-activedescendant
aria-controls
aria-expanded
aria-haspopup
listbox
current-value
role
combobox
tabindex
0
<div class="listbox".. />
role
listbox
Preparation
Fluent Web Component v3 v.s Fluent React 9
Component and Slot Mapping
<Dropdown>
<fluent-dropdown>
<Option>
<fluent-option>
Additional Deltas and Future Work
Persona
Component - ThePersona
component which can be used inside anOption
to create additional styling for options is available in FUIRv9 but not yet in the FUI WC3 component library.Option Grouping - Our dropdown component currently does not support option grouping. In order to provide this functionality, we need to add support for grouped options to the FAST implimentation.