Skip to content

Conversation

@YuanboXue-Amber
Copy link
Contributor

Previous Behavior

When tag has secondary text, the primary text has margin-top: -2px, which overlaps with the tag border under windows high contrast:
Screenshot 2023-08-23 at 17 38 48

New Behavior

Add a pseudo element to draw the border
Screenshot 2023-08-23 at 17 38 24

@YuanboXue-Amber YuanboXue-Amber marked this pull request as ready for review August 23, 2023 15:50
@YuanboXue-Amber YuanboXue-Amber requested review from a team as code owners August 23, 2023 15:50
@codesandbox-ci
Copy link

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 9492c69:

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

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-tags-preview
Tag
25.398 kB
8.396 kB
28.65 kB
9.018 kB
3.252 kB
622 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-tags-preview
InteractionTag
11.031 kB
4.528 kB
react-tags-preview
TagGroup
69.607 kB
20.482 kB
🤖 This report was generated against 2f587c993634b895b474005705925b4e43e47aae

@size-auditor
Copy link

size-auditor bot commented Aug 23, 2023

Asset size changes

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

Baseline commit: 192b74335ed4d99dbcbeeab5aa2075409e911e1a (build)

@fabricteam
Copy link
Collaborator

🕵 fluentuiv9 No visual regressions between this PR and main

@YuanboXue-Amber YuanboXue-Amber merged commit a37c902 into microsoft:master Aug 25, 2023
@YuanboXue-Amber YuanboXue-Amber deleted the tag-hc branch August 25, 2023 10:20
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (23 commits)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  Focus indicator bug in bar charts (microsoft#28414)
  Pie chart focus spacing (microsoft#28504)
  applying package updates
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (24 commits)
  feat(react-motion): add useMotion hook (microsoft#28699)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  Focus indicator bug in bar charts (microsoft#28414)
  Pie chart focus spacing (microsoft#28504)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (24 commits)
  feat(react-motion): add useMotion hook (microsoft#28699)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  Focus indicator bug in bar charts (microsoft#28414)
  Pie chart focus spacing (microsoft#28504)
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 28, 2023
* master: (26 commits)
  chore: Make triage bot add needs triage label to new issues (microsoft#28994)
  fix(react-tags-preview): use regular icon for dismiss (microsoft#28958)
  feat(react-motion): add useMotion hook (microsoft#28699)
  feat: add closeOnIframeFocus prop to Popover (microsoft#28881)
  chore: updates .devcontainer to follow new format (microsoft#28990)
  Line Chart and Area Chart - Component tests (microsoft#28235)
  applying package updates
  28576 small button is using 3px border radius (microsoft#28589)
  In PeoplePicker, we can now use arrow keys to move cursor around microsoft#28655 (microsoft#28975)
  chore: Migrate bot config to yml (microsoft#28981)
  fix(react-card): CardHeader grid layout ignoring line-height of content (microsoft#28968)
  fix(react-tags-preview): tag with secondary text has no top border under windows high contrast (microsoft#28963)
  applying package updates
  feat(Stack): Add deprecated flag to render null when receiving a falsy value (microsoft#28978)
  feat(react-infobutton): Add inline prop to InfoButton and make it inline by default (microsoft#28605)
  fix(Dialog): Add displayName for dialog footer and content (microsoft#28939)
  Revert "Keytips: Align keytipData with visible instance for dupes" (microsoft#28977)
  Vertical stacked bar chart - Component tests (microsoft#28594)
  docs: update drawer spec to be inline with changes to component (microsoft#28934)
  Table/DataGrid: fix visuals for overflow (microsoft#28940)
  ...
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.

3 participants