Android theme by tamasane97 · Pull Request #613 · microsoft/fluentui-react-native

tamasane97 · 2021-02-24T06:39:44Z

Platforms Impacted

Description of changes

Added android-theme to support android platform. The token system follows semantic tokens as in Figma FluentUI Android which are referred in ThemeReference API.

Verification

The new theme looks as follows:

android-theme.mp4

( The appearance change is emulated in the demo by making local changes to react-native-test-app and currently dark/light mode does not switch automatically as the react-native-test-app does not provide subscription to uiMode changes )

Pull request checklist

This PR has considered (when applicable):

packages/theming/android-theme/src/androidTypography.ts

packages/theming/android-theme/package.json

Saadnajmi · 2021-02-25T21:39:29Z

Could you add screenshots of before and after with the theme? Would love to see how it looks with the new theme

packages/theming/android-theme/src/androidTheme.ts

apps/fluent-tester/package.json

apps/fluent-tester/src/FluentTester/theme/CustomThemes.ts

packages/theming/android-theme/README.md

packages/theming/android-theme/package.json

packages/theming/android-theme/src/androidTheme.colors.ts

packages/theming/android-theme/src/createAndroidTheme.ts

packages/theming/android-theme/.npmignore

Saadnajmi

The remaining todo's are my only real comment left (Either track them with an issue and place that # in the code as a comment, or remove the todos altogether). Otherwise, looks great!

Saadnajmi · 2021-03-15T05:14:58Z

packages/theming/android-theme/src/androidTheme.colors.ts

+    actionLink: 'todo',
+    actionLinkHovered: 'todo',
+    link: 'todo',
+    linkHovered: 'todo',
+    linkPressed: 'todo',


If you don't have every color defined just yet, you can specify this as a partial palette and leave this out. But keeping a string 'todo' likely will just cause the app to crash/error if it ever shows a link while using the android theme.

fluentui-react-native/packages/theming/theme-types/src/Color.types.ts

Line 454 in 03896e3

export type PartialPalette = Partial<Palette>;

Saadnajmi · 2021-03-15T05:22:23Z

packages/theming/android-theme/README.md

+
+Code and definitions for creating an Android Theme for FluentUI React Native.
+
+The theme follows color, typography, spacing and other values to closely match [FluentUI Android](https://github.com/microsoft/fluentui-android/tree/master/FluentUI/src/main/res/values). The theme is work in progress and changes are expected.


It's probably fine to just leave this link as the base GitHub repo (https://github.com/microsoft/fluentui-android) but that's a nitpick and I wouldn't consider it necessary for check in.

Saadnajmi · 2021-03-15T05:25:18Z

Re: "( The appearance change is emulated in the demo by making local changes to react-native-test-app and currently dark/light mode does not switch automatically as the react-native-test-app does not provide subscription to uiMode changes )" Is that a bug or feature request we need to make to react-native-test-app ?

* initial android theme * mapped a lot of colors, updated readme, added to fluent-tester-app * Change files * removed unneccessary dependencies * added android typography * updated versioning, removed apple specific changes * making android-theme default for the platform * update fluent-tester dependency version... * resolving comments... * resolving more comments... Co-authored-by: Tushar Masane <tushar@AZH-NT-02.middleeast.corp.microsoft.com>

* prototype * style gradient * componentize shimmer * prototype * style gradient * Android theme (#613) * initial android theme * mapped a lot of colors, updated readme, added to fluent-tester-app * Change files * removed unneccessary dependencies * added android typography * updated versioning, removed apple specific changes * making android-theme default for the platform * update fluent-tester dependency version... * resolving comments... * resolving more comments... Co-authored-by: Tushar Masane <tushar@AZH-NT-02.middleeast.corp.microsoft.com> * 📦 applying package updates ***NO_CI*** * Add repository link for @fluentui/react-native (#649) * Change files * Remove change file * Add repository link * Change files * Add a nil check to Avatar image property (#650) * Add a nil check to AvatarData image * Change files * Update Radio Button focus border style to be WCAG 2.1 compliant (#653) * Change files * Remove change file * Update radio button focus border style * Change files * Add the rainbow gradient border image test case to experimental avatar (#654) * Add the rainbow gradient test case * Change files * Add apple theme static libraries to NuGet package (#655) * Add apple theme static libraries to NuGet, add NuGet Publish PR job * Fix path in nuspec * Comment out NugetPublish PR Job * Fix npm publish pipeline (hopefully) (#656) * fix typos in android-theme * Change files * 📦 applying package updates ***NO_CI*** * Android Svg Support (#652) * added svg, transformer to android * base64 svgs do not load, font files do not link * Change files * bump package versions manually * Change files * upgrade react-native-svg * Change files * revert 'bump package versions manually' * Change files * 📦 applying package updates ***NO_CI*** * Fix typo in nuspec (#659) * Fix typo in nuspec * Comment out NuGet Publish again * Add Icon support for macOS (#645) * Add macOS support * Add link to issue regarding direct SVG imports * Replace react-native-svg with @microsoft/react-native-svg-desktop * Use react-native-svg now that it supports macOS * Upgrade react-native-svg to 12.1.1-0 everywhere * Update macos podfile * Change files * 📦 applying package updates ***NO_CI*** * chore: `rnx-start` is deprecated (#660) `rnx-start` is being removed because it currently does not provide any value over vanilla `react-native start`. See microsoft/rnx-kit#139 * Fix more typos in the nuspec (#661) * Fix typos, uncomment pipeline * comment out pipeline again * Revamp Android ThemePicker (#664) * updated themepicker for android * Change files * add correct picker... * ignore rn-picker depcheck... * separated android themepicker... * added dropdown styles... * add types for dropdown.. * Add a Contributing markdown file (#555) * Initial Commit * Restructuring * Rewrite Slots summary * Update Guide based on feedback * More fixes * Update from PR feedback * Add RNSVG dependency to Icon and update RNSVG version throughout (#668) * Add button icon tests specific to win32 * Change files * Change files * Add dependency to rnsvg * Add RNSVG dependency to ios and mac * Remove rnsvg dep from ios and macos due to failed depcheck * Add rnsvg to ios and macos againt but also add to ignores for depcheck * Add explicit react-native-svg dependency to FURN Icon (#666) * Add direct dependency on RNSVG in FURN Icon * Change files * Update yarn.lock with react-native-svg 12.1.1 * componentize shimmer * move shimmer to experimental * create slots for shapes * revamp shimmer slots * implement shimmerElement to group sub-elements * Change files * add shimmer to android and accessibility support * use useRef hook and union types * remove rect & circle slots * documentation Co-authored-by: Tushar Anil Masane <tamasane@gmail.com> Co-authored-by: Tushar Masane <tushar@AZH-NT-02.middleeast.corp.microsoft.com> Co-authored-by: UI-Fabric-RN-Bot <uifrnbot@microsoft.com> Co-authored-by: Krystal Siler <krsiler@microsoft.com> Co-authored-by: Saad Najmi <saadnajmi2@gmail.com> Co-authored-by: Adam Gleitman <adam.gleitman@gmail.com> Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com> Co-authored-by: warren-ms <63264034+warren-ms@users.noreply.github.com>

Tushar Masane and others added 4 commits February 23, 2021 13:29

initial android theme

f39e8c1

mapped a lot of colors, updated readme, added to fluent-tester-app

331ef95

Change files

d2ddc7d

removed unneccessary dependencies

49fd8e7

Saadnajmi reviewed Feb 24, 2021

View reviewed changes

packages/theming/android-theme/src/androidTypography.ts Outdated Show resolved Hide resolved

added android typography

238c928

ejlayne requested review from FalseLobster and PPatBoyd February 25, 2021 16:21

Saadnajmi reviewed Feb 25, 2021

View reviewed changes

packages/theming/android-theme/package.json Outdated Show resolved Hide resolved

Saadnajmi reviewed Feb 26, 2021

View reviewed changes

packages/theming/android-theme/src/androidTheme.ts Outdated Show resolved Hide resolved

This was referenced Mar 3, 2021

TestList cuts off test on iPad (possibly other platforms) #624

Closed

FluentTester looks broken on mobile #399

Closed

tamasane97 added 3 commits March 9, 2021 03:40

updated versioning, removed apple specific changes

160dbaa

making android-theme default for the platform

d2f9f8d

Merge branch 'master' into android-theme

472d132

Saadnajmi reviewed Mar 10, 2021

View reviewed changes

apps/fluent-tester/package.json Outdated Show resolved Hide resolved

Saadnajmi reviewed Mar 10, 2021

View reviewed changes

apps/fluent-tester/src/FluentTester/theme/CustomThemes.ts Outdated Show resolved Hide resolved

tamasane97 force-pushed the android-theme branch from e73dc49 to 472d132 Compare March 11, 2021 09:26

update fluent-tester dependency version...

0690ebe

Saadnajmi reviewed Mar 11, 2021

View reviewed changes

packages/theming/android-theme/README.md Outdated Show resolved Hide resolved

Saadnajmi requested changes Mar 11, 2021

View reviewed changes

packages/theming/android-theme/package.json Outdated Show resolved Hide resolved

packages/theming/android-theme/src/androidTheme.colors.ts Outdated Show resolved Hide resolved

packages/theming/android-theme/src/createAndroidTheme.ts Outdated Show resolved Hide resolved

Saadnajmi reviewed Mar 12, 2021

View reviewed changes

packages/theming/android-theme/.npmignore Outdated Show resolved Hide resolved

tamasane97 added 2 commits March 15, 2021 09:18

resolving comments...

f703b68

Merge branch 'master' into android-theme

67f16a8

Saadnajmi reviewed Mar 15, 2021

View reviewed changes

resolving more comments...

73d6e4e

Saadnajmi approved these changes Mar 15, 2021

View reviewed changes

Saadnajmi merged commit e3dafb7 into microsoft:master Mar 15, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Android theme#613

Android theme#613
Saadnajmi merged 12 commits intomicrosoft:masterfrom
tamasane97:android-theme

tamasane97 commented Feb 24, 2021 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Saadnajmi commented Feb 25, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Saadnajmi left a comment

Uh oh!

Saadnajmi Mar 15, 2021

Uh oh!

Saadnajmi Mar 15, 2021

Uh oh!

Saadnajmi Mar 15, 2021

Uh oh!

Saadnajmi commented Mar 15, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		Code and definitions for creating an Android Theme for FluentUI React Native.

		The theme follows color, typography, spacing and other values to closely match [FluentUI Android](https://github.com/microsoft/fluentui-android/tree/master/FluentUI/src/main/res/values). The theme is work in progress and changes are expected.

Conversation

tamasane97 commented Feb 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Platforms Impacted

Description of changes

Verification

Pull request checklist

Uh oh!

Uh oh!

Uh oh!

Saadnajmi commented Feb 25, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Saadnajmi left a comment

Choose a reason for hiding this comment

Uh oh!

Saadnajmi Mar 15, 2021

Choose a reason for hiding this comment

Uh oh!

Saadnajmi Mar 15, 2021

Choose a reason for hiding this comment

Uh oh!

Saadnajmi Mar 15, 2021

Choose a reason for hiding this comment

Uh oh!

Saadnajmi commented Mar 15, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

tamasane97 commented Feb 24, 2021 •

edited

Loading