Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix(Popup): remove rotate(360deg) from PopupContent content styles #24432

Merged
merged 4 commits into from
Sep 8, 2022
Merged

fix(Popup): remove rotate(360deg) from PopupContent content styles #24432

merged 4 commits into from
Sep 8, 2022

Conversation

YuanboXue-Amber
Copy link
Contributor

@YuanboXue-Amber YuanboXue-Amber commented Aug 19, 2022 •
edited
Loading

Description

Remove transform: rotate(360deg) from popup content.
This style is reported to cause text blurry in TMP. I couldn't repro nor figure out the reason for blurry text 🤷‍♀️. But looking at this style, I don't see why it should be there in the first place. So in the end I decide to remove it.

⚠️ This change can cause tiny shifts in UI

See the below example, add/remove the transform: rotate(360deg) style shifts the yellow dots for a little bit:
(I think this happens due to how browser calculates rotate. There maybe floating number involved)
mHWnTZmMqy

Source for the above example:

<!DOCTYPE html>
<html>
  <head>
    <title>example</title>
    <meta charset="UTF-8" />
    <style>
      #root {
        position: relative;
        border: 5px solid orange;
        height: 400px;
        width: 400px;
        background: darkcyan;
        margin-top: 201.3px;
      }
      .test-container {
        position: absolute;
        box-sizing: border-box;
        top: 31.07px;
        left: 29.53px;
        height: 313.5px;
        width: 200px;
        border: 10px solid red;
        display: flex;
        align-items: center;
      }
      .rotate {
        border: 10px dotted green;
        /* comment out this line to see yellow dots shift its position */
        transform: rotate(360deg);
      }
      .test-child {
        height: 100px;
        width: 100px;
        border: 20px solid blue;
      }
      .child-in-rotate {
        height: 100px;
        width: 100px;
        border: 20px dotted yellow;
      }
    </style>
  </head>

  <body>
    <div id="root">
      <div class="test-container">
        <div class="test-child"></div>
      </div>
      <div class="test-container rotate">
        <div class="test-child child-in-rotate"></div>
      </div>
    </div>
  </body>
</html>

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 19, 2022 •
edited
Loading

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 fe08e03:

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

@size-auditor
Copy link

size-auditor bot commented Aug 19, 2022 •
edited
Loading

Asset size changes

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

Baseline commit: aa1b9dd77b36fe633d64430db0292af546bbe35c (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 19, 2022 •
edited
Loading

📊 Bundle size report

🤖 This report was generated against aa1b9dd77b36fe633d64430db0292af546bbe35c

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 19, 2022 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 245 219 1.12:1
TreeWith60ListItems.default 202 182 1.11:1
ChatDuplicateMessagesPerf.default 325 298 1.09:1
AccordionMinimalPerf.default 172 160 1.08:1
BoxMinimalPerf.default 389 363 1.07:1
FlexMinimalPerf.default 339 324 1.05:1
AlertMinimalPerf.default 301 290 1.04:1
ButtonOverridesMissPerf.default 1494 1438 1.04:1
ChatWithPopoverPerf.default 432 414 1.04:1
GridMinimalPerf.default 394 380 1.04:1
HeaderMinimalPerf.default 414 398 1.04:1
ImageMinimalPerf.default 465 449 1.04:1
LabelMinimalPerf.default 434 418 1.04:1
ListNestedPerf.default 643 616 1.04:1
ToolbarMinimalPerf.default 1062 1023 1.04:1
ButtonSlotsPerf.default 618 601 1.03:1
DialogMinimalPerf.default 879 855 1.03:1
DropdownManyItemsPerf.default 794 774 1.03:1
HeaderSlotsPerf.default 885 858 1.03:1
LayoutMinimalPerf.default 418 407 1.03:1
SkeletonMinimalPerf.default 383 371 1.03:1
TextMinimalPerf.default 376 365 1.03:1
TreeMinimalPerf.default 894 868 1.03:1
CarouselMinimalPerf.default 521 509 1.02:1
ChatMinimalPerf.default 814 797 1.02:1
ItemLayoutMinimalPerf.default 1332 1307 1.02:1
ListWith60ListItems.default 691 679 1.02:1
MenuMinimalPerf.default 968 952 1.02:1
PopupMinimalPerf.default 695 682 1.02:1
PortalMinimalPerf.default 170 167 1.02:1
ProviderMergeThemesPerf.default 1335 1314 1.02:1
ProviderMinimalPerf.default 428 420 1.02:1
ReactionMinimalPerf.default 420 411 1.02:1
SegmentMinimalPerf.default 394 385 1.02:1
TableMinimalPerf.default 452 442 1.02:1
ButtonMinimalPerf.default 192 191 1.01:1
CardMinimalPerf.default 648 644 1.01:1
EmbedMinimalPerf.default 4110 4064 1.01:1
InputMinimalPerf.default 1251 1234 1.01:1
RadioGroupMinimalPerf.default 515 510 1.01:1
TableManyItemsPerf.default 2212 2189 1.01:1
TextAreaMinimalPerf.default 555 549 1.01:1
TooltipMinimalPerf.default 2580 2552 1.01:1
AttachmentSlotsPerf.default 1228 1230 1:1
CheckboxMinimalPerf.default 2342 2334 1:1
DatepickerMinimalPerf.default 6333 6316 1:1
DropdownMinimalPerf.default 2931 2920 1:1
ListCommonPerf.default 724 721 1:1
LoaderMinimalPerf.default 744 742 1:1
MenuButtonMinimalPerf.default 1916 1917 1:1
RefMinimalPerf.default 225 224 1:1
SplitButtonMinimalPerf.default 4895 4892 1:1
CustomToolbarPrototype.default 2817 2823 1:1
DividerMinimalPerf.default 384 389 0.99:1
IconMinimalPerf.default 775 785 0.99:1
AnimationMinimalPerf.default 572 583 0.98:1
ListMinimalPerf.default 568 582 0.98:1
RosterPerf.default 2397 2434 0.98:1
SliderMinimalPerf.default 1738 1766 0.98:1
AttachmentMinimalPerf.default 167 172 0.97:1
StatusMinimalPerf.default 746 766 0.97:1
VideoMinimalPerf.default 847 877 0.97:1
FormMinimalPerf.default 425 463 0.92:1

@YuanboXue-Amber YuanboXue-Amber changed the title [DRAFT] test screener fix(Popup): remove rotate(360deg) from PopupContent content styles Aug 22, 2022
@YuanboXue-Amber YuanboXue-Amber marked this pull request as ready for review August 23, 2022 10:24
@YuanboXue-Amber YuanboXue-Amber requested a review from a team as a code owner August 23, 2022 10:24
@YuanboXue-Amber YuanboXue-Amber enabled auto-merge (squash) September 8, 2022 15:45
@YuanboXue-Amber YuanboXue-Amber merged commit dd50411 into microsoft:master Sep 8, 2022
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 9, 2022
@marcosmoura
Merge branch 'master' into marcosmoura/feat/selectable-cards
921d7d1 
* master: (63 commits)
  feat: add helper types to assist DOM element handling (microsoft#24722)
  applying package updates
  Textarea/hc bug (microsoft#24701)
  Fix null ref in use slider (microsoft#24728)
  Add Field unit tests, and remove snapshot tests (microsoft#24706)
  Stress Test: add build commands (microsoft#24575)
  Coachmark - useOffsetHeight should cause re-render on each set state to match v7 functionality (microsoft#24702)
  Implement screener tests for Field components (microsoft#24684)
  Update Field types to clean up react-field.api.md (microsoft#24703)
  fix(Popup): remove rotate(360deg) from PopupContent content styles (microsoft#24432)
  fix(FocusZone): should reset tabindex when focus is outside the zone with prop `shouldResetActiveElementWhenTabFromZone` (microsoft#24463)
  Fix greyed out legend key contrast ratio (microsoft#24714)
  fix: Portal compat should apply `focus-visible` ponyfill (microsoft#24712)
  Fix artifact error (microsoft#24717)
  chore(react-dialog): remove localShorthands in favor of griffel shorthands (microsoft#24715)
  Skip screener checks for draft PRs with exception of appropriately la… (microsoft#24694)
  fix: Remove provider classname from focus styles (microsoft#24710)
  feat: autocontrolled `useTable` hook (microsoft#24688)
  feat: add dialog properties to getNativeElementProps (microsoft#24698)
  Using migrate rather than upgrade term (microsoft#24695)
  ...
@khmakoto khmakoto added Fluent UI react-northstar (v0) Work related to Fluent UI V0 and removed Fluent UI react-northstar labels Nov 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@layershifter layershifter layershifter approved these changes

Assignees

@layershifter layershifter

Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@YuanboXue-Amber @fabricteam @layershifter @khmakoto @msft-fluent-ui-bot