From e1d180c7fb43876482ab5c89ea7cd08b6ff550f1 Mon Sep 17 00:00:00 2001 From: Jian Liao Date: Fri, 14 Aug 2020 14:56:33 -0700 Subject: [PATCH] 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 --- README.md | 6 +- backstop_data/backstop_scenarios.json | 26 ++++-- backstop_data/packageDependentMap.json | 46 ++++++---- bundles/spectrum-css-compat/diff.sh | 4 +- components/button/index.css | 12 +-- components/dialog/metadata/dialog.yml | 26 +++--- components/dialog/package.json | 2 + components/divider/README.md | 2 +- components/divider/package.json | 2 +- components/inputgroup/skin.css | 14 +-- components/overlay/index.css | 2 +- components/picker/package.json | 4 +- components/popover/metadata/popover.yml | 6 +- components/popover/package.json | 1 + components/searchwithin/index.css | 6 +- .../searchwithin/metadata/searchwithin.yml | 16 ++-- components/tray/metadata/tray.yml | 2 +- components/tray/package.json | 2 + components/vars/css/components/index.css | 2 - package.json | 1 + site/get-started.pug | 6 +- site/halo-focus.pug | 2 +- site/includes/footer.pug | 2 +- site/includes/section.pug | 2 +- site/resources/js/enhancement.js | 86 +++++++++---------- site/resources/js/site.js | 36 ++++---- site/templates/siteComponent.pug | 34 ++++---- site/truncation.pug | 20 ++--- site/wrapping.pug | 42 +++++---- tools/bundle-builder/docs/index.js | 4 +- yarn.lock | 25 ++---- 31 files changed, 237 insertions(+), 204 deletions(-) diff --git a/README.md b/README.md index 04fda90dbde..5f5846c2593 100644 --- a/README.md +++ b/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. diff --git a/backstop_data/backstop_scenarios.json b/backstop_data/backstop_scenarios.json index cd7e8893697..a2abf4e1c3b 100644 --- a/backstop_data/backstop_scenarios.json +++ b/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", diff --git a/backstop_data/packageDependentMap.json b/backstop_data/packageDependentMap.json index 9a0df3d25f7..ec1a4185209 100644 --- a/backstop_data/packageDependentMap.json +++ b/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", [] diff --git a/bundles/spectrum-css-compat/diff.sh b/bundles/spectrum-css-compat/diff.sh index bb7d8338d33..b921624d63a 100755 --- a/bundles/spectrum-css-compat/diff.sh +++ b/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" diff --git a/components/button/index.css b/components/button/index.css index ba254dd8ef0..bbdd2f94794 100644 --- a/components/button/index.css +++ b/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); } } diff --git a/components/dialog/metadata/dialog.yml b/components/dialog/metadata/dialog.yml index 5fb62d42134..a51796a81ac 100644 --- a/components/dialog/metadata/dialog.yml +++ b/components/dialog/metadata/dialog.yml @@ -15,7 +15,7 @@ examples: @@ -34,7 +34,7 @@ examples: @@ -53,7 +53,7 @@ examples: @@ -72,7 +72,7 @@ examples: