Skip to content

Conversation

@EdDaWord
Copy link
Contributor

@EdDaWord EdDaWord commented Apr 23, 2024

Previous Behavior

react fluentui dev__path=_docs_components-teachingpopover--default (1)

The arrow is off by 1px
image

New Behavior

localhost_3000__path=_docs_components-teachingpopover--default

The arrow is no longer off by 1px
image

Related Issue(s)

Previously the ...shorthands.borderWidth('0px'), was introduced here: #30270

It was done so because the items within the TeachingPopoverSurface did not align:
Screenshot 2024-04-23 at 4 10 15 PM

By changing the boxSizing from 'border-box' to 'content-box'
image

open questions?

  • Not sure if this is the right way to do things. Open to suggestions.

@EdDaWord EdDaWord added the Draft label Apr 23, 2024
@EdDaWord EdDaWord requested review from a team and Mitch-At-Work as code owners April 23, 2024 23:12
@mltejera
Copy link
Contributor

Think you'll need to create a change file:

Before creating a pull request, be sure to run `yarn change` and provide a high-level description of your change, which will be used in the release notes. We follow [semantic versioning](https://semver.org/), so use the guide when selecting a change type:

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 23, 2024

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 630 667 5000
Button mount 295 303 5000
Field mount 1127 1111 5000
FluentProvider mount 697 718 5000
FluentProviderWithTheme mount 77 81 10
FluentProviderWithTheme virtual-rerender 31 37 10
FluentProviderWithTheme virtual-rerender-with-unmount 75 79 10
MakeStyles mount 856 863 50000
Persona mount 1803 1734 5000
SpinButton mount 1396 1388 5000
SwatchPicker mount 1534 1532 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 23, 2024

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.

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 23, 2024

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.099 MB
266.94 kB
1.098 MB
266.861 kB
-243 B
-79 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
71.104 kB
20.52 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
221.203 kB
62.464 kB
react-components
react-components: FluentProvider & webLightTheme
43.591 kB
14.356 kB
react-portal-compat
PortalCompatProvider
7.944 kB
2.588 kB
🤖 This report was generated against 6eca2852f9ecc7fc5cad78020fa257e39b77a980

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 23, 2024

🕵 fluentuiv9 No visual regressions between this PR and main

Change TeachingPopoverSurface boxSizing to account for shadow borders to help fix arrow placement.

Address PR feedback

Address PR Feedback

Change TeachingPopoverSurface boxSizing to account for shadow borders to help fix arrow placement
@EdDaWord EdDaWord force-pushed the edwardwang/fix-teaching-popover-arrow-visual-bug branch from 0045857 to a5a52e0 Compare April 26, 2024 14:12
@EdDaWord EdDaWord changed the title Fix visual issue where TeachingPopover arrow is one pixel off Fix: visual issue where TeachingPopover arrow is one pixel off Apr 26, 2024
@EdDaWord EdDaWord changed the title Fix: visual issue where TeachingPopover arrow is one pixel off fix: visual issue where TeachingPopover arrow is one pixel off Apr 26, 2024
@EdDaWord EdDaWord removed the Draft label Apr 26, 2024
@EdDaWord EdDaWord changed the title fix: visual issue where TeachingPopover arrow is one pixel off fix: TeachingPopover arrow off by a pixel Apr 26, 2024
Copy link
Contributor

@Mitch-At-Work Mitch-At-Work left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Let's put a slightly more descriptive changelog comment then good to go

@EdDaWord EdDaWord merged commit c4d020d into microsoft:master Apr 26, 2024
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request Jun 14, 2024
Co-authored-by: Edward Wang <edwardwang@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants