Button icon does not show up correctly

Forge Forge Custom UI and UI kit (beta)
#1

When I use <Button onClick={() => {}} text="ABC" icon="chevron-double-up" appearance='primary'/>, the button shows up without an icon. When I use add-circle from the example in the documentation, a fully white circle shows up. Browser development tools (on Edge) reveal that the primary color uses currentColor (which is white on a primary button) and the secondary color tries to use an undefined variable and falls back to white, resulting in a fully white circle.

Is there anything I can do to make the missing icon show up and what about the bad coloring?

package.json:

{
  "name": "forge-ui-starter",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "scripts": {
    "lint": "./node_modules/.bin/eslint src/**/* || npm run --silent hook-errors",
    "hook-errors": "echo '\\x1b[31mThe build failed because a Forge UI hook is being used incorrectly. Forge UI hooks follow the same rules as React Hooks but have their own API definitions. See the Forge documentation for details on how to use Forge UI hooks.\n' && exit 1"
  },
  "devDependencies": {
    "eslint": "^7.5.0",
    "eslint-plugin-react-hooks": "^2.1.2"
  },
  "dependencies": {
    "@forge/api": "^2.6.0",
    "@forge/ui": "^1.1.0"
  }
}
1 Like
#2

Welcome to Atlassian Developer Community, @ThrownException .

To use chevron-double-up, try hipchat-chevron-double-up instead.

Cheers,
Ian

#3

Ah thanks! That seemed to work… Is there any place I can report the multi color icon bug on? Or could you (or anybody else) confirm it has been reported somewhere?

#4

You’re welcome, @ThrownException , glad to know that worked for you.

Regarding the multicolor icon issue you mentioned, I have not seen any related reports yet. In order to fully capture the details of the issue you are hitting, feel free to create an issue in the Forge project.

#5

So the conclusion:

Use hyphens (-) for @atlaskit/icon sub-packages, which you can find in the examples on the atlassian design page. E.g. hipchat-.

I created a bug report for the multi-color icons.

Thanks @iragudo

1 Like