ecraig12345

ecraig12345

I'm a software engineer at Microsoft working on Fluent UI.

Member Since 8 years ago

@Microsoft,

Experience Points
106
follower
Lessons Completed
4
follow
Lessons Completed
9
stars
Best Reply Awards
42
repos

1267 contributions in the last year

Pinned
⚡ React components for building experiences for Office and Office 365.
⚡ The repository for high quality TypeScript type definitions.
⚡ TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
⚡ Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux
Activity
Nov
24
5 days ago
push

ecraig12345 push ecraig12345/office-ui-fabric-react

ecraig12345
ecraig12345

fix(ChoiceGroup): call useFocusRects to show focus outline (#20737)

ecraig12345
ecraig12345

Add aria-hidden to Label required field (#20680)

ecraig12345
ecraig12345

set checkbutton label for scrollablepane detailslist (#20738)

commit sha: c451bf74d24511f37a976800954daabf2fef67f5

push time in 5 days ago
push

ecraig12345 push microsoft/fluentui

ecraig12345
ecraig12345

Add aria-hidden to Label required field (#20680)

commit sha: a683ee69b17c667227acb71c59f609b4f1ca1ef9

push time in 5 days ago
pull request

ecraig12345 pull request microsoft/fluentui

ecraig12345
ecraig12345

Add aria-hidden to Label required field

Pull request checklist

  • Addresses an existing issue: Fixes #20591
  • Include a change request file using $ yarn change

Description of changes

This PR adds aria-hidden to the red asterisk to prevent screen readers from reading it as "star"

Focus areas to test

(optional)

Activity icon
issue

ecraig12345 issue microsoft/fluentui

ecraig12345
ecraig12345

Label needs ARIA hidden on red asterisk

This was originally opened by @yvonne-chien-ms in #20139. Splitting into separate issues for each bug logged in the original issue.

ARIA hidden on red asterisk

Current

No aria-hidden on red asterisk, which means screen reader will read out asterisk as "star".

Requested update

Use aria-hidden="true" on red asterisk, then put the required attribute on the Input/Combobox/etc itself to programmatically mark the field as required. (This may warrant a discussion.)

Priority

Normal

pull request

ecraig12345 merge to microsoft/fluentui

ecraig12345
ecraig12345

fix(ChoiceGroup): call useFocusRects to show focus outline

Pull request checklist

  • Addresses an existing issue: Fixes 12937
  • Include a change request file using $ yarn change

Description of changes

If ChoiceGroup was used entirely on its own, it does not have visible focus because it does not call useFocusRects or otherwise set focus visibility individually. This bug only shows up if it is not used together with ThemeProvider or another component that calls useFocusRects.

push

ecraig12345 push ecraig12345/office-ui-fabric-react

ecraig12345
ecraig12345

Removing cross-library export *s (#20665)

  • Adding export * rule and applying fixes.

  • First pass at linting.

  • Moving codemods back.

  • Change files

  • Updating to node 14, updating createTheme to be exported from the theme package.

  • revert upgrade.js phantom change

  • dedupe deps, update eslint-plugin-react to match, work around jsx-no-bind changes

  • Change files

  • fix syncpack

  • Adding makestyle as a devdep to codemods.

  • Change files

  • oops.

  • Revert "oops."

This reverts commit 623926a875d55a2a06458bf216284de2c098e0a7.

  • Removing rnx-kit/eslint-plugin from the root package.json since it's now in the @fluentui/eslint-plugin dependencies list.

  • Fixing dep issue.

  • Fixing Icons package to not export a const enum.

  • Update change/@fluentui-eslint-plugin-4301dbea-1be5-436e-bf0e-89ed473cd0b7.json

Co-authored-by: Elizabeth Craig [email protected] Co-authored-by: Elizabeth Craig [email protected]

commit sha: cf59ae965a25831ad4969e5cda932a4c15938a9e

push time in 5 days ago
pull request

ecraig12345 merge to microsoft/fluentui

ecraig12345
ecraig12345

fix: TS minbar test packages now work properly with Windows

Pull request checklist

~- [ ] Addresses an existing issue: Fixes #0000~ ~- [ ] Include a change request file using $ yarn change~

Description of changes

  • now using npm-which package for cross OS compatibility.
  • Related to #20719
Nov
23
6 days ago
open pull request

ecraig12345 wants to merge microsoft/fluentui

ecraig12345
ecraig12345

feat(makeStyles): add shorthand functions

Pull request checklist

  • Addresses an existing issue: Partially implements #20573
  • Include a change request file using $ yarn change

Description of changes

This PR is a first step in implementation of #20573, you can check draft PR (#20539) to see how it will be used.

This PR partially implements RFC #20573 and adds shorthand functions (other changes will come in separate PRs 💪). These functions are designed to simplify usage of CSS longhands, for example 👇

makeStyles({
  rootA: {
    ...shorthands.border("2px", "solid", "red")
  },
  rootB: {
    borderBottomWidth: "2px",
    borderLeftWidth: "2px",
    borderRightWidth: "2px",
    borderTopWidth: "2px",
    borderBottomStyle: "solid",
    borderLeftStyle: "solid",
    borderRightStyle: "solid",
    borderTopStyle: "solid",
    borderBottomColor: "red",
    borderLeftColor: "red",
    borderRightColor: "red",
    borderTopColor: "red"
  }
});

There functions are exported from @fluentui/make-styles package and re-exported in @fluentui/react-components (via @fluentui/react-make-styles:

import { shorthands } from "@fluentui/react-components";

makeStyles({
  root: {
    ...shorthands.border("2px", "solid", "red")
  }
});

Implemented functions

border, borderBottom, borderLeft, borderTop, borderRight

borderBottom("2px");
borderBottom("2px", "solid");
borderBottom("2px", "solid", "red");

⚠️ These functions have strict arguments order and do not support variable order of properties as CSS:

/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;

borderColor, borderStyle, borderWidth, margin, padding

borderColor("red");
borderColor("red", "blue");
borderColor("red", "blue", "green");
borderColor("red", "blue", "green", "yellow");
borderStyle("solid");
borderWidth("12px", "24px", "36px");
margin("2px", "4px", "8px");
padding("10px", "5px");

borderRadius

borderRadius("10px");
borderRadius("10px", "5%");
borderRadius("2px", "4px", "8px");
borderRadius("1px", 0, "3px", "4px");

⚠️ Conformant to CSS spec, does not support / syntax:

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

gap, overflow

gap("10px");
gap("10px", "5px");

overflow("hidden");
overflow("hidden", "scroll");
ecraig12345
ecraig12345

@dzearing had a series of PRs to change everything possible to import type, but some of them didn't get merged. It looks like he also added @typescript-eslint/eslint-plugin rules consistent-type-imports and consistent-type-exports but didn't get around to enabling them here.

The import rule has a clever way to avoid needing type information, which in theory should prevent it from being terribly expensive to run, but hard to say without measuring it. The exports rule does require type info and therefore could be slower.

pull request

ecraig12345 merge to microsoft/fluentui

ecraig12345
ecraig12345

feat(makeStyles): add shorthand functions

Pull request checklist

  • Addresses an existing issue: Partially implements #20573
  • Include a change request file using $ yarn change

Description of changes

This PR is a first step in implementation of #20573, you can check draft PR (#20539) to see how it will be used.

This PR partially implements RFC #20573 and adds shorthand functions (other changes will come in separate PRs 💪). These functions are designed to simplify usage of CSS longhands, for example 👇

makeStyles({
  rootA: {
    ...shorthands.border("2px", "solid", "red")
  },
  rootB: {
    borderBottomWidth: "2px",
    borderLeftWidth: "2px",
    borderRightWidth: "2px",
    borderTopWidth: "2px",
    borderBottomStyle: "solid",
    borderLeftStyle: "solid",
    borderRightStyle: "solid",
    borderTopStyle: "solid",
    borderBottomColor: "red",
    borderLeftColor: "red",
    borderRightColor: "red",
    borderTopColor: "red"
  }
});

There functions are exported from @fluentui/make-styles package and re-exported in @fluentui/react-components (via @fluentui/react-make-styles:

import { shorthands } from "@fluentui/react-components";

makeStyles({
  root: {
    ...shorthands.border("2px", "solid", "red")
  }
});

Implemented functions

border, borderBottom, borderLeft, borderTop, borderRight

borderBottom("2px");
borderBottom("2px", "solid");
borderBottom("2px", "solid", "red");

⚠️ These functions have strict arguments order and do not support variable order of properties as CSS:

/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;

borderColor, borderStyle, borderWidth, margin, padding

borderColor("red");
borderColor("red", "blue");
borderColor("red", "blue", "green");
borderColor("red", "blue", "green", "yellow");
borderStyle("solid");
borderWidth("12px", "24px", "36px");
margin("2px", "4px", "8px");
padding("10px", "5px");

borderRadius

borderRadius("10px");
borderRadius("10px", "5%");
borderRadius("2px", "4px", "8px");
borderRadius("1px", 0, "3px", "4px");

⚠️ Conformant to CSS spec, does not support / syntax:

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

gap, overflow

gap("10px");
gap("10px", "5px");

overflow("hidden");
overflow("hidden", "scroll");
pull request

ecraig12345 merge to microsoft/fluentui

ecraig12345
ecraig12345

cra-template: fix errors when running test using Windows OS

Pull request checklist

~- [ ] Addresses an existing issue: Fixes #0000~ ~- [ ] Include a change request file using $ yarn change~

Issue:

  • Running yarn test for the cra-template package yields an error for Windows users since non-Windows compatible commands are used in the test.

Description of changes

  • packPackages now uses npm-which package for cross OS compatibility.
  • now using cross-env package to set CI=1 for cross OS compatibility.
pull request

ecraig12345 merge to microsoft/fluentui

ecraig12345
ecraig12345

cra-template: fix errors when running test using Windows OS

Pull request checklist

~- [ ] Addresses an existing issue: Fixes #0000~ ~- [ ] Include a change request file using $ yarn change~

Issue:

  • Running yarn test for the cra-template package yields an error for Windows users since non-Windows compatible commands are used in the test.

Description of changes

  • packPackages now uses npm-which package for cross OS compatibility.
  • now using cross-env package to set CI=1 for cross OS compatibility.
open pull request

ecraig12345 wants to merge microsoft/fluentui

ecraig12345
ecraig12345

cra-template: fix errors when running test using Windows OS

Pull request checklist

~- [ ] Addresses an existing issue: Fixes #0000~ ~- [ ] Include a change request file using $ yarn change~

Issue:

  • Running yarn test for the cra-template package yields an error for Windows users since non-Windows compatible commands are used in the test.

Description of changes

  • packPackages now uses npm-which package for cross OS compatibility.
  • now using cross-env package to set CI=1 for cross OS compatibility.
ecraig12345
ecraig12345
  "type": "none",
  "comment": "CRA-Template: fix errors when running test using Windows\"",
  "packageName": "@fluentui/cra-template",
  "email": "[email protected]",
  "dependentChangeType": "none"
open pull request

ecraig12345 wants to merge microsoft/fluentui

ecraig12345
ecraig12345

cra-template: fix errors when running test using Windows OS

Pull request checklist

~- [ ] Addresses an existing issue: Fixes #0000~ ~- [ ] Include a change request file using $ yarn change~

Issue:

  • Running yarn test for the cra-template package yields an error for Windows users since non-Windows compatible commands are used in the test.

Description of changes

  • packPackages now uses npm-which package for cross OS compatibility.
  • now using cross-env package to set CI=1 for cross OS compatibility.
ecraig12345
ecraig12345

This actually should be none since it only affects tests for the template (not the template itself)

pull request

ecraig12345 merge to microsoft/fluentui

ecraig12345
ecraig12345

cra-template: fix errors when running test using Windows OS

Pull request checklist

~- [ ] Addresses an existing issue: Fixes #0000~ ~- [ ] Include a change request file using $ yarn change~

Issue:

  • Running yarn test for the cra-template package yields an error for Windows users since non-Windows compatible commands are used in the test.

Description of changes

  • packPackages now uses npm-which package for cross OS compatibility.
  • now using cross-env package to set CI=1 for cross OS compatibility.
push

ecraig12345 push ecraig12345/office-ui-fabric-react

ecraig12345
ecraig12345

Ensure output is preserved when running screener (#20734)

commit sha: 733a828e3e618c14de052e872fbf5cc1f1bad8bf

push time in 5 days ago
pull request

ecraig12345 merge to microsoft/fluentui

ecraig12345
ecraig12345

Removing cross-library export *s

This partially addresses #20178

I've removed all cross package export *'s, which is good - it means the apis extracted from api extractor are now explicit and you can more clearly see what packages are exporting.

I did not disable all export *'s - we still have them internal export *s intact, but this still poses a problem to the original issue:

  • Theme.ts exports createTheme from @fluentui/theme
  • Style.ts export createTheme from @fluentui/style-utilities which exports from @fluentui/theme
  • index.ts exports both, but TypeScript doesn't seem to complain about this because locally it resolves to the same module. But this still ends up meaning that if the react package resolves a different version of theme package than style-utilities resolves, there is ambiguity.

I have fixed the specific issue by exporting createTheme from the correct package. But I don't think this is the only possibly ambiguous one. I think really the only solution is to remove all export *'s. I will talk with Daniel on the TS team about this. If you flatten the export *'s in the react index package, you end up exporting 2 createTheme functions in one file which causes an error.

Activity icon
delete
deleted time in 5 days ago
push

ecraig12345 push microsoft/fluentui

ecraig12345
ecraig12345

Ensure output is preserved when running screener (#20734)

commit sha: 733a828e3e618c14de052e872fbf5cc1f1bad8bf

push time in 5 days ago
pull request

ecraig12345 pull request microsoft/fluentui

ecraig12345
ecraig12345

Ensure output is preserved when running screener

We've had some trouble with screener failures where the log output is truncated, making it impossible to see what went wrong. This is presumably due to some issue with output buffering in lage, but my previous investigations into this haven't been successful (it has multiple abstractions for process output handling that make it hard to follow).

A workaround now that we have Screener and ScreenerNorthstar as separate jobs, we can go back to invoking the commands directly instead of using lage for the build orchestration.

open pull request

ecraig12345 wants to merge microsoft/fluentui

ecraig12345
ecraig12345

Removing cross-library export *s

This partially addresses #20178

I've removed all cross package export *'s, which is good - it means the apis extracted from api extractor are now explicit and you can more clearly see what packages are exporting.

I did not disable all export *'s - we still have them internal export *s intact, but this still poses a problem to the original issue:

  • Theme.ts exports createTheme from @fluentui/theme
  • Style.ts export createTheme from @fluentui/style-utilities which exports from @fluentui/theme
  • index.ts exports both, but TypeScript doesn't seem to complain about this because locally it resolves to the same module. But this still ends up meaning that if the react package resolves a different version of theme package than style-utilities resolves, there is ambiguity.

I have fixed the specific issue by exporting createTheme from the correct package. But I don't think this is the only possibly ambiguous one. I think really the only solution is to remove all export *'s. I will talk with Daniel on the TS team about this. If you flatten the export *'s in the react index package, you end up exporting 2 createTheme functions in one file which causes an error.

ecraig12345
ecraig12345

I actually misspoke--what we've started doing is a range under package dependencies and a specific version under devDependencies at the root to control what's installed.

pull request

ecraig12345 merge to microsoft/fluentui

ecraig12345
ecraig12345

Removing cross-library export *s

This partially addresses #20178

I've removed all cross package export *'s, which is good - it means the apis extracted from api extractor are now explicit and you can more clearly see what packages are exporting.

I did not disable all export *'s - we still have them internal export *s intact, but this still poses a problem to the original issue:

  • Theme.ts exports createTheme from @fluentui/theme
  • Style.ts export createTheme from @fluentui/style-utilities which exports from @fluentui/theme
  • index.ts exports both, but TypeScript doesn't seem to complain about this because locally it resolves to the same module. But this still ends up meaning that if the react package resolves a different version of theme package than style-utilities resolves, there is ambiguity.

I have fixed the specific issue by exporting createTheme from the correct package. But I don't think this is the only possibly ambiguous one. I think really the only solution is to remove all export *'s. I will talk with Daniel on the TS team about this. If you flatten the export *'s in the react index package, you end up exporting 2 createTheme functions in one file which causes an error.

pull request

ecraig12345 pull request microsoft/fluentui

ecraig12345
ecraig12345

Jackieg/azuretheme disabledbutton cherrypick

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

(give an overview) 🥲🥲

Focus areas to test

(optional)

pull request

ecraig12345 pull request microsoft/fluentui

ecraig12345
ecraig12345

Ensure output is preserved when running screener

We've had some trouble with screener failures where the log output is truncated, making it impossible to see what went wrong. This is presumably due to some issue with output buffering in lage, but my previous investigations into this haven't been successful (it has multiple abstractions for process output handling).

A workaround now that we have Screener and ScreenerNorthstar as separate jobs, we can go back to invoking the commands directly instead of using lage for the build orchestration.

Activity icon
created branch
createdAt 5 days ago
push

ecraig12345 push ecraig12345/office-ui-fabric-react

ecraig12345
ecraig12345
ecraig12345
ecraig12345

refactor(PresenceBadge): Remove props and return correct presence icons (#20630)

  • refactor(PresenceBadge): Remove props and return correct presence icons

The presence icons in @fluentui/react-icons are actually the presence badge content. In order to use these icons correctly, this PR:

  • Restricts props to size status outOfOffice

  • Removes the icon slot since custom icons are not a part of the design

  • Does not use normal badge styles

  • Returns the correct sized icon

  • Change files

  • reuse badge internals where possible

  • tests

  • fix lint

  • Update avatar snapshots

  • Change files

  • update styles

  • add thinBorder style, removed by mistake

  • style fixes

ecraig12345
ecraig12345

fix: chat components to properly pass ref (#20691)

  • fix: chat components to properly pass ref

  • add changelog

ecraig12345
ecraig12345

fix: embed component to properly pass ref (#20703)

  • fix: embed component to properly pass ref

  • add changelog

ecraig12345
ecraig12345

fix: remove margins on host elements (#20710)

  • fix: remove margins from host elements

  • Change files

ecraig12345
ecraig12345

DetailsList: added support for aria description to details row (#20631)

Co-authored-by: Vamsi Ravva [email protected]

ecraig12345
ecraig12345

fix: datepicker components to properly pass ref (#20697)

  • fix: datepicker components to properly pass ref

  • add changelog

ecraig12345
ecraig12345
ecraig12345
ecraig12345

bundle-size: adds missing dependencies (#20612)

  • Adds missing dependencies to bundle-size tool

  • Change files

  • Update packages/bundle-size/package.json

Co-authored-by: Oleksandr Fediashov [email protected]

  • Update packages/bundle-size/package.json

Co-authored-by: Oleksandr Fediashov [email protected]

  • Update packages/bundle-size/package.json

Co-authored-by: Oleksandr Fediashov [email protected]

  • syncpack:fix

  • Updates @azure/data-tables version

  • Bumps @azure/data-tables version

  • remove duplicate entries for prettier & tslib

  • downgrade back tslib

Co-authored-by: Oleksandr Fediashov [email protected] Co-authored-by: Oleksandr Fediashov [email protected]

ecraig12345
ecraig12345

RFC: Do not allow CSS shorthands in makeStyles() calls (#20573)

  • RFC: Do not allow CSS shorthands in makeStyles() calls

  • rename "macros" to "shorthands"

  • add one more con

  • add note about ESLint rules

  • Update rfcs/convergence/no-css-shorthands-in-make-styles.md

Co-authored-by: Miroslav Stastny [email protected]

Co-authored-by: Miroslav Stastny [email protected]

ecraig12345
ecraig12345

Adding Teams Messaging as Chat component codeowner (#20707)

ecraig12345
ecraig12345

Dropdown item: fix for checkable indicator when using keyboard navigation (#20629)

  • fix color for dropdown checkable indicator for hc theme

  • update changelog

  • update changelog

  • update dropdown styles

  • fix color of checkable indicator for key navigation

  • change color only on hover

  • uodate changelog

  • remove unused param

  • return to prev state

  • fix changelog

Co-authored-by: Anna Kellerstein [email protected]

ecraig12345
ecraig12345

fix: checkbox component to properly pass down ref (#20696)

  • fix: checkbox component to properly pass down ref

  • add changelog

  • fix: type cast

  • add generic

  • fix: remove as const

ecraig12345
ecraig12345

fix(Badge): various styling fixes (#20693)

  • fix(Badge): brand tint outline

  • Change files

  • update chnagefile

  • Update apps/vr-tests/src/stories/Badge.stories.tsx

  • add hc and dark

  • fix badge style

  • fix more styles

  • Update change/@fluentui-react-badge-315861cc-de24-46b5-860c-1df570dfe84c.json

  • sort colors

ecraig12345
ecraig12345

fix: Dropdown components to pass ref (#20702)

  • fix: Dropdown components to pass ref

  • add changelog

  • add missing ref

  • Update packages/fluentui/react-northstar/src/components/Dropdown/DropdownSearchInput.tsx

Co-authored-by: Oleksandr Fediashov [email protected]

Co-authored-by: Oleksandr Fediashov [email protected]

ecraig12345
ecraig12345

Update react-icons dependency (#20563)

  • update react-icons dependency

  • Change files

  • update vr-tests

  • update react-input imports

  • update yarn.lock

  • update api files

  • Change files

  • update snapshots

  • update Avatar snapshots

  • update react-icons version to latest

  • update api filed

  • Change files

  • bump badge icons package

  • update md

  • Update change/@fluentui-react-popover-6360b2bc-d6d7-4ddc-a2b8-67939d855456.json

  • Update change/@fluentui-react-provider-2de5b233-920f-4de9-8ccb-e41436c803b1.json

  • update api files

  • remove unnecessary change files

  • update change file

  • update md

  • Change files

  • clean md changes

  • remove api change for switch

  • update popover api

  • Change files

  • update presence badge

  • update avatar snapshots

  • update react-icons version to fix unnecessary api updates

  • remove api updates

Co-authored-by: Elizabeth Craig [email protected] Co-authored-by: Lingfan Gao [email protected]

ecraig12345
ecraig12345

Improve vr-tests addStory typings (#20684)

ecraig12345
ecraig12345

commit sha: ae57c376edfd1410f2ffbe28200b19b3c7b99bb2

push time in 5 days ago
open pull request

ecraig12345 wants to merge microsoft/fluentui

ecraig12345
ecraig12345

Removing cross-library export *s

This partially addresses #20178

I've removed all cross package export *'s, which is good - it means the apis extracted from api extractor are now explicit and you can more clearly see what packages are exporting.

I did not disable all export *'s - we still have them internal export *s intact, but this still poses a problem to the original issue:

  • Theme.ts exports createTheme from @fluentui/theme
  • Style.ts export createTheme from @fluentui/style-utilities which exports from @fluentui/theme
  • index.ts exports both, but TypeScript doesn't seem to complain about this because locally it resolves to the same module. But this still ends up meaning that if the react package resolves a different version of theme package than style-utilities resolves, there is ambiguity.

I have fixed the specific issue by exporting createTheme from the correct package. But I don't think this is the only possibly ambiguous one. I think really the only solution is to remove all export *'s. I will talk with Daniel on the TS team about this. If you flatten the export *'s in the react index package, you end up exporting 2 createTheme functions in one file which causes an error.

ecraig12345
ecraig12345

It should re-publish (changeType: patch) but does NOT need to make everything in our repo that depends on it bump

Previous