@instructure/emotion - npm Package Compare versions

package.json

		{
		"name": "@instructure/emotion",
		"version": "7.4.2-snapshot.471+f15c070df",
		"version": "7.5.1-snapshot.483+1ed7255bf",
		"description": "A UI component library made by Instructure Inc.",
		@@ -28,8 +28,8 @@ "author": "Instructure, Inc. Engineering and Product Design",
		"@emotion/core": "^10.0.35",
		"@instructure/console": "7.4.2-snapshot.471+f15c070df",
		"@instructure/ui-babel-preset": "7.4.2-snapshot.471+f15c070df",
		"@instructure/ui-decorator": "7.4.2-snapshot.471+f15c070df",
		"@instructure/ui-i18n": "7.4.2-snapshot.471+f15c070df",
		"@instructure/ui-themes": "7.4.2-snapshot.471+f15c070df",
		"@instructure/ui-utils": "7.4.2-snapshot.471+f15c070df",
		"@instructure/console": "7.5.1-snapshot.483+1ed7255bf",
		"@instructure/ui-babel-preset": "7.5.1-snapshot.483+1ed7255bf",
		"@instructure/ui-decorator": "7.5.1-snapshot.483+1ed7255bf",
		"@instructure/ui-i18n": "7.5.1-snapshot.483+1ed7255bf",
		"@instructure/ui-themes": "7.5.1-snapshot.483+1ed7255bf",
		"@instructure/ui-utils": "7.5.1-snapshot.483+1ed7255bf",
		"emotion-theming": "^10.0.27",
		@@ -41,4 +41,4 @@ "hoist-non-react-statics": "^3.3.2",
		"devDependencies": {
		"@instructure/ui-babel-preset": "^7.4.1",
		"@instructure/ui-test-utils": "7.4.2-snapshot.471+f15c070df"
		"@instructure/ui-babel-preset": "^7.5.0",
		"@instructure/ui-test-utils": "7.5.1-snapshot.483+1ed7255bf"
		},
		@@ -52,3 +52,3 @@ "peerDependencies": {
		"sideEffects": false,
		"gitHead": "f15c070dfd3abf2ba7392aaa84ba68e597ae9a1e"
		"gitHead": "1ed7255bf4a76aa4446d3c93516c375207078b6d"
		}

README.md

		@@ -336,2 +336,74 @@ ---

		#### Global styles

		Write your global styles in the `styles.js` file on a "globalStyles" key. You don't have to add labels to global styles.

		```js
		// styles.js

		return {
		globalStyles: {
		'.CodeMirror': {
		height: 'auto',
		background: componentTheme.background
		// ...
		}
		}
		}
		```

		In the `index.js`, import `Global` from `@instructure/emotion`, which is equivalent to the [Global](https://emotion.sh/docs/globals) component of Emotion.js.

		In the render method, use the `<Global>` component and pass the the "globalStyles" as its `styles={}` property.

		```jsx
		// index.js

		import { withStyle, jsx, Global } from '@instructure/emotion'

		// ...

		render() {
		const { styles } = this.props

		return (
		<div css={styles.codeEditor}>
		<Global styles={styles.globalStyles} />
		// ...
		</div>
		)
		}
		```

		#### Keyframes

		Animations are handled with Emotion's [keyframes](https://emotion.sh/docs/keyframes) helper.

		Import `keyframes` from `@instructure/emotion` in the `styles.js` file.

		Define the animation on the top of the page as a `const` and use it in your style object where needed. Make sure that it is defined outside of the `generateStyle` method, otherwise it is causing problems with style recalculation.

		```js
		// styles.js

		import { keyframes } from '@instructure/emotion'

		const pulseAnimation = keyframes`
		to {
		transform: scale(1);
		opacity: 0.9;
		}`

		const generateStyle = (componentTheme, props, state) => {
		// ...

		return {
		componentClass: {
		// ...
		animationName: pulseAnimation
		}
		}
		}
		```

		#### Writing theme tests
		@@ -338,0 +410,0 @@

New alerts