mirror of
https://github.com/apache/superset.git
synced 2024-09-19 20:19:37 -04:00
feat(superset-ui-style): export ThemeProvider and useTheme (#553)
This commit is contained in:
parent
be31aa4997
commit
a39a058919
@ -1,7 +1,6 @@
|
|||||||
// themeDecorator.js
|
// themeDecorator.js
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import { ThemeProvider } from 'emotion-theming';
|
import { supersetTheme, ThemeProvider } from '@superset-ui/style';
|
||||||
import { supersetTheme } from '@superset-ui/style';
|
|
||||||
|
|
||||||
const ThemeDecorator = storyFn => (
|
const ThemeDecorator = storyFn => (
|
||||||
<ThemeProvider theme={supersetTheme}>{storyFn()}</ThemeProvider>
|
<ThemeProvider theme={supersetTheme}>{storyFn()}</ThemeProvider>
|
||||||
|
@ -8,8 +8,7 @@ Provides a style object containing a variety of style parameters for theming Sup
|
|||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { ThemeProvider } from 'emotion-theming';
|
import { styled, supersetTheme, ThemeProvider } from '@superset-ui/style';
|
||||||
import styled, { supersetTheme } from '@superset-ui/style';
|
|
||||||
|
|
||||||
// use emotion api as normal, but the theme uses the correct types
|
// use emotion api as normal, but the theme uses the correct types
|
||||||
const MyHeader = styled.h1`
|
const MyHeader = styled.h1`
|
||||||
|
@ -30,6 +30,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/core": "^10.0.28",
|
"@emotion/core": "^10.0.28",
|
||||||
"@emotion/styled": "^10.0.27"
|
"@emotion/styled": "^10.0.27",
|
||||||
|
"emotion-theming": "^10.0.27"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -16,7 +16,9 @@
|
|||||||
* specific language governing permissions and limitations
|
* specific language governing permissions and limitations
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import styled, { CreateStyled } from '@emotion/styled';
|
import emotionStyled, { CreateStyled } from '@emotion/styled';
|
||||||
|
|
||||||
|
export { useTheme, ThemeProvider, withTheme } from 'emotion-theming';
|
||||||
|
|
||||||
const defaultTheme = {
|
const defaultTheme = {
|
||||||
borderRadius: 4,
|
borderRadius: 4,
|
||||||
@ -60,10 +62,11 @@ const defaultTheme = {
|
|||||||
gridUnit: 4,
|
gridUnit: 4,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default styled as CreateStyled<typeof defaultTheme>;
|
|
||||||
|
|
||||||
export const supersetTheme = defaultTheme;
|
|
||||||
|
|
||||||
export interface SupersetThemeProps {
|
export interface SupersetThemeProps {
|
||||||
theme: typeof defaultTheme;
|
theme: typeof defaultTheme;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const styled: CreateStyled<typeof defaultTheme> = emotionStyled;
|
||||||
|
export const supersetTheme = defaultTheme;
|
||||||
|
|
||||||
|
export default styled;
|
||||||
|
@ -33,7 +33,6 @@
|
|||||||
"@types/react": "^16.3.0",
|
"@types/react": "^16.3.0",
|
||||||
"d3-cloud": "^1.2.5",
|
"d3-cloud": "^1.2.5",
|
||||||
"d3-scale": "^3.0.1",
|
"d3-scale": "^3.0.1",
|
||||||
"emotion-theming": "^10.0.27",
|
|
||||||
"encodable": "^0.3.3"
|
"encodable": "^0.3.3"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import cloudLayout, { Word } from 'd3-cloud';
|
import cloudLayout, { Word } from 'd3-cloud';
|
||||||
import { PlainObject, createEncoderFactory, DeriveEncoding } from 'encodable';
|
import { PlainObject, createEncoderFactory, DeriveEncoding } from 'encodable';
|
||||||
import { SupersetThemeProps } from '@superset-ui/style';
|
import { SupersetThemeProps, withTheme } from '@superset-ui/style';
|
||||||
import { withTheme } from 'emotion-theming';
|
|
||||||
|
|
||||||
export const ROTATION = {
|
export const ROTATION = {
|
||||||
flat: () => 0,
|
flat: () => 0,
|
||||||
|
Loading…
Reference in New Issue
Block a user