You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+15-38
Original file line number
Diff line number
Diff line change
@@ -50,40 +50,24 @@ Attachments from test runs are shown with their corresponding steps. The baselin
50
50
51
51
## Styling
52
52
53
-
The standard styling comes from wrapping your top-level usage with the `CucumberReact` component (sans-props). There are several ways you can apply different styling to the components.
53
+
The standard styling comes without any extra providers or configuration. There are several ways you can apply different styling to the components.
54
54
55
-
### Built-in themes
55
+
### Theming
56
56
57
-
These are the built-in themes:
58
-
59
-
-`light` (default)
60
-
-`dark`
61
-
-`auto` (honours your operating system preference for either light or dark)
62
-
63
-
You can activate one of these by passing the `theme` prop to the `CucumberReact` component:
57
+
You can also provide your own theme with a small amount of CSS. Target the element above your highest-level usage of the components:
64
58
65
59
```jsx
66
-
<CucumberReact theme="dark">
60
+
<div className="dark-theme">
67
61
<GherkinDocument />
68
-
</CucumberReact>
62
+
</div>
69
63
```
70
64
71
-
### Custom themes
72
-
73
-
You can also provide your own theme with a small amount of CSS. Pass the `CucumberReact` component a class name instead of a theme name:
74
-
75
-
```jsx
76
-
<CucumberReact className="acme-widgets">
77
-
<GherkinDocument />
78
-
</CucumberReact>
79
-
```
80
-
81
-
In your CSS for the `acme-widgets` class, you can override the supported [custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) values as desired. Here's the CSS that drives the built-in "dark" theme:
65
+
In your CSS, you can set the background and text colors, and override the supported [custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) values as desired:
82
66
83
67
```css
84
-
.darkTheme {
85
-
--cucumber-background-color: #1d1d26;
86
-
--cucumber-text-color: #c9c9d1;
68
+
.dark-theme {
69
+
background-color: #1d1d26;
70
+
color: #c9c9d1;
87
71
--cucumber-anchor-color: #4caaee;
88
72
--cucumber-keyword-color: #d89077;
89
73
--cucumber-parameter-color: #4caaee;
@@ -99,13 +83,6 @@ In your CSS for the `acme-widgets` class, you can override the supported [custom
99
83
}
100
84
```
101
85
102
-
### Fonts
103
-
104
-
By default, web-safe default font stacks are used, but you can override these so the components use your preferred fonts. These custom properties are supported:
105
-
106
-
-`--cucumber-sans-font-family` - the font used for the text
107
-
-`--cucumber-mono-font-family` - the font used for doc strings and attachments
108
-
109
86
### Custom styles
110
87
111
88
For more control over the styling, you can override the CSS used by individual components.
@@ -123,16 +100,16 @@ Let's say you want to do something totally different with the typography of doc
123
100
}
124
101
```
125
102
126
-
Then, you can provide a `customRendering` prop to the `CucumberReact` component, in the form of an object that declares which class names you're going to override and what with:
103
+
Then, you can provide an `overrides` prop to the `CustomRendering` component, in the form of an object that declares which class names you're going to override and what with:
127
104
128
105
```jsx
129
-
<CucumberReact customRendering={{
106
+
<CustomRendering overrides={{
130
107
DocString: {
131
108
docString:'acme-docstring'
132
109
}
133
110
}}>
134
111
<GherkinDocument />
135
-
</CucumberReact>
112
+
</CustomRendering>
136
113
```
137
114
138
115
Some components have multiple styling hooks - e.g. the `<Tags>` component has the `tags` class name for the list, and the `tag` class name for each item. In these cases, you can provide custom class names for just the ones you want to change, and any you omit will pick up the built-in styling like normal.
@@ -141,10 +118,10 @@ Some components have multiple styling hooks - e.g. the `<Tags>` component has th
141
118
142
119
To change the rendering of some components entirely, you can selectively provide your own component implementations to be used instead of the built-in ones.
143
120
144
-
Staying with the doc string example, you can use the same `customRendering` prop, but this time instead of an object with class names, you provide a React functional component, giving you full control over the rendering:
121
+
Staying with the doc string example, you can use the same `overrides` prop, but this time instead of an object with class names, you provide a React functional component, giving you full control over the rendering:
145
122
146
123
```jsx
147
-
<CucumberReact customRendering={{
124
+
<CustomRendering overrides={{
148
125
DocString: (props) => (
149
126
<>
150
127
<p>I am going to render this doc string in a textarea:</p>
@@ -153,7 +130,7 @@ Staying with the doc string example, you can use the same `customRendering` prop
153
130
)
154
131
}}>
155
132
<GherkinDocument />
156
-
</CucumberReact>
133
+
</CustomRendering>
157
134
```
158
135
159
136
In each case where you provide your own component, it will receive the same props as the default component, plus two more:
0 commit comments