GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Completely move to emotion 10

Browse Source
This commit is contained in:
Pavan Kumar Sunkara 2018-09-19 18:40:37 +02:00
parent 84fd7939f7
commit d4e65cc7ed
6 changed files with 57 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/react/package.json
View File

@ -35,7 +35,6 @@
"@storybook/core": "4.0.0-alpha.21",
"babel-plugin-react-docgen": "^2.0.0-babel7.0",
"common-tags": "^1.8.0",
"emotion": "^9.2.6",
"global": "^4.3.2",
"lodash.flattendeep": "^4.4.0",
"prop-types": "^15.6.2",

2
docs/src/pages/addons/writing-addons/index.md
View File

@ -118,7 +118,7 @@ Then add the following code to the register.js.
```js
import React from 'react';
import addons from '@storybook/addons';
import styled from 'emotion';
import styled from '@emotion/styled';
const NotesPanel = styled.div({
margin: 10,

1
lib/ui/package.json
View File

@ -35,7 +35,6 @@
"@storybook/podda": "^1.2.3",
"@storybook/react-komposer": "^2.0.4",
"deep-equal": "^1.0.1",
"emotion": "^9.2.8",
"events": "^3.0.0",
"fuse.js": "^3.2.1",
"global": "^4.3.2",

45
lib/ui/src/modules/ui/components/search_box.js
View File

@ -5,8 +5,7 @@ import { polyfill } from 'react-lifecycles-compat';
import ReactModal from 'react-modal';
import FuzzySearch from 'react-fuzzy';
import { withCSSContext } from '@emotion/core';
import { css } from 'emotion';
import { css, withCSSContext } from '@emotion/core';
const formatStories = stories => {
const formattedStories = [];
@ -102,25 +101,29 @@ class SearchBox extends React.Component {
isOpen={showSearchBox}
onAfterOpen={this.onModalOpen}
onRequestClose={onClose}
className={css({
fontSize: theme.mainTextColor,
fontFamily: theme.mainTextFace,
color: theme.mainTextColor,
})}
overlayClassName={css({
position: 'fixed',
height: '100vh',
width: '100vw',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: theme.overlayBackground,
zIndex: 1,
})}
className={
css({
fontSize: theme.mainTextColor,
fontFamily: theme.mainTextFace,
color: theme.mainTextColor,
}).name
}
overlayClassName={
css({
position: 'fixed',
height: '100vh',
width: '100vw',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: theme.overlayBackground,
zIndex: 1,
}).name
}
contentLabel="Search"
shouldReturnFocusAfterClose={false}
>

59
lib/ui/src/modules/ui/components/shortcuts_help.js
View File

@ -1,10 +1,9 @@
import PropTypes from 'prop-types';
import React from 'react';
import styled from '@emotion/styled';
import { withCSSContext } from '@emotion/core';
import { css } from 'emotion';
import ReactModal from 'react-modal';
import { css, withCSSContext } from '@emotion/core';
const Command = styled.b(
({ isLast, isFirst, theme }) => {
@ -140,32 +139,36 @@ function ShortcutsHelp({ isOpen, onClose, platform }, { theme }) {
<ReactModal
isOpen={isOpen}
onRequestClose={onClose}
className={css({
position: 'absolute',
border: theme.mainBorder,
borderRadius: theme.mainBorderRadius,
boxSizing: 'border-box',
padding: 32,
top: 32,
left: '50%',
width: 440,
outline: '0 none',
marginLeft: -220,
overflow: 'visible',
background: theme.barFill,
fontSize: theme.mainTextColor,
fontFamily: theme.mainTextFace,
color: theme.mainTextColor,
})}
overlayClassName={css({
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: theme.overlayBackground,
zIndex: 1,
})}
className={
css({
position: 'absolute',
border: theme.mainBorder,
borderRadius: theme.mainBorderRadius,
boxSizing: 'border-box',
padding: 32,
top: 32,
left: '50%',
width: 440,
outline: '0 none',
marginLeft: -220,
overflow: 'visible',
background: theme.barFill,
fontSize: theme.mainTextColor,
fontFamily: theme.mainTextFace,
color: theme.mainTextColor,
}).name
}
overlayClassName={
css({
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: theme.overlayBackground,
zIndex: 1,
}).name
}
contentLabel="Shortcuts"
>
<Shortcuts appShortcuts={getShortcuts(platform)} />

2
yarn.lock
View File

@ -6741,7 +6741,7 @@ emojis-list@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
emotion@9.2.8, emotion@^9.2.6, emotion@^9.2.8:
emotion@9.2.8:
version "9.2.8"
resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.8.tgz#b89e754be1a109f4e47ff0031928f94e40d7984a"
dependencies: