Skip to content

Commit 5090a26

Browse files
committed
futher clarify pattern states
1 parent 03e85a7 commit 5090a26

File tree

1 file changed

+25
-2
lines changed

1 file changed

+25
-2
lines changed

README.md

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,8 +144,7 @@ The current selection is as follows.
144144
}
145145
```
146146
##### Pattern States
147-
You can set the state of a pattern by including it in `patternlab-config.json` too. The out of the box styles are in progress (orange), in review (yellow), and complete (green).
148-
Pattern states should be lowercase and use hyphens where spaces are present.
147+
You can set the state of a pattern by including its key in the `patternStates` object in `patternlab-config.json`, along with a style defined inside `patternStateCascade`. The out of the box styles are in progress (orange), in review (yellow), and complete (green).
149148
```
150149
"patternStates": {
151150
"atoms-colors" : "complete",
@@ -168,6 +167,30 @@ In this case, two things are of note:
168167
* templates-article will display inreview since it inherits `organisms-sticky-comment`
169168
* pages-article will not display any pattern state, as it does not define one
170169

170+
The `patternStateCascade` array is important in that the order is hierarchical.
171+
The default is below:
172+
173+
```
174+
"patternStateCascade": ["inprogress", "inreview", "complete"],
175+
```
176+
177+
which correspond to classes defined inside `./core/styleguide/css/styleguide.css`
178+
179+
```
180+
/* pattern states */
181+
.inprogress:before {
182+
color: #FF4136 !important;
183+
}
184+
185+
.inreview:before {
186+
color: #FFCC00 !important;
187+
}
188+
189+
.complete:before {
190+
color: #2ECC40 !important;
191+
}
192+
```
193+
171194
##### Pattern Export
172195
`patternlab-config.json` also has two properties that work together to export completed patterns for use in a production environment. Provide an array of keys and an output directory. Pattern Lab doesn't ship with any pattern export keys, but the default directory is `"./pattern_exports/"` created inside the install directory.
173196

0 commit comments

Comments
 (0)