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

feat(icons): add CustomerHubIcon, OcrOffIcon, OcrOnIcon and ContactGroupCallIcon icons #12571

Merged
merged 3 commits into from
Apr 7, 2020
Merged

feat(icons): add CustomerHubIcon, OcrOffIcon, OcrOnIcon and ContactGroupCallIcon icons #12571

merged 3 commits into from
Apr 7, 2020

Conversation

mnajdova
Copy link
Contributor

@mnajdova mnajdova commented Apr 7, 2020 •
edited by layershifter

This PR will serve as a template of how should the icons be added in the @fluentui/icons-react-northstar package.

Here are the steps that developers should follow:

  1. Identify the icons which needs to be added. The collection of all processed icons can be found here: https://github.com/microsoft/fluent-ui-react/tree/master/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons
  2. Create a new file inside packages/fluentui/react-icons-northstar/src/components. The name of the file should be [IconName]Icon.tsx. For example if you want to add icon with the name user, the name should be UserIcon.tsx
  3. Follow the structure of the icons files in the following way. Say we want to add the UserIcon. Inside the file we will have something like this:
import cx from 'classnames';
import * as React from 'react';

import createSvgIcon from '../utils/createSvgIcon';
import { iconClassNames } from '../utils/iconClassNames';

const UserIcon = createSvgIcon({
  svg: ({ classes }) => (
    <svg viewBox="8 8 16 16" role="presentation" focusable="false" className={classes.svg}>
      <path
        className={cx(iconClassNames.outline, classes.outlinePart)}
        d="M13.832,17.144..."
      />
      <path
        className={cx(iconClassNames.filled, classes.filledPart)}
        d="M13.9766,22.9844h..."
      />
    </svg>
  ),
  displayName: 'UserIcon', // Note this should be the same as the filename
});

export default UserIcon; // Note this should be the same as the filename
  1. Export the file from packages/fluentui/react-icons-northstar/src/index.ts, by following the alphabetical order of the exports:
export { default as UserIcon } from './components/UserIcon';
  1. Add changelog entry that is listing all icons added in the PR, for example:

  1. Validate that the icons are exported by navigating to the All icons example on your local machine.

  2. Validate that the screener is showing only this example as a diff and the icons which you added are there and accept them.

@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Apr 7, 2020
@size-auditor
Copy link

size-auditor bot commented Apr 7, 2020

Asset size changes

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

Baseline commit: 5862f965f3b339ce7c7f8e586800cf030334fe73 (build)

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Apr 7, 2020 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 817 856 5000
Checkbox 1899 1840 5000
CheckboxBase 1368 1487 5000
ChoiceGroup 5291 5167 5000
CommandBar 11009 10364 1000
DefaultButton 989 1031 5000
DetailsRow 3488 3348 5000
DetailsRow (fast icons) 3322 3440 5000
DetailsRow without styles 3212 3021 5000
Dialog 7062 7265 5000
DocumentCardTitle with truncation 1448 1577 1000
Dropdown 2807 2851 5000
FocusZone 1581 1561 5000
IconButton 1661 1770 5000
Label 489 463 5000
Link 472 462 5000
MenuButton 1455 1525 5000
Nav 5719 5722 1000
Pivot 1374 1311 1000
PrimaryButton 1235 1279 5000
SearchBox 1519 1543 5000
Slider 1940 1913 5000
Spinner 378 416 5000
SplitButton 3029 3116 5000
Stack 477 498 5000
Stack with Intrinsic children 1157 1180 5000
Stack with Text children 4233 4254 5000
Text 399 381 5000
TextField 1758 1746 5000
Toggle 900 890 5000
button 58 56 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.61 0.5 1.22:1 2000 1227
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 586
🔧 Checkbox.Fluent 0.72 0.41 1.76:1 1000 716
🔧 Dialog.Fluent 0.43 0.19 2.26:1 5000 2153
🔧 Dropdown.Fluent 3.67 0.46 7.98:1 1000 3667
🦄 Icon.Fluent 0.01 0.05 0.2:1 5000 53
🎯 Image.Fluent 0.08 0.09 0.89:1 5000 414
🔧 Slider.Fluent 1.61 0.44 3.66:1 1000 1612
🔧 Text.Fluent 0.09 0.02 4.5:1 5000 439
🦄 Tooltip.Fluent 0.13 17.67 0.01:1 5000 646

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 172 152 1.13:1
VideoMinimalPerf.default 984 895 1.1:1
DropdownManyItemsPerf.default 1715 1579 1.09:1
PortalMinimalPerf.default 304 279 1.09:1
IconMinimalPerf.default 815 751 1.09:1
Button.Fluent 586 536 1.09:1
Image.Fluent 414 384 1.08:1
HierarchicalTreeMinimalPerf.default 1120 1056 1.06:1
LayoutMinimalPerf.default 773 727 1.06:1
StatusMinimalPerf.default 794 751 1.06:1
Icon.Fluent 53 50 1.06:1
ListMinimalPerf.default 504 481 1.05:1
TextMinimalPerf.default 425 405 1.05:1
TreeWith60ListItems.default 234 223 1.05:1
AccordionMinimalPerf.default 263 254 1.04:1
BoxMinimalPerf.default 420 404 1.04:1
CarouselMinimalPerf.default 710 683 1.04:1
HeaderSlotsPerf.default 1861 1797 1.04:1
ProviderMergeThemesPerf.default 1396 1339 1.04:1
Avatar.Fluent 1227 1179 1.04:1
DividerMinimalPerf.default 1139 1102 1.03:1
FlexMinimalPerf.default 323 314 1.03:1
ListNestedPerf.default 993 963 1.03:1
ListWith60ListItems.default 1321 1287 1.03:1
TooltipMinimalPerf.default 953 926 1.03:1
AvatarMinimalPerf.default 634 620 1.02:1
CheckboxMinimalPerf.default 3560 3506 1.02:1
LabelMinimalPerf.default 446 437 1.02:1
Dropdown.Fluent 3667 3599 1.02:1
AttachmentMinimalPerf.default 934 924 1.01:1
ChatWithPopoverPerf.default 682 674 1.01:1
DialogMinimalPerf.default 2192 2178 1.01:1
HeaderMinimalPerf.default 571 566 1.01:1
InputMinimalPerf.default 1130 1118 1.01:1
MenuButtonMinimalPerf.default 1620 1610 1.01:1
PopupMinimalPerf.default 219 217 1.01:1
TableMinimalPerf.default 700 694 1.01:1
CustomToolbarPrototype.default 3928 3904 1.01:1
TreeMinimalPerf.default 1327 1308 1.01:1
ChatMinimalPerf.default 663 666 1:1
DropdownMinimalPerf.default 3828 3833 1:1
ItemLayoutMinimalPerf.default 2292 2294 1:1
Dialog.Fluent 2153 2155 1:1
Slider.Fluent 1612 1617 1:1
AlertMinimalPerf.default 657 666 0.99:1
AnimationMinimalPerf.default 737 745 0.99:1
EmbedMinimalPerf.default 5747 5787 0.99:1
GridMinimalPerf.default 884 894 0.99:1
ImageMinimalPerf.default 420 426 0.99:1
CardMinimalPerf.default 437 448 0.98:1
ProviderMinimalPerf.default 563 576 0.98:1
RadioGroupMinimalPerf.default 564 574 0.98:1
Text.Fluent 439 449 0.98:1
Tooltip.Fluent 646 659 0.98:1
AttachmentSlotsPerf.default 3720 3820 0.97:1
SegmentMinimalPerf.default 1133 1163 0.97:1
SliderMinimalPerf.default 1565 1618 0.97:1
Checkbox.Fluent 716 740 0.97:1
LoaderMinimalPerf.default 985 1027 0.96:1
ChatDuplicateMessagesPerf.default 453 475 0.95:1
ListCommonPerf.default 1057 1111 0.95:1
ToolbarMinimalPerf.default 1179 1235 0.95:1
FormMinimalPerf.default 1031 1094 0.94:1
ReactionMinimalPerf.default 2485 2656 0.94:1
SplitButtonMinimalPerf.default 3713 3945 0.94:1
TextAreaMinimalPerf.default 3174 3367 0.94:1
ButtonSlotsPerf.default 645 697 0.93:1
MenuMinimalPerf.default 2024 2187 0.93:1
RefMinimalPerf.default 168 185 0.91:1

@mnajdova mnajdova merged commit 980321b into microsoft:master Apr 7, 2020
@bcalvery bcalvery mentioned this pull request Apr 7, 2020
Closed
DuanShaolong pushed a commit to DuanShaolong/fluentui that referenced this pull request Apr 27, 2020
@mnajdova @DuanShaolong
feat(icons): add CustomerHubIcon, OcrOffIcon, OcrOnIcon and ContactGr…
ef3b7e5 
…oupCallIcon icons (microsoft#12571)

* -added more icons

* -updated changelog

* -changelog entry
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

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@levithomason levithomason Awaiting requested review from levithomason

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

@pompomon pompomon Awaiting requested review from pompomon

Assignees

@joschect joschect

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.

None yet
4 participants
@mnajdova @msft-github-bot @layershifter @joschect