-
Notifications
You must be signed in to change notification settings - Fork 194
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: move to individually versioned packages with Lerna (#265)
Update Textarea line-height and min-height, closes #231 Fix spinner buttons appearing on Steppers in Firefox, closes #214 Fix search field on iOS, closes #229 Fix Menu chevron vertical alignment, fixes #240 Fix horizontal alignment of labels in anchor buttons, fixes #239 Remove button outline when focused in Firefox, fixes #161 Fix bar loader label in IE 11, fixes #242 Fix Radio label margins when labels are below, fixes #246 Fix Checkbox icon color when checkbox imported before icons, fixes #219 (#235) Add Adobe Clean UX support, closes #189 (#248) Fix fallback fonts for ar, he, ja, zh-Hans, zh-Hant, and ko, closes #232 (#248) Removed float from tags, fixes #218 (#237) Make Slider grab handle look right in docs, closes #255 Add missing Asset docs, closes #256 Add Menu .is-highlighted so we can indicate highlight without mis-using .is-open, closes #258 Support using links as menu items, closes #257 Fix incorrect height for small BarLoader, fixes #259
- Loading branch information
Showing
1,012 changed files
with
74,742 additions
and
48,323 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,27 @@ | ||
<!--- Provide a general summary of your changes in the Title above --> | ||
<!-- Summarize your changes in the Title field --> | ||
|
||
## Description | ||
<!--- Describe your changes in detail --> | ||
<!-- | ||
Note: Before sending a pull request, make sure there's an issue for what you're changing | ||
- Search for issues: https://github.com/adobe/spectrum-css/issues | ||
- If there's no issue, file it: https://github.com/adobe/spectrum-css/issues/new/choose | ||
--> | ||
<!-- Describe what you changed and link to the relevant issue(s) (e.g., #000) --> | ||
|
||
## Related Issue | ||
<!--- This project only accepts pull requests related to open issues --> | ||
<!--- If suggesting a new feature or change, please discuss it in an issue first --> | ||
<!--- If fixing a bug, there should be an issue describing it with steps to reproduce --> | ||
<!--- Please link to the issue here: --> | ||
|
||
## Motivation and Context | ||
<!--- Why is this change required? What problem does it solve? --> | ||
## How and where has this been tested? | ||
|
||
## How Has This Been Tested? | ||
<!--- Please describe in detail how you tested your changes. --> | ||
<!--- Include details of your testing environment, and the tests you ran to --> | ||
<!--- see how your change affects other areas of the code, etc. --> | ||
- How this was tested: <!-- Using steps in issue #000 --> | ||
- Browser(s) and OS(s) this was tested with: <!-- Chrome 75.0.3770.142 on Win 10 --> | ||
|
||
## Screenshots (if appropriate): | ||
## Screenshots | ||
<!-- If applicable, add screenshots to show what you changed --> | ||
|
||
## Types of changes | ||
<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> | ||
- [ ] Bug fix (non-breaking change which fixes an issue) | ||
- [ ] New feature (non-breaking change which adds functionality) | ||
- [ ] Breaking change (fix or feature that would cause existing functionality to change) | ||
|
||
## Checklist: | ||
<!--- Go over all the following points, and put an `x` in all the boxes that apply. --> | ||
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> | ||
- [ ] My change requires a change to the documentation. | ||
- [ ] I have updated the documentation accordingly. | ||
- [ ] I have read the **CONTRIBUTING** document. | ||
## To-do list | ||
<!-- Put an "x" to indicate you've done each of the following --> | ||
- [ ] If my change impacts other components, I have tested to make sure they don't break. | ||
- [ ] If my change impacts documentation, I have updated the documentation accordingly. | ||
- [ ] I have read the [CONTRIBUTING document](/.github/CONTRIBUTING.md). | ||
<!-- If this pull request isn't ready, add any remaning tasks here --> | ||
- [ ] This pull request is ready to merge. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,3 +9,7 @@ | |
/gulpfile.js | ||
npm-debug.log | ||
/.github | ||
/dist/docs/ | ||
/components | ||
/tools | ||
/bundles |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
12.* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,19 @@ | ||
language: node_js | ||
node_js: | ||
- "lts/*" | ||
- "node" | ||
services: | ||
- docker | ||
before_install: | ||
- npm install -g yarn | ||
install: | ||
- yarn | ||
before_script: | ||
- npm install -g gulp-cli | ||
- yarn global add gulp-cli | ||
script: | ||
# This script should be the first that runs to reduce the risk of | ||
# executing a script from a compromised NPM package. | ||
- audit-ci --moderate | ||
- gulp travis-build | ||
- gulp build | ||
- gulp dev & | ||
- sleep 5 | ||
- yarn run backstop:ci:test themes=light scales=medium |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
ignore-optional true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
# Spectrum CSS legacy usage | ||
|
||
In order to enable graceful change to individual components, and to let you consume only the changes you want to consume on the timeline you want to consume it, Spectrum CSS has moved to individually versioned components. In addition, we've moved to a CSS custom properties approach as our default usage method. | ||
|
||
Though these were necessary moves, we didn't want to leave existing users stranded while making them. As such, we still support the following legacy usage and distribution methods detailed below. | ||
|
||
## Bundle packages | ||
|
||
Bundle packages with all of the Spectrum CSS components are available for existing consumers that aren't yet ready to move to individually versioned components. All of the same files included in the individually versioned releases are present, albeit within `dist/components/`. | ||
|
||
**Avoid the bundle packages if you're starting fresh with Spectrum CSS, and instead [install only the components you need](README.md#using-spectrum-css).** | ||
|
||
### Backwards-compatible bundle | ||
|
||
This package WILL NOT get updates to components that have had breaking changes, so it should be used only as a stand-in until your team has time to move to individually versioned components. | ||
|
||
To install the backwards-compatible bundle: | ||
|
||
``` | ||
npm install @adobe/spectrum-css | ||
``` | ||
|
||
### Latest bundle | ||
|
||
To install the bundle with the latest components: | ||
|
||
``` | ||
npm install @spectrum-css/spectrum-css | ||
``` | ||
|
||
## Legacy usage | ||
|
||
The following are legacy methods for using Spectrum CSS. The [CSS custom properties method](README.md#using-spectrum-css) is preferred. | ||
|
||
Spectrum CSS also builds 'multi-stop' and 'single-stop' versions of the CSS for older browsers (IE 11). This enables a consumer to either allow for multiple Spectrum colorstops in a single CSS file, or can limit the number of selectors to only those needed for a single colorstop. | ||
|
||
**Do not use these methods if you are starting fresh with Spectrum CSS and do not need to support IE 11.** | ||
|
||
### Multi-stop Strategy | ||
|
||
The first method of applying colorstops, *multistop*, makes it possible to have any number of colorstops on the same page. This method results in slightly larger CSS files with more selectors, but is the method most products will use as dark and light colorstops are commonly mixed in Spectrum designs. | ||
|
||
1. To get all Spectrum components, include `dist/spectrum-core.css` then `dist/spectrum-COLORSTOP.css` for each colorstop you need (where `COLORSTOP` is light, dark, etc). | ||
|
||
2. To get only the CSS for components and colorstops you need, include the following to start: | ||
|
||
* `node_modules/@spectrum-css/page/dist/index.css` | ||
* `node_modules/@spectrum-css/page/dist/multiStops/COLORSTOP.css` for each colorstop | ||
* `node_modules/@spectrum-css/typography/dist/index.css` | ||
* `node_modules/@spectrum-css/typography/dist/multiStops/COLORSTOP.css` for each colorstop | ||
|
||
Then, for each component you need: | ||
|
||
* `node_modules/@spectrum-css/COMPONENT/dist/index.css` for each component | ||
* `node_modules/@spectrum-css/COMPONENT/dist/multiStops/COLORSTOP.css` for each colorstop | ||
|
||
Set `<body class="spectrum spectrum--light">` to skin the page with light colors, and add `<div class="spectrum--dark">` wherever you need dark styles, or any combination of the above. | ||
|
||
Note that, due to CSS selector specificity, whatever colorstop you import last will win if you nest colorstops 3 levels deep. That is, if you first import the `light` colorstop, the the `dark` colorstop, and you have the following HTML, the 3rd button ends up dark. | ||
|
||
```html | ||
<body class="spectrum spectrum--light"> | ||
<button class="spectrum-Button">I'm light!</button> | ||
|
||
<div class="spectrum--dark"> | ||
<button class="spectrum-Button">I'm dark!</button> | ||
|
||
<div class="spectrum--light"> | ||
<button class="spectrum-Button">I'm still dark!</button> | ||
</div> | ||
</div> | ||
</body> | ||
``` | ||
|
||
### Single-stop Strategy | ||
|
||
The second method of applying colorstops, *singlestops*, makes it so it's only possible to have a single colorstop on the page at once. This method results in less selectors and smaller CSS files. | ||
|
||
1. To get all Spectrum components for a specific colorstop, include only `dist/standalone/spectrum-COLORSTOP.css`. | ||
|
||
2. To get only the CSS for components you need and a single colorstop, include the following to start: | ||
|
||
* `node_modules/@spectrum-css/page/dist/index.css` | ||
* `node_modules/@spectrum-css/page/dist/colorStops/COLORSTOP.css` for the single colorstop | ||
* `node_modules/@spectrum-css/typography/dist/index.css` | ||
* `node_modules/@spectrum-css/typography/dist/colorStops/COLORSTOP.css` for the single colorstop | ||
|
||
Then, for each component you need: | ||
|
||
* `node_modules/@spectrum-css/COMPONENT/dist/index.css` for each component | ||
* `node_modules/@spectrum-css/COMPONENT/dist/colorStops/COLORSTOP.css` for the single colorstop | ||
|
||
As there is CSS for only one color stop present, simply set `<body class="spectrum">`. If mixing with individual components using the *multistop* strategy, you can add `class="spectrum--dark"` on `<body>` or anywhere else, but it only affects components whose colorstops were imported using the individual component multistop strategy. | ||
|
||
### Import Order and Components | ||
|
||
With Spectrum CSS, dependency management between components is the responsibility of the consumer, you. The framework you're building likely has dependencies itself, such as `dropdown` depends on `button`, and each of the components includes its CSS. If this is the case, you'll get the CSS in the right order automatically, since `dropdown` is going to depend on `button`, and `button` will import the necessary CSS. | ||
|
||
However, if you're doing a more manual inclusion of CSS files, the easiest thing to do is to use the fully built `dist/spectrum-core.css` + `dist/spectrum-light.css` or `dist/standalone/spectrum-light.css` files described above. If you need only specific components, be sure to follow the order in `src/components.css` so components can override styles of their dependencies. | ||
|
||
### Import Order and Colorstops | ||
|
||
If your pages are light by default, with some dark elements embedded within (shell, etc), you should import the light colorstop first, adding `.spectrum--light` to an outer container (affecting the whole page), and adding `.spectrum--dark` to an inner container when you need dark elements (affecting only elements inside of it). That is, the import order of colorstops should match the nesting on your page. | ||
|
||
### Scale support | ||
|
||
Spectrum CSS supports two scale sizes: | ||
|
||
* Medium - Desktop | ||
* Large - Mobile | ||
|
||
#### Medium only | ||
|
||
By default, when you import `index.css` for each component or `spectrum-core.css`, you'll get the Medium scale. | ||
|
||
#### Large only | ||
|
||
If your site is always mobile, you can get large by default by importing `index-lg.css` for individual components, or `spectrum-core-lg.css` for all components. | ||
|
||
#### Medium and Large | ||
|
||
If you need to display both Medium and Large, you can import `index.css` and `index-diff.css` for individual components, or `spectrum-core.css` and `spectrum-core-diff.css` for all components. | ||
|
||
You can then switch scales by adding the `.spectrum--large` or `.spectrum--medium` class on the `<html>` element. | ||
|
||
Note that the Spectrum CSS UI icons must change as well, see below for a full example. |
Oops, something went wrong.