fix: resolving conflicts with main

Author: GarthDB

README.md

@@ -138,10 +138,10 @@ Each component has a `dist/vars.css` file that contains declarations for each co
 
 As such, **you do not need to include `dist/vars.css`** unless:
 
-1. You wish to reference the component-level variables used by a component in external CSS (i.e. `--spectrum-rule-medium-height`)
-2. You have upgraded `@spectrum-css/vars`, but have not updated a component (such as `@spectrum-css/rule`) and do not want to update the component-level variables used by that component
+1. You wish to reference the component-level variables used by a component in external CSS (i.e. `--spectrum-divider-medium-height`)
+2. You have upgraded `@spectrum-css/vars`, but have not updated a component (such as `@spectrum-css/divider`) and do not want to update the component-level variables used by that component
 
-When this file is imported, if in updated version of `@spectrum-css/vars` changed global variables (such as a global color, `--spectrum-global-color-gray-300`), you will get those updates. However, if the updated version of `@spectrum-css/vars` changed component-level variables (such as the height of a medium Rule, `--spectrum-rule-medium-height`), you will not get those updates. As such, this file can be used to lock-in the basic visual style of a component while still allowing for system-level updates.
+When this file is imported, if in updated version of `@spectrum-css/vars` changed global variables (such as a global color, `--spectrum-global-color-gray-300`), you will get those updates. However, if the updated version of `@spectrum-css/vars` changed component-level variables (such as the height of a medium divider, `--spectrum-divider-medium-height`), you will not get those updates. As such, this file can be used to lock-in the basic visual style of a component while still allowing for system-level updates.
 
 In most cases, this file will not be required, so you can safely ignore it. If you see unexpected visual changes creeping into components that you have not updated, `dist/vars.css` may correct them.
 
@@ -236,37 +236,28 @@ The following tasks are available:
 
 ## Testing
 
-Visual regression testing is implemented by [BackstopJS](https://github.com/garris/BackstopJS). In order to avoid browser rendering inconsistent issue on different environments, the test needs to run inside of docker container.
+Visual regression testing is implemented by [BackstopJS](https://github.com/garris/BackstopJS). To avoid browser rendering inconsistent issue, the test needs to run with a docker container.
 
 ### Setup docker
 
 Install docker on your machine [Download Docker](https://hub.docker.com/search/?type=edition&offering=community&architecture=amd64)
 
-### Backstop reference bitmap
+### Reference bitmap images
 
-The reference bitmaps are hosted in a adobe internal repo and published as [@spectrum-css/spectrum-css-vr-test-asset](https://www.npmjs.com/package/@spectrum-css/spectrum-css-vr-test-asset). All the reference bitmaps are generated within docker instance. If you want to run test with native environment, you have to regenerate the reference yourself.
+The reference bitmap images are published as an NPM package [@spectrum-css/spectrum-css-vr-test-assets-essential](https://www.npmjs.com/package/@spectrum-css/spectrum-css-vr-test-assets-essential). Before the test, please try to upgrade this package.
 
-### Start dev server with Browsersync notification turnoff
+`yarn upgrade @spectrum-css/spectrum-css-vr-test-assets-essential`
 
-`gulp dev`
+### Start VRT dev server mode
 
-### Testing CLI targets
-
-The following npm scripts are available for testing:
+`VRT=true yarn run dev`
 
-- `npm run backstop:approve` - Identical to [backstop approve](https://github.com/garris/BackstopJS#approving-changes)
-- `npm run backstop:test` - Run test in your local native environment
-- `npm run backstop:clean` - Clean up all the testing reports and test images
-- `npm run backstop:docker:test` - Run test in your local docker container
-- `npm run backstop:ci:test` - Run test in a continuous integration environment like [Travis-CI](https://travis-ci.org/adobe/spectrum-css)
-- `npm run kill-zombies` - Kill zombies Chromium instances on your local machine
+### Testing CLI targets
 
-Both `backstop:test` and `backstop:docker:test` accept arguments to customize your test run:
+The following yarn scripts are available for testing:
 
-- `npm run backstop:docker:test` - Run test for all the components with color stop as `light` and scale as `medium`.
-- `npm run backstop:docker:test button` - Run test for `button` and its dependents components like action bar, toast etc with color stop as `light` and scale as `medium`.
-- `npm run backstop:docker:test themes=lightest,light scales=medium,large radio` - Run test for `radio` and its dependents components with color stop as `lightest` and `light` and scale as `medium` and `large`. It means that a single scenario will run 4 times.
-- `npm run backstop:docker:test themes=lightest,light,dark,darkest scales=medium,large` - Run test for all the components with all the color and scale combinations. It means that a single scenario will be run 8 times.
+- `yarn run backstop:docker:test` - Run all the visual regression tests.
+- `yarn run backstop:docker:test button` - Run test for `button` component only.
 
 ___
 

backstop_data/backstop_scenarios.json

@@ -187,11 +187,6 @@
     "url": "divider.html",
     "package": "@spectrum-css/divider"
   },
-  {
-    "label": "dropdown",
-    "url": "dropdown.html",
-    "package": "@spectrum-css/dropdown"
-  },
   {
     "label": "dropindicator",
     "url": "dropindicator.html",
@@ -336,11 +331,6 @@
     "url": "rating.html",
     "package": "@spectrum-css/rating"
   },
-  {
-    "label": "rule",
-    "url": "rule.html",
-    "package": "@spectrum-css/rule"
-  },
   {
     "label": "search",
     "url": "search.html",
@@ -506,4 +496,4 @@
     "url": "wrapping.html",
     "package": "@spectrum-css/wrapping"
   }
-]
+]

backstop_data/packageDependentMap.json

@@ -129,12 +129,17 @@
   [
     "@spectrum-css/dialog",
     [
-      "@spectrum-css/popover"
+      "@spectrum-css/popover",
+      "@spectrum-css/tray"
     ]
   ],
   [
     "@spectrum-css/divider",
-    []
+    [
+      "@spectrum-css/dialog",
+      "@spectrum-css/popover",
+      "@spectrum-css/tray"
+    ]
   ],
   [
     "@spectrum-css/dropindicator",
@@ -342,4 +347,4 @@
     "@spectrum-css/well",
     []
   ]
-]
+]

bundles/spectrum-css-compat/diff.sh

@@ -22,7 +22,7 @@ cd $CWD
 # components=$(ls components/)
 
 # Ignores commons, other new components
-components="accordion   checkbox    fieldlabel    rule      stepper
+components="accordion   checkbox    fieldlabel    divider      stepper
 actionbar   circleloader        search      table
 actionmenu    coachmark   illustratedmessage  searchwithin    tabs
 alert        inputgroup    sidenav     tags
@@ -32,7 +32,7 @@ avatar        menu       toggle
 banner      cyclebutton   miller        tooltip
 barloader   decoratedtextfield  page        treeview
 breadcrumb    dialog      pagination     typography
-button      dropdown    popover     splitbutton   underlay
+button      picker    popover     splitbutton   underlay
 buttongroup   dropindicator   quickaction   splitview   well
 calendar    dropzone    radio     statuslight
 card      fieldgroup    rating      steplist"

components/button/index.css

@@ -112,10 +112,8 @@ governing permissions and limitations under the License.
     bottom: 0;
     top: 0;
     margin: calc(var(--spectrum-alias-focus-ring-gap) * -1);
-
-    transition: box-shadow var(--spectrum-global-animation-duration-100)
-        ease-out,
-      margin var(--spectrum-global-animation-duration-100) ease-out;
+    transition: opacity var(--spectrum-global-animation-duration-100) ease-out,
+                margin var(--spectrum-global-animation-duration-100) ease-out;
   }
 
   &:focus-ring {

components/checkbox/index.css

@@ -161,7 +161,7 @@ governing permissions and limitations under the License.
 
     transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
                 margin var(--spectrum-global-animation-duration-100) ease-out;
- 
+
     /* force ff to render on the pixel grid */
     transform: translate(0, 0);
   }

components/checkbox/skin.css

@@ -30,6 +30,7 @@ governing permissions and limitations under the License.
 
 .spectrum-Checkbox-box {
   &:before {
+    forced-color-adjust: none;
     border-color: var(--spectrum-checkbox-box-border-color);
     background-color: var(--spectrum-checkbox-box-background-color);
   }
@@ -111,6 +112,7 @@ governing permissions and limitations under the License.
   }
 
   &:disabled ~ .spectrum-Checkbox-label {
+    forced-color-adjust: none;
     color: var(--spectrum-checkbox-text-color-disabled);
   }
 }
@@ -225,3 +227,36 @@ governing permissions and limitations under the License.
     }
   }
 }
+
+@media (forced-colors: active) {
+  .spectrum-Checkbox-input {
+    &:focus-ring + .spectrum-Checkbox-box {
+      forced-color-adjust: none;
+      outline-color: var(--spectrum-checkbox-focus-ring-color-key-focus);
+      outline-style: auto;
+      outline-offset: var(--spectrum-checkbox-focus-ring-gap-key-focus);
+      outline-width: var(--spectrum-checkbox-focus-ring-size-key-focus);    }
+  }
+  :root {
+    --spectrum-checkbox-emphasized-box-background-color : var(--spectrum-alias-background-color-transparent);
+    --spectrum-checkbox-emphasized-box-background-color-disabled : var(--spectrum-alias-background-color-transparent);
+    --spectrum-checkbox-emphasized-box-border-color-disabled : GrayText;
+    --spectrum-checkbox-text-color-disabled : GrayText;
+    --spectrum-checkbox-box-border-color-key-focus: FieldText;
+    --spectrum-checkbox-emphasized-box-border-color: FieldText;
+    --spectrum-checkbox-quiet-box-border-color: FieldText;
+    --spectrum-checkbox-box-border-color-selected-hover : Highlight;
+    --spectrum-checkbox-emphasized-box-border-color-selected-hover : Highlight;
+    --spectrum-checkbox-quiet-box-border-color-selected-hover : Highlight;
+    --spectrum-checkbox-emphasized-box-border-color-selected: Highlight;
+    --spectrum-checkbox-quiet-box-border-color-selected: Highlight;
+    --spectrum-checkbox-checkmark-color: HighlightText;
+    --spectrum-checkbox-focus-ring-color-key-focus: Highlight;
+    --spectrum-checkbox-focus-ring-gap-key-focus: var(--spectrum-global-dimension-static-size-25);
+    --spectrum-checkbox-focus-ring-size-key-focus: var(--spectrum-global-dimension-static-size-40);
+    --spectrum-checkbox-box-border-color-error: FieldText;
+    --spectrum-checkbox-box-border-color-error-hover: FieldText;
+    --spectrum-checkbox-box-border-color-error-selected: FieldText;
+    --spectrum-checkbox-text-color-error: FieldText;
+  }
+}

components/dialog/package.json

@@ -18,6 +18,7 @@
   "peerDependencies": {
     "@spectrum-css/button": "^3.0.0-beta.3",
     "@spectrum-css/buttongroup": "3.0.0-beta.3",
+    "@spectrum-css/divider": "^1.0.0-beta.1",
     "@spectrum-css/icon": "^2.0.0",
     "@spectrum-css/modal": "^3.0.0-beta.0",
     "@spectrum-css/underlay": "^2.0.0",
@@ -26,6 +27,7 @@
   "devDependencies": {
     "@spectrum-css/button": "^3.0.0-beta.3",
     "@spectrum-css/buttongroup": "3.0.0-beta.3",
+    "@spectrum-css/divider": "^1.0.0-beta.1",
     "@spectrum-css/component-builder": "^1.2.0",
     "@spectrum-css/icon": "^2.1.1",
     "@spectrum-css/modal": "^3.0.0-beta.0",

components/divider/README.md

@@ -1,5 +1,5 @@
 # @spectrum-css/divider
-> The Spectrum CSS rule component
+> The Spectrum CSS divider component
 
 This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
 

components/divider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/divider",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "The Spectrum CSS divider component",
   "license": "Apache-2.0",
   "main": "dist/index-vars.css",