@sproutsocial/racine 7.5.0-update.0 → 7.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +18 -1
- package/__flow__/Box/styles.js +5 -5
- package/__flow__/ChartLegend/styles.js +6 -6
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
|
|
24
24
|
## Installation
|
|
25
25
|
|
|
26
|
-
Install Racine
|
|
26
|
+
Install Racine using npm or yarn:
|
|
27
27
|
|
|
28
28
|
```sh
|
|
29
29
|
$ yarn add @sproutsocial/racine react styled-components
|
|
@@ -31,6 +31,23 @@ $ yarn add @sproutsocial/racine react styled-components
|
|
|
31
31
|
$ npm install @sproutsocial/racine react styled-components
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
+
You may also require specific peer dependencies when starting a new project or sandbox environment:
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
@sproutsocial/seeds-border
|
|
38
|
+
@sproutsocial/seeds-color
|
|
39
|
+
@sproutsocial/seeds-depth
|
|
40
|
+
@sproutsocial/seeds-motion
|
|
41
|
+
@sproutsocial/seeds-networkcolor
|
|
42
|
+
@sproutsocial/seeds-space
|
|
43
|
+
@sproutsocial/seeds-typography
|
|
44
|
+
moment
|
|
45
|
+
prop-types
|
|
46
|
+
react
|
|
47
|
+
react-dates
|
|
48
|
+
styled-components
|
|
49
|
+
```
|
|
50
|
+
|
|
34
51
|
Then, wrap your app's React root in Racine's `ThemeProvider` component:
|
|
35
52
|
|
|
36
53
|
```js
|
package/__flow__/Box/styles.js
CHANGED
|
@@ -32,15 +32,15 @@ export type TypeContainerProps = $ReadOnly<{|
|
|
|
32
32
|
|
|
33
33
|
type TypeBoxContainer = StyledComponent<TypeContainerProps, TypeTheme, *>;
|
|
34
34
|
const Container: TypeBoxContainer = styled.div`
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
font-family: ${({ theme }) => theme.fontFamily};
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
${COMMON}
|
|
39
|
+
${BORDER}
|
|
40
40
|
${LAYOUT}
|
|
41
41
|
${POSITION}
|
|
42
42
|
${FLEXBOX}
|
|
43
43
|
${GRID}
|
|
44
|
-
|
|
44
|
+
`;
|
|
45
45
|
|
|
46
46
|
export default Container;
|
|
@@ -25,13 +25,13 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.div`
|
|
|
25
25
|
${(props) =>
|
|
26
26
|
props.inline &&
|
|
27
27
|
css`
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
display: flex;
|
|
29
|
+
justify-content: center;
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
${Label} + ${Label} {
|
|
32
|
+
margin-left: ${(props) => props.theme.space[450]};
|
|
33
|
+
}
|
|
34
|
+
`}
|
|
35
35
|
|
|
36
36
|
${COMMON}
|
|
37
37
|
${LAYOUT}
|