feat: picklist sticky filter 503 (#509)

* minor update to release instructions

* feat: pick-list and value-list sticky filter

* add missing styles to valueList for sticky

* remove filterSticky prop

* remove sticky prop

README.md

@@ -104,7 +104,7 @@ This will provide autocomplete of component names/properties, as well as additio
 
 ### Deployment
 
-1. Checkout the master branch. Your git working directory must be clean (no pending un-staged changes).
+1. Checkout the master branch. Your git working directory must be clean (no pending un-staged changes). You will also need to have setup a [github release token](https://github.com/medikoo/github-release-from-cc-changelog#prerequisites).
 1. Run `npm version <patch | minor | major>`.
    Follow semantic versioning. Patch for bug fixes only. Major for breaking changes. Minor for the rest.
 1. This will prepare everything for publishing as well as automatically update `CHANGELOG.md`.

src/components/calcite-pick-list/calcite-pick-list.scss

@@ -13,6 +13,11 @@ header {
   justify-content: flex-end;
   align-items: center;
   margin-bottom: var(--calcite-app-cap-spacing-half);
+  &.sticky {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
 }
 
 calcite-filter {

src/components/calcite-pick-list/resources.ts

@@ -1,3 +1,7 @@
+export const CSS = {
+  sticky: "sticky"
+};
+
 export enum ICON_TYPES {
   circle = "circle",
   square = "square",

src/components/calcite-pick-list/shared-list-render.tsx

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import CalciteScrim from "../utils/CalciteScrim";
 import { VNode } from "@esri/calcite-components/dist/types/stencil.core";
+import { CSS } from "./resources";
 
 const renderScrim = (loading, disabled): VNode => {
   return loading || disabled ? <CalciteScrim loading={loading}></CalciteScrim> : null;
@@ -11,7 +12,7 @@ export const List = ({ props, text, ...rest }): VNode => {
   const { filterPlaceholder } = text;
   return (
     <Host aria-disabled={disabled} aria-busy={loading} {...rest}>
-      <header>
+      <header class={{ [CSS.sticky]: true }}>
         {filterEnabled ? (
           <calcite-filter
             data={dataForFilter}

src/components/calcite-value-list/calcite-value-list.scss

@@ -12,6 +12,11 @@ header {
   justify-content: flex-end;
   align-items: center;
   margin-bottom: var(--calcite-app-cap-spacing-quarter);
+  &.sticky {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
 }
 
 slot[name="menu-actions"]::slotted(calcite-action) {