Browser support list for v8

[Rezrazi]

Hey, Is there a browser support list for the current build ? And I would like to know if the browser support is unifie: across all packages.

[hzhu]

Hi @Rezrazi, the browser support is unified across all packages in this repository. For each pull request, browser testing is done across these browsers: Chrome, Firefox, Safari, Internet Explorer Edge, and Internet Explorer 11. These browsers are listed in the pull request template checklist and can be found here. For modern browsers such as Chrome, Safari, Firefox, Edge, usually the latest two versions are used for testing.

[Rezrazi]

Are polyfills shipped by default or need to be added separately ? I'm trying to use some components in a IE11 friendly environment, but the app fails to render correctly.

import React from "react";
import { ThemeProvider } from "@zendeskgarden/react-theming";
import { Button } from "@zendeskgarden/react-buttons";

function App() {
  return (
    <ThemeProvider>
      <>
        <Button onClick={() => alert("clicked")}>Default</Button>
        <Button isPrimary isDanger>
          Primary danger button
        </Button>
      </>
    </ThemeProvider>
  );
}

export default App;

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

this snippet works on modern browsers, but fails to render the component on IE11

[austingreendev]

Our current babel-preset-env is supporting the following browsers:

➜  ~ npx browserslist "> 0.5%, last 2 versions, Firefox ESR, not dead"
npx: installed 5 in 1.563s
and_chr 85
and_ff 79
and_qq 10.4
and_uc 12.12
android 81
baidu 7.12
chrome 86
chrome 85
chrome 84
edge 86
edge 85
firefox 81
firefox 80
firefox 78
ie 11
ios_saf 14
ios_saf 13.4-13.7
ios_saf 13.3
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 59
opera 71
opera 70
safari 14
safari 13.1
samsung 12.0
samsung 11.1-11.2

@Rezrazi are you able to access our main docs site on IE11? https://garden.zendesk.com/components/button

[Rezrazi]

@austingreendev Yes, visiting the docs site from IE11 does work and all components are rendered correctly.

I have setup a sample project with CRA to which I added Garden. The problem persists and the components do not get rendered under IE11 https://github.com/Rezrazi/garden_ie11

EDIT Created a new branch in that repo mentioned above polyfill-enabled where I imported the react-app-polyfill package to my index.js and the components are working on IE11 Isn't it supposed to be unnecessary to include that package and just rely on the default garden compatibility ?

[austingreendev]

We are only able to build the Garden assets with IE11 in mind. Depending on how your application is scaffolded you may need polyfills for the non-Garden code.

If you're using create-react-app I believe they don't support IE11 out of the box (with or without Garden). Using react-app-polyfill seems to be the standard approach for solving this.

[Rezrazi]

Thank you for your answer, it was indeed a create-react-app limitation and IE11 compatibility needed to be included manually.