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
{{ message }}
This repository was archived by the owner on Apr 28, 2025. It is now read-only.
Copy file name to clipboardExpand all lines: CONTRIBUTING.md
+22-22Lines changed: 22 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -66,7 +66,7 @@ Here is a rough overview of steps required when contributing code to skin:
66
66
67
67
## Development Modes
68
68
69
-
Skin can usually considered to be in one of two modes of development:
69
+
Skin can usually be considered to be in one of two modes of development:
70
70
71
71
1. Feature development mode (default)
72
72
1. Refactoring/cleanup/breaking-changes mode
@@ -137,7 +137,7 @@ Here are some types of change that we consider as an incompatible API change:
137
137
- Change to HTML structure or attributes of module
138
138
- Change to CSS property that radically alters appearance and/or layout
139
139
140
-
Typically we will try and add a deprecation note for a period of time before introducing any breaking API change. The creation of aliases can often help ease the transition from one API to another.
140
+
Typically, we will try and add a deprecation note for a period of time before introducing any breaking API change. The creation of aliases can often help ease the transition from one API to another.
141
141
142
142
### New Functionality
143
143
@@ -179,7 +179,7 @@ A milestone branch will be deleted after it has been merged into `master`. There
179
179
180
180
Every time we cut a new milestone branch, the package dependencies require updating.
181
181
182
-
1. Ensure you are on the milestone branch and that the branch is up to date with latest from `master`
182
+
1. Ensure you are on the milestone branch and that the branch is up-to-date with latest from `master`
183
183
1. Run `npm install` to ensure your local node_modules are in sync with your `package-lock.json`
184
184
1. Run `npm outdated`
185
185
1. Go into `package.json` and update version numbers to the latest based on outdated. Pay attention to any major version updates as they may contain breaking changes!
@@ -232,7 +232,7 @@ Guidance for pull requests:
232
232
- Non-atomic commits should be squashed (i.e. "work in progress" type commits).
233
233
- Do not add any commit that leaves the code in a broken state.
234
234
- Pull request for a _feature_ must only contain changes related to the issue (NOTE: refactoring/cleanup type PRs are often exempt from this rule)
235
-
- **Do not** be tempted to go fixing or refactoring unrelated issues. Doing so can make the code reviewer's job more difficult and/or timeconsuming, as well as increasing risk of regression
235
+
- **Do not** be tempted to go fixing or refactoring unrelated issues. Doing so can make the code reviewer's job more difficult and/or time-consuming, as well as increasing risk of regression
236
236
- If you spot some other unrelated bug or code smell, please create a GitHub issue for it.
237
237
- After the pull request has been merged, your issue branch should be immediately deleted (by yourself or admin)
238
238
@@ -246,25 +246,25 @@ When contributing to Skin, please bear the following guidelines in mind:
246
246
247
247
- Ensure all markup adheres to our [accessibility patterns](https://ebay.gitbooks.io/mindpatterns/content/)
248
248
- Ensure all markup is valid HTML
249
-
- Leverage ARIA roles, states and properties for styling hooks wherever possible. This safeguards against non-accessible markup (NOTE: this will increase specificity, but we accept this as a worthwile tradeoff)
249
+
- Leverage ARIA roles, states and properties for styling hooks wherever possible. This safeguards against non-accessible markup (NOTE: this will increase specificity, but we accept this as a worthwhile trade off)
250
250
- Use BEM syntax for modifiers (double-dash) and nested classes (double-underscore)
251
251
- Use the `<svg>` tag for icons
252
252
- Never use the `<i>` tag for icons
253
253
- Harness CSS margin-collapse wherever possible.
254
254
- Most block-level modules will require margin top and bottom as a sensible default
255
-
- Do not use presentational classnames, e.g. `.btn--green` should be `.btn--secondary` for example
256
-
- Do not combine classes into a single classname, e.g. `btn-sec` should be `btn btn--sec`, this allows cascades without advanced attribute selectors or pre-processors
255
+
- Do not use presentational class names, e.g. `.btn--green` should be `.btn--secondary` for example
256
+
- Do not combine classes into a single class name, e.g. `btn-sec` should be `btn btn--sec`, this allows cascades without advanced attribute selectors or pre-processors
257
257
- Do not chain BEM modifiers (e.g. `.btn--large.btn--primary`). This is a code smell.
258
-
- Do not use ambiguous or global classnames, e.g. `.large` should be `.btn--large`
258
+
- Do not use ambiguous or global class names, e.g. `.large` should be `.btn--large`
259
259
- Do not use class `.disabled` to disable buttons or form elements, use the HTML `disabled` property instead
260
260
- Do not wrap inputs with labels, use explicit labels instead (e.g. use the `for` and `id` attributes)
261
-
- Do not use `href="#"` or `href="javascript"` in examples, use `href="http://www.ebay.com"` or any other dummy url
261
+
- Do not use `href="#"` or `href="javascript"` in examples, use `href="http://www.ebay.com"` or any other dummy URL
262
262
- Every `<img>` tag must have an `alt` attribute, with **no** exceptions. The value can be an empty string for presentational images.
263
263
- Avoid naming conflicts with other grid systems (e.g. Bootstap Grids)
264
264
- Keep LESS pre-processor usage restricted to variables, mixins and basic nesting (see below). 9 times out of 10 advanced features of pre-processors can be avoided by using CSS properly.
265
-
- Avoid too much nesting/indenting of LESS selectors as it can reduce human scan-ability of code and can also result in sub-optimal compiled CSS. Try and restrict nesting to pseudo selectors only (e.g. `:focus`, `::after`).
265
+
- Avoid too much nesting/indenting of LESS selectors as it can reduce human scan-ability of code and can also result in suboptimal compiled CSS. Try and restrict nesting to pseudo selectors only (e.g. `:focus`, `::after`).
266
266
- Avoid over specificity (unless required for accessibility safeguarding). The fewer rules required to check for a given element, the faster style resolution will be. This is the key to dramatically increasing performance.
- Please do not commit commented out code to production.
269
269
270
270
## LESS API (deprecated)
@@ -273,7 +273,7 @@ In comparison to past versions, Skin now offers a very minimal public LESS API (
273
273
274
274
## Custom Property API
275
275
276
-
Skin has a token based system that leverages CSS Custom Properties. The tokens are categorised into three levels:
276
+
Skin has a token based system that leverages CSS Custom Properties. The tokens are categorized into three levels:
277
277
278
278
- core
279
279
- semantic
@@ -314,9 +314,9 @@ Obviously with great power, comes great responsibility.
314
314
315
315
Every Skin module has full support for [dark mode](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
316
316
317
-
Dark mode is powered by the [Custom Property API](#custom-property-api). When the "prefers-color-scheme" media query is satisfied, all semantic token values will be replaced, dynamically at runtime, with the values from the relevant tokens module (e.g.`evo-semantic-dark` or `evo-semantic-light`).
317
+
Dark mode is powered by the [Custom Property API](#custom-property-api). When the "prefers-color-scheme" media query is satisfied, all semantic token values will be replaced, dynamically at runtime, with the values from the relevant tokens module (e.g.,`evo-semantic-dark` or `evo-semantic-light`).
318
318
319
-
**NOTE:** the semantic dark mode tokens are **not** included by default. They must be explicitly bundled by the end user. This allows end users to opt-in to dark mode only when their base page is ready for it.
319
+
**NOTE:** the semantic dark mode tokens are **not** included by default. They must be explicitly bundled by the end user. This allows end users to optin to dark mode only when their base page is ready for it.
320
320
321
321
## Storybook
322
322
@@ -344,7 +344,7 @@ Internal contributors will need to set up to run Percy snapshots by adding the P
344
344
345
345
This will allow internal contributors to run Percy snapshot tests.
346
346
347
-
Snapshots will likely be ran by developers locally before pushing up changes. Once they are ran, Percy dashboard should be checked to ensure no unintended style changes have taken place. If there are unintended style changes that have occurred, those should be reverted/fixed. Once the set of new local changes is final and in scope with the changes related to the issue, the snapshot run will need to be marked as the canonical version against which future updates are compared.
347
+
Snapshots will likely be run by developers locally before pushing up changes. Once they are run, Percy dashboard should be checked to ensure no unintended style changes have taken place. If there are unintended style changes that have occurred, those should be reverted/fixed. Once the set of new local changes is final and in scope with the changes related to the issue, the snapshot run will need to be marked as the canonical version against which future updates are compared.
348
348
349
349
#### Build Modes
350
350
@@ -417,8 +417,8 @@ Please ensure your NPM registry is set correctly and that you are on the package
417
417
418
418
A pre-release is always made from a milestone branch.
419
419
420
-
1. Run `npm version prepatch`, `npm version preminor`, or `npm version premajor`. If you need to increment an existing prerelease use `npm version prerelease`. This command will automatically:
421
-
- update the version number in css build files
420
+
1. Run `npm version prepatch`, `npm version preminor`, or `npm version premajor`. If you need to increment an existing pre-release use `npm version prerelease`. This command will automatically:
421
+
- update the version number in CSS build files
422
422
- update the version number in `package.json`
423
423
- commit all changes locally
424
424
- create a Git tag
@@ -433,7 +433,7 @@ A final release is always made from the master branch.
433
433
1. Merge the PR after approval (do not squash!)
434
434
1. Switch to your local master branch and pull the changes from origin.
435
435
1. Run `npm version patch`, `npm version minor`, or `npm version major`. This command will automatically:
436
-
- update the version number in css build files
436
+
- update the version number in CSS build files
437
437
- update the version number in `package.json`
438
438
- update the version number in Jekyll docs
439
439
- commit all changes locally
@@ -459,7 +459,7 @@ Git tags to the rescue! Git tags allow us to go back to any moment in time that
459
459
460
460
1. Go to tags page: https://github.com/eBay/skin/tags
461
461
1. Select the tag you'd like to go back in time to, e.g. https://github.com/eBay/skin/tree/v6.3.5
462
-
1. Select the tag dropdown and create a new branch named accordingly, e.g `6.3.6`. This is the branch you will merge your PR to and do the release from.
462
+
1. Select the tag dropdown and create a new branch named accordingly, e.g. `6.3.6`. This is the branch you will merge your PR to and do the release from.
463
463
1. Create _another_ branch for your local dev work, e.g. `1723-textbox-fix`.
464
464
1. Now follow the [release steps](#final-release) mentioned above, but substituting `master` branch for your release branch (e.g. `6.3.6`) and milestone branch for your dev branch (e.g. `1723-textbox-fix`). **IMPORTANT:** No changes should be pushed to master branch!
465
465
1. Don't forget to publish your new git tag (e.g. `v6.3.6`)
@@ -470,6 +470,6 @@ Git tags to the rescue! Git tags allow us to go back to any moment in time that
470
470
The website archive under `/docs/archive` should be updated each time a minor or major release is published.
471
471
472
472
1. In a local branch, checkout the tag of the previous version, e.g. `git checkout v10.7.5`
473
-
1. Run `npm i`
474
-
1. Run `npx marko-run build -o /docs/archive/v0.7.5`
475
-
1. Create a pull request
473
+
2. Run `npm i`
474
+
3. Run `npx marko-run build -o /docs/archive/v0.7.5`
0 commit comments