fix: fix the issues caused by component rename (#778)

* fix: fix the issues caused by component rename

* fix: fix package security vulnerabilities

Co-authored-by: Jian Liao <jianliao@adobe.com>

Author: jianliao

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.
 

backstop_data/backstop_scenarios.json

@@ -183,9 +183,9 @@
     "package": "@spectrum-css/dialog"
   },
   {
-    "label": "dropdown",
-    "url": "dropdown.html",
-    "package": "@spectrum-css/dropdown"
+    "label": "divider",
+    "url": "divider.html",
+    "package": "@spectrum-css/divider"
   },
   {
     "label": "dropindicator",
@@ -271,6 +271,11 @@
     "url": "miller.html",
     "package": "@spectrum-css/miller"
   },
+  {
+    "label": "modal",
+    "url": "modal.html",
+    "package": "@spectrum-css/modal"
+  },
   {
     "label": "page",
     "url": "page.html",
@@ -291,6 +296,11 @@
     "url": "pagination-listing.html",
     "package": "@spectrum-css/pagination"
   },
+  {
+    "label": "picker",
+    "url": "picker.html",
+    "package": "@spectrum-css/picker"
+  },
   {
     "label": "popover",
     "url": "popover.html",
@@ -311,11 +321,6 @@
     "url": "rating.html",
     "package": "@spectrum-css/rating"
   },
-  {
-    "label": "rule",
-    "url": "rule.html",
-    "package": "@spectrum-css/rule"
-  },
   {
     "label": "search",
     "url": "search.html",
@@ -406,6 +411,11 @@
     "url": "tooltip.html",
     "package": "@spectrum-css/tooltip"
   },
+  {
+    "label": "tray",
+    "url": "tray.html",
+    "package": "@spectrum-css/tray"
+  },
   {
     "label": "treeview",
     "url": "treeview.html",

backstop_data/packageDependentMap.json

@@ -63,12 +63,12 @@
       "@spectrum-css/coachmark",
       "@spectrum-css/cyclebutton",
       "@spectrum-css/dialog",
-      "@spectrum-css/dropdown",
+      "@spectrum-css/divider",
       "@spectrum-css/inputgroup",
       "@spectrum-css/pagination",
+      "@spectrum-css/picker",
       "@spectrum-css/popover",
       "@spectrum-css/quickaction",
-      "@spectrum-css/rule",
       "@spectrum-css/search",
       "@spectrum-css/searchwithin",
       "@spectrum-css/splitbutton",
@@ -81,7 +81,7 @@
     "@spectrum-css/buttongroup",
     [
       "@spectrum-css/dialog",
-      "@spectrum-css/rule"
+      "@spectrum-css/divider"
     ]
   ],
   [
@@ -146,15 +146,16 @@
   [
     "@spectrum-css/dialog",
     [
-      "@spectrum-css/popover"
+      "@spectrum-css/popover",
+      "@spectrum-css/tray"
     ]
   ],
   [
-    "@spectrum-css/dropdown",
+    "@spectrum-css/divider",
     [
-      "@spectrum-css/fieldlabel",
-      "@spectrum-css/searchwithin",
-      "@spectrum-css/tabs"
+      "@spectrum-css/dialog",
+      "@spectrum-css/popover",
+      "@spectrum-css/tray"
     ]
   ],
   [
@@ -193,8 +194,8 @@
     "@spectrum-css/menu",
     [
       "@spectrum-css/actionmenu",
-      "@spectrum-css/dropdown",
       "@spectrum-css/inputgroup",
+      "@spectrum-css/picker",
       "@spectrum-css/popover",
       "@spectrum-css/tabs"
     ]
@@ -203,6 +204,13 @@
     "@spectrum-css/miller",
     []
   ],
+  [
+    "@spectrum-css/modal",
+    [
+      "@spectrum-css/dialog",
+      "@spectrum-css/tray"
+    ]
+  ],
   [
     "@spectrum-css/page",
     []
@@ -211,13 +219,21 @@
     "@spectrum-css/pagination",
     []
   ],
+  [
+    "@spectrum-css/picker",
+    [
+      "@spectrum-css/fieldlabel",
+      "@spectrum-css/searchwithin",
+      "@spectrum-css/tabs"
+    ]
+  ],
   [
     "@spectrum-css/popover",
     [
       "@spectrum-css/actionbar",
       "@spectrum-css/actionmenu",
-      "@spectrum-css/dropdown",
-      "@spectrum-css/inputgroup"
+      "@spectrum-css/inputgroup",
+      "@spectrum-css/picker"
     ]
   ],
   [
@@ -237,10 +253,6 @@
     "@spectrum-css/rating",
     []
   ],
-  [
-    "@spectrum-css/rule",
-    []
-  ],
   [
     "@spectrum-css/search",
     []
@@ -326,6 +338,10 @@
       "@spectrum-css/steplist"
     ]
   ],
+  [
+    "@spectrum-css/tray",
+    []
+  ],
   [
     "@spectrum-css/treeview",
     []

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

@@ -264,13 +264,13 @@ a.spectrum-ActionButton {
 .spectrum-FieldButton {
   @inherit: %spectrum-BaseButton;
 
-  block-size: var(--spectrum-dropdown-height);
+  block-size: var(--spectrum-picker-height);
 
-  padding: 0 var(--spectrum-dropdown-padding-x);
+  padding: 0 var(--spectrum-picker-padding-x);
 
   font-family: inherit;
   font-weight: normal;
-  font-size: var(--spectrum-dropdown-text-size);
+  font-size: var(--spectrum-picker-text-size);
   line-height: normal;
   -webkit-font-smoothing: initial;
 
@@ -281,9 +281,9 @@ a.spectrum-ActionButton {
 .spectrum-FieldButton {
   margin: 0;
   padding-block: 0;
-  padding-inline: var(--spectrum-dropdown-padding-x);
+  padding-inline: var(--spectrum-picker-padding-x);
 
-  border-width: var(--spectrum-dropdown-border-size);
+  border-width: var(--spectrum-picker-border-size);
   border-style: solid;
   border-radius: var(--spectrum-border-radius);
 
@@ -298,7 +298,7 @@ a.spectrum-ActionButton {
   }
 
   &.is-open {
-    border-width: var(--spectrum-dropdown-border-size);
+    border-width: var(--spectrum-picker-border-size);
   }
 }