Hi all,
In want to integrate Atlaskit UI components to my Forge Custom UI App.
I have installed the components via npm and can access them in my static frontend sources, however, the components does not inherit the Atlaskit CSS styles.
Within my package.json the @atlaskit/css-reset is present in version 6.9.0. Within my top-level index.js file I have added following lines of code:
import ‘@atlaskit/css-reset‘
ReactDOM.render(
…
document.getElementById(‘root‘)
);
What do I need to do to get the components rendered with the correct CSS styles?
Best Valentin
Hi @ValentinPravtchev ,
Would you be able to try referencing the CSS in your index.html. Here’s a code snippet copied and adapted from https://atlassian.design/components/css-reset/code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your page</title>
<link rel="stylesheet" href="node_modules/@atlaskit/css-reset/dist/bundle.css" />
<!-- your awesome styles -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Dugald
Could you give a few examples of how you are using Atlaskit components in your React app?
1 Like
Hi,
@dmorrow and @AndreiPisklenov
Unfortunately, it is still not working, here are the files.
-
Project overview
$ ls -la
total 1113
drwxr-xr-x 1 admin 197121 0 May 31 11:43 ./
drwxr-xr-x 1 admin 197121 0 May 14 09:25 ../
-rw-r--r-- 1 admin 197121 187 May 13 04:46 .gitignore
drwxr-xr-x 1 admin 197121 0 Jun 19 12:52 build/
drwxr-xr-x 1 admin 197121 0 Jun 3 10:42 node_modules/
-rw-r--r-- 1 admin 197121 1279 Jun 19 12:36 package.json
-rw-r--r-- 1 admin 197121 799512 Jun 19 12:36 package-lock.json
drwxr-xr-x 1 admin 197121 0 May 14 09:25 public/
drwxr-xr-x 1 admin 197121 0 Jun 19 12:28 src/
-
package.json
{
"name": "jira-project-settings-page-custom-ui-static",
"version": "0.1.34",
"private": true,
"homepage": ".",
"dependencies": {
"@atlaskit/banner": "^12.4.0",
"@atlaskit/css-reset": "^6.9.0",
"@atlaskit/heading": "^2.3.0",
"@atlaskit/icon": "^22.4.0",
"@atlaskit/link": "^0.5.0",
"@forge/react": "^10.1.1",
"eslint": "^8.57.0",
"react": "^16",
"react-dom": "^16",
"styled-components": "^3.2.0",
"typescript": "4.5"
},
"devDependencies": {
"react-scripts": "^5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
-
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="node_modules/@atlaskit/css-reset/dist/bundle.css" />
<!-- your awesome styles -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
-
src/index.js
import React from "react";
import ReactDOM from "react-dom";
import "@atlaskit/css-reset";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
-
src/App.js
import React, { useEffect, useState } from 'react';
// import UI elements
import Heading from '@atlaskit/heading';
import WarningIcon from '@atlaskit/icon/glyph/warning';
import Link from '@atlaskit/link';
import Banner from '@atlaskit/banner';
const BannerWarningExample = () => {
return (
<Banner appearance="warning" icon={<WarningIcon label="Warning" secondaryColor="inherit" />}>
Payment details needed. To stay on your current plan, add payment details by June 30, 2020.{' '}
<Link href="/components/banner/examples">Add payment details</Link>
</Banner>
);
};
function App() {
useEffect(() => {}, []);
return (
<div>
<Heading size="small" as="h1">Project Details</Heading>
<BannerWarningExample />
</div>
);
}
export default App;
Thanks for your help.
Best
Julius
1 Like
Hi @JuliusPravtchev ,
I’ve copied your code and I see the styles from the import '@atlaskit/css-reset' having an effect.
Without import '@atlaskit/css-reset' I see:
With import '@atlaskit/css-reset' I see:
Is this different to what you observe?
Dugald
1 Like
Hi @dmorrow ,
thanks for the quick response. It is the same for me with and without the import. However, it totally differs from the example banner like from this example:
Banner - Examples - Components - Atlassian Design System
Have we forgotten something?
Best
Julius
1 Like
Hi @JuliusPravtchev ,
Ah, sorry, now I understand. Please add the following snippet to your Forge manifest to allow it to apply the styles required by the component. Without this the application of the styles is blocked by the style-src-elem CSP policy applied to the iframe.
permissions:
content:
styles:
- 'unsafe-inline'
Dugald
2 Likes
Thanks @dmorrow , it works!
Best Julius
1 Like
