Icons are not visible

[plamber]

Hello, I am integrating the library in a new react project. Unfortunately, I am not able to see the Icons associated to the components. This issue is related with #59.

Reproduction

I am using these packages:

The results looks like this

import React, { Component, Suspense } from 'react';
import { Route, Switch, NavLink, useHistory } from "react-router-dom";
import { useEffect, useState } from "react";
import * as microsoftTeams from "@microsoft/teams-js";
import { Provider } from "@fluentui/react-teams";
import { themeNames } from "@fluentui/react-teams";
import ChildComponent from "./components/ChildComponent"

const initTeamsTheme = (theme: string | undefined) : themeNames => {
  switch (theme) {
    case "dark":
      return themeNames.Dark;
    case "contrast":
      return themeNames.HighContrast;
    default:
      return themeNames.Default;
  }
}

function App() {
  const [appContext, setAppContext] = useState<microsoftTeams.Context>();
  const [appAppearance, setAppAppearance] = useState<themeNames>(
    themeNames.Default
  );

  useEffect(() => {
    microsoftTeams.getContext((context) => {
      setAppContext(context);
      setAppAppearance(initTeamsTheme(context.theme));

      microsoftTeams.appInitialization.notifySuccess();
    });

    microsoftTeams.registerOnThemeChangeHandler((theme) => {
      setAppAppearance(initTeamsTheme(theme));
    });
  }, []);

  return (
    <Provider themeName={appAppearance} lang="en-US">
      <Switch>
        <Route exact path="/" component={MyStuff} />
      </Switch>
    </Provider>
  );
}

/*
class App extends Component<{}, {
  appContext?: microsoftTeams.Context,
  appAppearance: themeNames
}> {
  constructor(props: any) {
    super(props);
    this.state = {
      appAppearance: themeNames.Default,
    };
  }

  componentDidMount = (): void => {
    microsoftTeams.getContext((context) => {
      this.setState({
        appContext: context,
        appAppearance: initTeamsTheme(context.theme)
      });
      microsoftTeams.appInitialization.notifySuccess();
    });

    microsoftTeams.registerOnThemeChangeHandler((theme) => {
      this.setState({
        appAppearance: initTeamsTheme(theme)
      })
    });
  };

  render() {
    const { appAppearance } = this.state;
    return (
      <Provider themeName={appAppearance} lang="en-US">
          <Switch>
              <Route path={["/"]} exact component={MyStuff} />  
              <Route path={["/create"]} exact component={() => <React.Fragment>Wizard</React.Fragment>} />
              <Route component={() => <React.Fragment>NotFound</React.Fragment>} />
          </Switch>
      </Provider>
    );
  }
}
*/

export default App;

import React from 'react';
import { Toolbar } from '@fluentui/react-teams';

const ChildComponent: React.FunctionComponent = () => {
    const toolbarConfig = {
        actionGroups: {},
        filters: [
          {
            id: "i1",
            title: "Edible flowers",
            items: [
              { id: "i1i1", title: "Dianthus" },
              { id: "i1i2", title: "Mentha" },
              { id: "i1i3", title: "Passiflora" },
            ],
          },
          { id: "i2", title: "Podded vegetables" },
        ],
        filtersSingleSelect: true,
        find: true,
      };
  return (
    <React.Fragment>
        <Toolbar {...toolbarConfig}   />
    </React.Fragment>
  )
};

export default ChildComponent;

Not sure if I am missing a reference or some initialization. I was not able to find the steps in the documentation or the sample project.

Thank you for your help, Patrick

[thure]

Hi @plamber — when you inspect the icons, is the markup for the icons present? If so, what are the computed styles of the individual elements of the SVG?

[plamber]

Hi @thure, Thank you for coming back to me.

in Firefox I have this behavior:

in Chrome I have this result:

I can find following HTML around the SVG near the "Create" button

<span role="img" aria-hidden="true" class="ui-icon"><svg role="presentation" focusable="false" viewBox="2 2 16 16"><path class="ui-icon__outline" d="M3 5.5C3 4.11929 4.11929 3 5.5 3H14.5C15.8807 3 17 4.11929 17 5.5V14.5C17 15.8807 15.8807 17 14.5 17H5.5C4.11929 17 3 15.8807 3 14.5V5.5ZM4 10.5V14.5C4 15.3284 4.67157 16 5.5 16H9.5V10.5H4ZM9.5 9.5V4H5.5C4.67157 4 4 4.67157 4 5.5V9.5H9.5ZM10.5 10.5V16H14.5C15.3284 16 16 15.3284 16 14.5V10.5H10.5ZM16 9.5V5.5C16 4.67157 15.3284 4 14.5 4H10.5V9.5H16Z"></path><g class="ui-icon__filled"><path d="M5.5 3C4.11929 3 3 4.11929 3 5.5V9.5H9.5V3H5.5Z"></path><path d="M9.5 10.5H3V14.5C3 15.8807 4.11929 17 5.5 17H9.5V10.5Z"></path><path d="M10.5 10.5H17V14.5C17 15.8807 15.8807 17 14.5 17H10.5V10.5Z"></path><path d="M17 9.5V5.5C17 4.11929 15.8807 3 14.5 3H10.5V9.5H17Z"></path></g></svg></span>

These are the computed styles of the SVG element in Chrome. Let me know if there is a easier way to share this with you.

Cheers

[thure]

Hi @plamber — we (the react-teams developers) haven't observed this issue before and aren't able to reproduce it with the code you're sharing… I suspect it has something to do with the way your stack is set up.

Could you please reproduce this on a CodeSandbox or similar and share the link, or share a repository that shows the same bug?

Also, for what it's worth, these components are only tested in Chrome/Chromium since this is meant only for Teams apps, so things may not work in Firefox/Gecko or other UA's / layout engines. We are also currently on v0.54 of react-northstar and react-northstar-icons; while personally I don't suspect that is the issue, it may be worth trying to use that version.

[plamber]

Hi @thure, thank you for your input and help.

I created a react app npx create-react-app using typescript. You can find here a simple repository with the issue.

I added these dependencies:

• npm i react-router-dom
• npm i --save-dev @types/react-router-dom
• npm i @microsoft/teams-js
• npm i @fluentui/react-northstar
• npm i --save @fluentui/react-teams

You can run it with npm start and it should automatically redirect you to a browser using http://localhost:3000/.

The result in Edge and Chrome is this:

Regarding the comment of browser support. We are trying to build an application that can exist in Teams, SharePoint Online, but also in a browser only. The application should have the "Microsoft ecosystem" feeling when working in any of these locations. Our thought was to use the fluent-ui to achieve this goal. What I am hearing from your comment is that this can't be achieved with this library at all. What are your recommendations for building applications that can "live in multiple" places but keep the Microsoft feel when accessing them?

Thank you for your help and feedback.

[thure]

Hi @plamber — Installing the dependencies as listed in the this repo's package.json gives the following warnings:

warning " > @fluentui/react-northstar@0.54.0" has incorrect peer dependency "react@^16.8.0".
warning " > @fluentui/react-northstar@0.54.0" has incorrect peer dependency "react-dom@^16.8.0".
…[and many similar warnings]

These are meaningful warnings, since @fluentui/react-northstar won't render things correctly without the right version of React. Icons render correctly and the warnings go away by setting react and react-dom dependencies to ^16.8.0.

Regarding browser support, I believe @fluentui/react-northstar aims to be fairly universal though it's true it doesn't implement the Teams UI Kit as this library does. We'd welcome issues or PR's if you find bugs in Firefox or others.

[plamber]

Thank you for the feedback. Missed this dependency part

Will give it a try.

Cheers

[thure]

I'll mark this as closed for now in that case, please feel free to reopen it if icons are still not visible after setting compatible dependencies! Certainly feel free to open new issues if you see problems in other UA's like Firefox.

[plamber]

Hi, I tested it out. Had to downgrade the packages of my react 17 project to:

"@types/react": "^16.8.0",
"@types/react-dom": "^16.8.0",
"react": "^16.8.0",
"react-dom": "^16.8.0",

Afterwards, everything started showing up correctly in all browsers.

Thank you