feat(react-drawer): create DrawerBody component by marcosmoura · Pull Request #27581 · microsoft/fluentui

marcosmoura · 2023-04-17T01:01:18Z

Implements the DrawerBody component that is part of the react-drawer package.

fabricteam · 2023-04-17T01:12:17Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`86.012 kB` `26.086 kB`
`react-alert` Alert	`93.799 kB` `22.502 kB`
`react-avatar` Avatar	`57.564 kB` `14.976 kB`
`react-avatar` AvatarGroup	`15.632 kB` `6.258 kB`
`react-avatar` AvatarGroupItem	`73.778 kB` `19.491 kB`
`react-badge` Badge	`23.512 kB` `7.197 kB`
`react-badge` CounterBadge	`24.416 kB` `7.506 kB`
`react-badge` PresenceBadge	`31.904 kB` `8.296 kB`
`react-button` Button	`37.179 kB` `9.534 kB`
`react-button` CompoundButton	`44.328 kB` `11.016 kB`
`react-button` MenuButton	`41.866 kB` `10.861 kB`
`react-button` SplitButton	`50.254 kB` `12.441 kB`
`react-button` ToggleButton	`55.397 kB` `11.435 kB`
`react-card` Card - All	`86.061 kB` `24.345 kB`
`react-card` Card	`80.997 kB` `22.895 kB`
`react-card` CardFooter	`9.158 kB` `3.844 kB`
`react-card` CardHeader	`11.048 kB` `4.538 kB`
`react-card` CardPreview	`9.963 kB` `4.192 kB`
`react-checkbox` Checkbox	`34.216 kB` `10.784 kB`
`react-combobox` Combobox (including child components)	`87.199 kB` `28.095 kB`
`react-combobox` Dropdown (including child components)	`85.583 kB` `27.692 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`65.31 kB` `17.931 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`204.34 kB` `57.141 kB`
`react-components` react-components: FluentProvider & webLightTheme	`36.086 kB` `11.9 kB`
`react-datepicker-compat` DatePicker Compat	`220.251 kB` `58.471 kB`
`react-dialog` Dialog (including children components)	`90.867 kB` `27.047 kB`
`react-divider` Divider	`17.399 kB` `6.298 kB`
`react-field` Field	`18.864 kB` `7.004 kB`
`react-image` Image	`11.479 kB` `4.573 kB`
`react-infobutton` InfoButton	`127.925 kB` `39.003 kB`
`react-infobutton` InfoLabel	`131.208 kB` `39.996 kB`
`react-input` Input	`23.972 kB` `7.676 kB`
`react-label` Label	`10.104 kB` `4.185 kB`
`react-link` Link	`12.357 kB` `5.091 kB`
`react-menu` Menu (including children components)	`128.202 kB` `39.18 kB`
`react-menu` Menu (including selectable components)	`131.186 kB` `39.696 kB`
`react-persona` Persona	`64.485 kB` `16.9 kB`
`react-popover` Popover	`114.917 kB` `35.388 kB`
`react-portal` Portal	`11.649 kB` `4.262 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.186 kB`
`react-positioning` usePositioning	`24.008 kB` `8.798 kB`
`react-progress` ProgressBar	`13.856 kB` `5.434 kB`
`react-provider` FluentProvider	`18.033 kB` `6.666 kB`
`react-radio` Radio	`27.282 kB` `8.661 kB`
`react-radio` RadioGroup	`11.312 kB` `4.71 kB`
`react-select` Select	`25.357 kB` `8.798 kB`
`react-slider` Slider	`34.112 kB` `11.018 kB`
`react-spinbutton` SpinButton	`33.882 kB` `10.325 kB`
`react-spinner` Spinner	`20.882 kB` `6.798 kB`
`react-switch` Switch	`29.806 kB` `9.274 kB`
`react-table` DataGrid	`147.659 kB` `40.567 kB`
`react-table` Table (Primitives only)	`44.348 kB` `12.347 kB`
`react-table` Table as DataGrid	`130.218 kB` `33.128 kB`
`react-table` Table (Selection only)	`78.132 kB` `19.127 kB`
`react-table` Table (Sort only)	`77.462 kB` `18.939 kB`
`react-text` Text - Default	`12.492 kB` `4.92 kB`
`react-text` Text - Wrappers	`15.624 kB` `5.232 kB`
`react-textarea` Textarea	`27.399 kB` `9.041 kB`
`react-tooltip` Tooltip	`46.656 kB` `16.369 kB`

_{🤖 This report was generated against f0b05741d812ad90c52754b0b4035d5554cf2aa0}

codesandbox-ci · 2023-04-17T01:16:37Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 83cf470:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2023-04-17T01:17:21Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: f0b05741d812ad90c52754b0b4035d5554cf2aa0 (build)

packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx

packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyBestPractices.md

packages/react-components/react-drawer/tsconfig.lib.json

* master: (58 commits) fix(react-datepicker-compat): Make onValidationError onValidationResult so the error is updated when there's no longer an error (microsoft#27655) Fix `@fluentui/react-portal-compat`: to be compatible with React 18 (microsoft#27577) chore: fix versions of @fluentui/react-datepicker-compat (microsoft#27666) applying package updates applying package updates Make line chart screen reader accessible (microsoft#27632) fix(react-examples): Improve keyboard navigation in ContextualMenu.CustomMenuList (microsoft#25172) docs(react-textarea): Update examples to use Field (microsoft#27644) bugfix(react-dialog): `DialogTitle` root as `h2` by default (microsoft#27555) applying package updates chore: restructure stories, add separate category for flat tree (microsoft#27586) fix document link (microsoft#27499) fix(react): exclude React.HTMLAttributes defined `content` prop for Tooltip and TooltipHost Prop types to mitigate @types/react breaking changes (microsoft#27467) chore(react-tabs): adopts custom JSX pragma (microsoft#27640) fix: ContextualMenuSplitButton always sets aria-checked (does not leave it undefined) when it is checkable (microsoft#27650) feat(react-datepicker-compat): Move DatePicker compat to stable (microsoft#27378) bugfix(react-tree): fix parent navigation after independency from id (microsoft#27642) applying package updates feat(react-datepicker-compat): Add error handling to DatePicker and update popup's padding (microsoft#27637) feat(public-docsite): Add banner to React component pages to promote v9 (microsoft#27557) ...

* master: applying package updates microsoft#25730: TimePicker Default Value Fix, Controllable Usage, Example Updates (microsoft#26482) docs(react-datepicker-compat): Add description to README.md (microsoft#27677) Updated to use single hook selector (microsoft#27491) fix: Make border around Avatar's badge transparent using a mask (microsoft#27527) Disable focus on non-interactive elements (microsoft#27580) feat(react-drawer): implement "prevent close on click outside" feature (microsoft#27551)

fabricteam · 2023-05-02T21:21:06Z

🕵 fluentuiv9 No visual regressions between this PR and main

packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx

change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json

packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts

packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts

packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts

* master: feat(react-drawer): create DrawerBody component (microsoft#27581) feat(react-tree): TreeItem itemType restructure (microsoft#27799) feat: Implement state management for toasts (microsoft#27800) bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802) fix: overflowManager should always dispatch initial state (microsoft#27756) fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780) react-tags: rename dismissable to dismissible (microsoft#27798) chore: update ownership of react-tags (microsoft#27795) applying package updates feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725) RFC appearance migration (microsoft#24181) chore(react-skeleton): Release react-skeleton to stable (microsoft#27767) fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782) applying package updates fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769)

* feat/drawer-header: fix: add changefiles feat(react-drawer): create DrawerBody component (microsoft#27581) feat(react-tree): TreeItem itemType restructure (microsoft#27799) feat: Implement state management for toasts (microsoft#27800) bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802) fix: overflowManager should always dispatch initial state (microsoft#27756) fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780) react-tags: rename dismissable to dismissible (microsoft#27798) chore: update ownership of react-tags (microsoft#27795) applying package updates feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725) RFC appearance migration (microsoft#24181) chore(react-skeleton): Release react-skeleton to stable (microsoft#27767) fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782) applying package updates fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769)

* master: (29 commits) feat(react-drawer): create DrawerBody component (microsoft#27581) feat(react-tree): TreeItem itemType restructure (microsoft#27799) feat: Implement state management for toasts (microsoft#27800) bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802) fix: overflowManager should always dispatch initial state (microsoft#27756) fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780) react-tags: rename dismissable to dismissible (microsoft#27798) chore: update ownership of react-tags (microsoft#27795) applying package updates feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725) RFC appearance migration (microsoft#24181) chore(react-skeleton): Release react-skeleton to stable (microsoft#27767) fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782) applying package updates fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769) applying package updates fix: do not use outlineStyle: none in createCustomFocusIndicatorStyle (microsoft#26089) fix: Scale pulse animation with percentages and flip wave animation's direction (microsoft#27654) Publish dist folder that got removed due to node 16 upgrade (microsoft#27764) fix(scripts-update-release-notes): properly handle git for-each-ref cmd call to not fail release notes update (microsoft#27757) ...

msft-fluent-ui-bot · 2023-05-15T07:45:28Z

🎉@fluentui/react-shared-contexts@v9.4.0 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2023-05-15T07:46:16Z

🎉@fluentui/react-provider@v9.6.0 has been released which incorporates this pull request.:tada:

Handy links:

feat(react-drawer): create body component

35148a5

msft-fluent-ui-bot assigned smhigley Apr 17, 2023

marcosmoura force-pushed the feat/drawer-components branch from 2936f73 to 35148a5 Compare April 17, 2023 01:04

marcosmoura changed the title ~~feat(react-drawer): header, body and components~~ feat(react-drawer): body component Apr 17, 2023

marcosmoura marked this pull request as ready for review April 17, 2023 14:04

marcosmoura requested review from a team as code owners April 17, 2023 14:04

marcosmoura changed the title ~~feat(react-drawer): body component~~ feat(react-drawer): DrawerBody component Apr 17, 2023

Merge branch 'master' into feat/drawer-components

ca1a90f

tudorpopams requested review from Hotell and ValentinaKozlova April 18, 2023 12:06

marcosmoura added 3 commits April 18, 2023 14:21

Merge branch 'master' into feat/drawer-components

8a1bafc

fix: remove .cy files from lib config

49e55d3

fix: remove .cy files from lib config

ca1a06e

Hotell reviewed Apr 18, 2023

View reviewed changes

marcosmoura assigned marcosmoura and unassigned smhigley Apr 19, 2023

ValentinaKozlova approved these changes Apr 25, 2023

View reviewed changes

marcosmoura requested a review from a team as a code owner April 25, 2023 12:19

marcosmoura force-pushed the feat/drawer-components branch from 0421b5f to e98fc9e Compare April 25, 2023 12:27

marcosmoura removed the request for review from a team April 25, 2023 12:28

marcosmoura added 4 commits April 25, 2023 14:29

fix: remove conflict code leftover

aee85b9

docs: remove TODO marks

b61d019

docs: add TODO indicator

2190a1f

Merge branch 'master' into feat/drawer-components

13b2226

marcosmoura added 8 commits April 27, 2023 16:02

feat: add support to override drawer styles

7035ce5

feat: add style overrides for upcoming drawer components

bf14755

docs: update API

b2c81eb

Merge branch 'master' into feat/drawer-components

8547ea6

docs: update API

355e444

Merge branch 'master' into feat/drawer-components

4b6570f

Merge branch 'master' into feat/drawer-components

9ff3422

fix: add missing change file

d287cbb

marcosmoura mentioned this pull request May 2, 2023

Drawer #26420

Closed

46 tasks

Hotell reviewed May 3, 2023

View reviewed changes

packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx Outdated Show resolved Hide resolved

Hotell reviewed May 3, 2023

View reviewed changes

packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx Outdated Show resolved Hide resolved

Hotell reviewed May 3, 2023

View reviewed changes

change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json Outdated Show resolved Hide resolved

Hotell reviewed May 3, 2023

View reviewed changes

change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json Outdated Show resolved Hide resolved

marcosmoura added 2 commits May 3, 2023 15:09

test: merge tests

c195885

fix: add changefiles

83cf470

ling1726 reviewed May 4, 2023

View reviewed changes

packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts Show resolved Hide resolved

ling1726 reviewed May 4, 2023

View reviewed changes

packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts Show resolved Hide resolved

ling1726 reviewed May 4, 2023

View reviewed changes

packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts Show resolved Hide resolved

ling1726 reviewed May 4, 2023

View reviewed changes

packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts Show resolved Hide resolved

micahgodbolt approved these changes May 8, 2023

View reviewed changes

ling1726 approved these changes May 10, 2023

View reviewed changes

marcosmoura changed the title ~~feat(react-drawer): DrawerBody component~~ feat(react-drawer): create DrawerBody component May 10, 2023

marcosmoura merged commit 3a90443 into microsoft:master May 10, 2023

marcosmoura deleted the feat/drawer-components branch May 10, 2023 13:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-drawer): create DrawerBody component#27581

feat(react-drawer): create DrawerBody component#27581
marcosmoura merged 27 commits intomicrosoft:masterfrom
marcosmoura:feat/drawer-components

marcosmoura commented Apr 17, 2023 •

edited

Loading

Uh oh!

fabricteam commented Apr 17, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Apr 17, 2023 •

edited

Loading

Uh oh!

size-auditor bot commented Apr 17, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fabricteam commented May 2, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

msft-fluent-ui-bot commented May 15, 2023

Uh oh!

msft-fluent-ui-bot commented May 15, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

Conversation

marcosmoura commented Apr 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Apr 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci bot commented Apr 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor bot commented Apr 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fabricteam commented May 2, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

msft-fluent-ui-bot commented May 15, 2023

Uh oh!

msft-fluent-ui-bot commented May 15, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

marcosmoura commented Apr 17, 2023 •

edited

Loading

fabricteam commented Apr 17, 2023 •

edited

Loading

codesandbox-ci bot commented Apr 17, 2023 •

edited

Loading

size-auditor bot commented Apr 17, 2023 •

edited

Loading

fabricteam commented May 2, 2023 •

edited

Loading