Saadnajmi

Saadnajmi

Software Engineer at Microsoft working on UI for Office on Mac and iOS

Member Since 7 years ago

Microsoft.com, United States

Experience Points
5
follower
Lessons Completed
3
follow
Lessons Completed
35
stars
Best Reply Awards
15
repos

618 contributions in the last year

Pinned
⚡ UIKit and AppKit controls for building native Microsoft experiences
⚡ A react-native control library aligned with office-ui-fabric-react
⚡ A framework for building native macOS apps with React.
Activity
Nov
29
1 day ago
Activity icon
delete

Saadnajmi in microsoft/fluentui-react-native delete branch dependabot/npm_and_yarn/prettier-2.5.0

deleted time in 6 hours ago
push

Saadnajmi push microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump prettier from 2.4.1 to 2.5.0 (#1194)

Bumps prettier from 2.4.1 to 2.5.0.


updated-dependencies:

  • dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-minor ...

Signed-off-by: dependabot[bot] [email protected]

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

commit sha: 7975a91b2926e76f4589af8a6db0bdd12ac9b324

push time in 6 hours ago
pull request

Saadnajmi pull request microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump prettier from 2.4.1 to 2.5.0

Bumps prettier from 2.4.1 to 2.5.0.

Release notes

Sourced from prettier's releases.

2.5.0

diff

🔗 Release note

Changelog

Sourced from prettier's changelog.

2.5.0

diff

🔗 Release Notes

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Activity icon
delete

Saadnajmi in microsoft/fluentui-react-native delete branch dependabot/npm_and_yarn/react-native-macos-0.64.14

deleted time in 6 hours ago
push

Saadnajmi push microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump react-native-macos from 0.64.12 to 0.64.14 (#1190)

Bumps react-native-macos from 0.64.12 to 0.64.14.


updated-dependencies:

  • dependency-name: react-native-macos dependency-type: direct:production update-type: version-update:semver-patch ...

Signed-off-by: dependabot[bot] [email protected]

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

commit sha: 9cf929e39decfaf424afe303ee49056f76fd140a

push time in 6 hours ago
pull request

Saadnajmi pull request microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump react-native-macos from 0.64.12 to 0.64.14

Bumps react-native-macos from 0.64.12 to 0.64.14.

Commits
  • 92c1110 Applying package update to 0.64.14 NO_CI
  • cb5e0e5 ci: add a pipeline for consuming react-native-macos (#909)
  • 7ab2cec Applying package update to 0.64.13 NO_CI
  • ea8ae98 Load Required Libraries in ReactBridge's static init (#910)
  • See full diff in compare view

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
pull request

Saadnajmi merge to microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump react-native-macos from 0.64.12 to 0.64.14

Bumps react-native-macos from 0.64.12 to 0.64.14.

Commits
  • 92c1110 Applying package update to 0.64.14 NO_CI
  • cb5e0e5 ci: add a pipeline for consuming react-native-macos (#909)
  • 7ab2cec Applying package update to 0.64.13 NO_CI
  • ea8ae98 Load Required Libraries in ReactBridge's static init (#910)
  • See full diff in compare view

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
pull request

Saadnajmi merge to microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump @rnx-kit/eslint-plugin from 0.2.6 to 0.2.7

Bumps @rnx-kit/eslint-plugin from 0.2.6 to 0.2.7.

Changelog

Sourced from @​rnx-kit/eslint-plugin's changelog.

0.2.7

Fri, 26 Nov 2021 09:20:19 GMT

Patches

Commits
  • c38e746 📦 applying package updates [skip ci]
  • 67c9301 fix(eslint/no-export-all): const enums should be exported as types (#897)
  • See full diff in compare view

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Activity icon
delete

Saadnajmi in microsoft/fluentui-react-native delete branch dependabot/npm_and_yarn/types/react-17.0.37

deleted time in 22 hours ago
push

Saadnajmi push microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump @types/react from 17.0.36 to 17.0.37 (#1191)

Bumps @types/react from 17.0.36 to 17.0.37.


updated-dependencies:

  • dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch ...

Signed-off-by: dependabot[bot] [email protected]

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

commit sha: 6867ee4d851433247eed1780553a04f9d45aa12d

push time in 22 hours ago
pull request

Saadnajmi pull request microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump @types/react from 17.0.36 to 17.0.37

Bumps @types/react from 17.0.36 to 17.0.37.

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
pull request

Saadnajmi merge to microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump @types/react from 17.0.36 to 17.0.37

Bumps @types/react from 17.0.36 to 17.0.37.

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Activity icon
issue

Saadnajmi issue comment microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Update package.json to include the repository

Hi there! This change adds the repository property to your package.json file(s). Having this available provides a number of benefits to security tooling. For example, it allows for greater trust by checking for signed commits, contributors to a release and validating history with the project. It also allows for comparison between the source code and the published artifact in order to detect attacks on authors during the publication process. We validate that we're making a PR against the correct repository by comparing the metadata for the published artifact on npmjs.com against the metadata in the package.json file in the repository. This change is provided by a team at Microsoft -- we're happy to answer any questions you may have. (Members of this team include @s-tuli, @iarna, @v-rr, @v-jiepeng, @v-zhzhou and @v-gjy). If you would prefer that we not make these sorts of PRs to projects you maintain, please just say. If you'd like to learn more about what we're doing here, we've prepared a document talking about both this project and some of our other activities around supply chain security here: microsoft/Secure-Supply-Chain This PR provides repository metadata for the following packages:

Saadnajmi
Saadnajmi

@ejlayne @rurikoaraki do either of you know much about this?

Activity icon
issue

Saadnajmi issue comment microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Integrate macOS tokens for Button

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Mac tokens were added in #1130, let's consume them in Button. I also updated the button token values to use Fluent Apple palette colors.

Verification

Ensured Button UI remains unchanged. image

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts
Saadnajmi
Saadnajmi

Since this touches the apple theme, can we verify that the non experimental button is also unaffected?

Activity icon
delete

Saadnajmi in microsoft/fluentui-react-native delete branch dependabot/npm_and_yarn/react-native-test-app-0.9.16

deleted time in 22 hours ago
push

Saadnajmi push microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump react-native-test-app from 0.9.13 to 0.9.16 (#1192)

Bumps react-native-test-app from 0.9.13 to 0.9.16.


updated-dependencies:

  • dependency-name: react-native-test-app dependency-type: direct:development update-type: version-update:semver-patch ...

Signed-off-by: dependabot[bot] [email protected]

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

commit sha: 397d8dc92371d3ea2b9401d2df03f2506b2ebd2c

push time in 22 hours ago
pull request

Saadnajmi pull request microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump react-native-test-app from 0.9.13 to 0.9.16

Bumps react-native-test-app from 0.9.13 to 0.9.16.

Release notes

Sourced from react-native-test-app's releases.

0.9.16

0.9.16 (2021-11-25)

Bug Fixes

0.9.15

0.9.15 (2021-11-23)

Bug Fixes

  • android: additional config to better support Kotlin modules (#605) (21d34d7)

0.9.14

0.9.14 (2021-11-22)

Bug Fixes

  • android: fix name clash when building with Gradle 7 (#604) (eea3be2)
Commits
  • d36b435 fix(android): add config to support MSAL (#606)
  • 7558ccd chore(deps): update dependency androidx.core:core-ktx to v1.7.0 (#585)
  • 21d34d7 fix(android): additional config to better support Kotlin modules (#605)
  • eea3be2 fix(android): fix name clash when building with Gradle 7 (#604)
  • 1140b31 chore(deps): update dependency @​rnx-kit/eslint-plugin to v0.2.5 (#601)
  • aa6eabe chore(deps): update dependency @​types/jest to v27.0.3 (#602)
  • 1c66b59 ci: fix CI failing on bundle install (#603)
  • a5b3928 ci: disable semantic-release success comment to reduce spam [skip ci] (#600)
  • c9b00fd ci: [skip ci] is now supported by GitHub Actions (#599)
  • d60b163 chore: increase stability days for dependency updates [skip ci] (#598)
  • See full diff in compare view

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
pull request

Saadnajmi merge to microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Bump react-native-test-app from 0.9.13 to 0.9.16

Bumps react-native-test-app from 0.9.13 to 0.9.16.

Release notes

Sourced from react-native-test-app's releases.

0.9.16

0.9.16 (2021-11-25)

Bug Fixes

0.9.15

0.9.15 (2021-11-23)

Bug Fixes

  • android: additional config to better support Kotlin modules (#605) (21d34d7)

0.9.14

0.9.14 (2021-11-22)

Bug Fixes

  • android: fix name clash when building with Gradle 7 (#604) (eea3be2)
Commits
  • d36b435 fix(android): add config to support MSAL (#606)
  • 7558ccd chore(deps): update dependency androidx.core:core-ktx to v1.7.0 (#585)
  • 21d34d7 fix(android): additional config to better support Kotlin modules (#605)
  • eea3be2 fix(android): fix name clash when building with Gradle 7 (#604)
  • 1140b31 chore(deps): update dependency @​rnx-kit/eslint-plugin to v0.2.5 (#601)
  • aa6eabe chore(deps): update dependency @​types/jest to v27.0.3 (#602)
  • 1c66b59 ci: fix CI failing on bundle install (#603)
  • a5b3928 ci: disable semantic-release success comment to reduce spam [skip ci] (#600)
  • c9b00fd ci: [skip ci] is now supported by GitHub Actions (#599)
  • d60b163 chore: increase stability days for dependency updates [skip ci] (#598)
  • See full diff in compare view

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
Nov
24
6 days ago
Activity icon
issue

Saadnajmi issue comment microsoft/react-native-macos

Saadnajmi
Saadnajmi

ci: add a pipeline for consuming react-native-macos

Please select one of the following

  • I am removing an existing difference between facebook/react-native and microsoft/react-native-macos :thumbsup:
  • I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos :thumbsup:
  • I am making a fix / change for the macOS implementation of react-native
  • I am making a change required for Microsoft usage of react-native

Summary

Add a pipeline for consuming react-native-macos outside of the repository. This should help catch issues earlier (such as #860 or FBReactNativeSpec not being generated).

Backports #878

Changelog

[Internal] [Added] - Add a pipeline for consuming react-native-macos outside the repository

Test Plan

The newline pipeline should successfully build react-native-macos.

Saadnajmi
Saadnajmi

@Saadnajmi Can we merge this without having to pass the CircleCI tests? They don't run and I'm pretty sure they're unrelated.

@HeyImChris is the one who can do that

Nov
22
1 week ago
open pull request

Saadnajmi wants to merge microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Add v1 Button migration and spec files

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Adding documentation for v1 for spec and migration. Shamelessly taking the layout from the fluentui repo.

The specs/migration steps are a first-pass level, nothing is finalized yet. Figured I'd get the documentation started so that it's easier to add to as we finalize things.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts
Saadnajmi
Saadnajmi

"Action passed into onClick" maybe, since we don't have an action prop?

open pull request

Saadnajmi wants to merge microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Add v1 Button migration and spec files

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Adding documentation for v1 for spec and migration. Shamelessly taking the layout from the fluentui repo.

The specs/migration steps are a first-pass level, nothing is finalized yet. Figured I'd get the documentation started so that it's easier to add to as we finalize things.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts
Saadnajmi
Saadnajmi

Similar platform difference that is a point of discussion

open pull request

Saadnajmi wants to merge microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Add v1 Button migration and spec files

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Adding documentation for v1 for spec and migration. Shamelessly taking the layout from the fluentui repo.

The specs/migration steps are a first-pass level, nothing is finalized yet. Figured I'd get the documentation started so that it's easier to add to as we finalize things.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts
Saadnajmi
Saadnajmi

Looking back through all the comments, I think this might just be a react vs react native difference, since web renders to HTML and presumably raw text is ok. It might still with in react native but I would have thought we want a element. Point of discussion, not a review blocker. I'm interested to see what @ValentinaKozlova finds

open pull request

Saadnajmi wants to merge microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Add v1 Button migration and spec files

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Adding documentation for v1 for spec and migration. Shamelessly taking the layout from the fluentui repo.

The specs/migration steps are a first-pass level, nothing is finalized yet. Figured I'd get the documentation started so that it's easier to add to as we finalize things.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts
Saadnajmi
Saadnajmi

Except FAB, and MenuButton

pull request

Saadnajmi merge to microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Add v1 Button migration and spec files

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Adding documentation for v1 for spec and migration. Shamelessly taking the layout from the fluentui repo.

The specs/migration steps are a first-pass level, nothing is finalized yet. Figured I'd get the documentation started so that it's easier to add to as we finalize things.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts
Saadnajmi
Saadnajmi

I don't consider any comment I just left as blocking. Thanks for doing this!

pull request

Saadnajmi merge to microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Add v1 Button migration and spec files

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

Adding documentation for v1 for spec and migration. Shamelessly taking the layout from the fluentui repo.

The specs/migration steps are a first-pass level, nothing is finalized yet. Figured I'd get the documentation started so that it's easier to add to as we finalize things.

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts
Saadnajmi
Saadnajmi

I don't consider any comment I just left as blocking. Thanks for doing this!

pull request

Saadnajmi merge to microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Allow maxHeight prop to be set on menu and submenu for Scrollview

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

  • ContextualMenu.tsx
  • Submenu.tsx - maxHeight set on these components allows users to set a height for when the menu should add a scrollView

The user can set a maxHeight on how tall the want they menu, and the scrollViewer will appear if the menu gets longer. If they don't set a value, scrollViewer will not get added, and the menu just gets truncated at window edge (which is not a desirable behavior, but we do not yet have a redline on the maxHeight. The decision on whether we want a default maxHeight value or follow the web convention and set it at window's height is TBD)

TODO (Bugs to fix):

  • With the ScrollView, when menu contains items with png or fontIcon icons, it mysteriously adds a margin at the bottom of the menu
  • Width of menu is not dynamic with the menu item size. It was not an issue before the ScrollView was added. I will look into this further.

Verification

menu with scrollView

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts
Saadnajmi
Saadnajmi

The ScrollView causes minheight issues on macOS for some reason. For the time being, could we make it win32 only? Otherwise, thanks for the change!

Nov
20
1 week ago
pull request

Saadnajmi merge to microsoft/fluentui-apple

Saadnajmi
Saadnajmi

[vNext Tokens] Enable token swapping and color branding

Platforms Impacted

  • iOS
  • macOS

Description of changes

Now that we have discrete control tokens (#769), it's time to build out functionality for swapping them out at runtime.

(Note: the eagle-eyed reviewer will recognize much of this code from #778. However, we've pivoted our plans for tokens away from a global factory and exclusively towards per-control overrides. Global setting will now exist purely for brand colors.)

TokenizedState and TokenizedControl

The newest protocol here is TokenizedControl, which defines how a control will expose its internal control tokens for mutation. Thus, a client can subclass a given control's token set and provide these tokens either directly on the state (when invoking from UIKit) or through a modifier on the View (in SwiftUI).

An example of this is now available in ThemingDemoController, which temporarily features a CardNudge in addition to its existing Button and Avatar instances.

BrandColors

While some clients want to provide fully custom tokens for their controls, others simply want to apply a custom set of brand colors to the entire app, leaving other control tokens as they are. To facilitate this, a new protocol, BrandColors, is available, and is piped through our tokens.

In a pure SwiftUI app, there is a simple view modifier called brandColors(_:) that can be applied to the root of the view hierarchy to be styled.

However, most of our clients are still UIKit-based. To facilitate this, this PR adds a new protocol, ControlTokenFactoryHosting, which this PR also applies to UIWindow. This allows us to "hang" a custom BrandColors instantiation off a window. Now anyone with access to their window can also access the custom BrandColors to be used for styling.

ControlHostingContainer

There's a moderate amount of glue code needed to connect the BrandColors and the SwiftUI controls being wrapped. This is a great opportunity to pull the creeping shared logic across our various UIKit wrappers into a single base class, ControlHostingContainer. This class will also contain the necessary logic to observe theme change events and use them to apply styling changes to the wrapped control view.

Verification

This video demonstrates two important features:

  • Dynamic runtime color swapping for all default-styled controls in a window.
  • Specific per-control token customization which is not affected by window-level customization.

https://user-images.githubusercontent.com/4934719/139186179-c4f2944c-fb38-4c23-abff-505ac184dfd1.mp4

Pull request checklist

This PR has considered:

  • Light and Dark appearances
  • VoiceOver and Keyboard Accessibility
  • Internationalization and Right to Left layouts
  • Different resolutions (1x, 2x, 3x)
  • Size classes and window sizes (iPhone vs iPad, notched devices, multitasking, different window sizes, etc)
Microsoft Reviewers: Open in CodeFlow
open pull request

Saadnajmi wants to merge microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Allow maxHeight prop to be set on menu and submenu for Scrollview

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

  • ContextualMenu.tsx
  • Submenu.tsx - maxHeight set on these components allows users to set a height for when the menu should add a scrollView

The user can set a maxHeight on how tall the want they menu, and the scrollViewer will appear if the menu gets longer. If they don't set a value, scrollViewer will not get added, and the menu just gets truncated at window edge (which is not a desirable behavior, but we do not yet have a redline on the maxHeight. The decision on whether we want a default maxHeight value or follow the web convention and set it at window's height is TBD)

TODO (Bugs to fix):

  • With the ScrollView, when menu contains items with png or fontIcon icons, it mysteriously adds a margin at the bottom of the menu
  • Width of menu is not dynamic with the menu item size. It was not an issue before the ScrollView was added. I will look into this further.

Verification

menu with scrollView

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts
Saadnajmi
Saadnajmi
pull request

Saadnajmi merge to microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Allow maxHeight prop to be set on menu and submenu for Scrollview

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

  • ContextualMenu.tsx
  • Submenu.tsx - maxHeight set on these components allows users to set a height for when the menu should add a scrollView

The user can set a maxHeight on how tall the want they menu, and the scrollViewer will appear if the menu gets longer. If they don't set a value, scrollViewer will not get added, and the menu just gets truncated at window edge (which is not a desirable behavior, but we do not yet have a redline on the maxHeight. The decision on whether we want a default maxHeight value or follow the web convention and set it at window's height is TBD)

TODO (Bugs to fix):

  • With the ScrollView, when menu contains items with png or fontIcon icons, it mysteriously adds a margin at the bottom of the menu
  • Width of menu is not dynamic with the menu item size. It was not an issue before the ScrollView was added. I will look into this further.

Verification

menu with scrollView

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts
Nov
19
1 week ago
open pull request

Saadnajmi wants to merge microsoft/fluentui-react-native

Saadnajmi
Saadnajmi

Allow maxHeight prop to be set on menu and submenu for Scrollview

Platforms Impacted

  • iOS
  • macOS
  • win32 (Office)
  • windows
  • android

Description of changes

  • ContextualMenu.tsx
  • Submenu.tsx - maxHeight set on these components allows users to set a height for when the menu should add a scrollView

The user can set a maxHeight on how tall the want they menu, and the scrollViewer will appear if the menu gets longer. If they don't set a value, scrollViewer will not get added, and the menu just gets truncated at window edge (which is not a desirable behavior, but we do not yet have a redline on the maxHeight. The decision on whether we want a default maxHeight value or follow the web convention and set it at window's height is TBD)

TODO (Bugs to fix):

  • With the ScrollView, when menu contains items with png or fontIcon icons, it mysteriously adds a margin at the bottom of the menu
  • Width of menu is not dynamic with the menu item size. It was not an issue before the ScrollView was added. I will look into this further.

Verification

menu with scrollView

Pull request checklist

This PR has considered (when applicable):

  • Automated Tests
  • Documentation and examples
  • Keyboard Accessibility
  • Voiceover
  • Internationalization and Right-to-left Layouts
Saadnajmi
Saadnajmi

Yeah, nothing too against the implementation. The thought initially came up because macOS menus by default don't have scrollviews. macOS has different scrolling behavior for overflowing menus, but it's really custom such that I don't know I could implement it in RN to begin with and will probably just resort to a scrollview 😅.

This is definitely something that could be left for, say, V1 Callout/ContextualMenu =)

Previous