Enhancement 1012 steplist

packages/@adobe/spectrum-css-temp/components/steplist/skin.css

@@ -18,17 +18,21 @@ governing permissions and limitations under the License.
 
   /* Default Marker Style is 'incomplete' */
   .spectrum-Steplist-marker {
-    border-color: var(--spectrum-steplist-incomplete-marker-color)
+    border-color: var(--spectrum-steplist-incomplete-marker-color);
+    color: transparent;
+
   }
 
   /* Default Line Style is 'incomplete' */
   .spectrum-Steplist-segment {
-    border-bottom-color: var(--spectrum-steplist-incomplete-segment-color)
+    .spectrum-Steplist-chevron {
+      color: var(--spectrum-steplist-incomplete-marker-color);
+    }
   }
 
   .spectrum-Steplist-item {
     /* Step Completed */
-    &.is-complete {
+    &.is-completed {
       .spectrum-Steplist-label {
         color: var(--spectrum-steplist-complete-label-text-color)
       }
@@ -47,10 +51,26 @@ governing permissions and limitations under the License.
       }
     }
 
-    &.is-complete,
+    &.is-completed,
     &.is-selected {
-      .spectrum-Steplist-segment {
-        border-bottom-color: var(--spectrum-steplist-complete-segment-color)
+      .spectrum-Steplist-marker {
+        color: var(--spectrum-global-color-gray-50);
+      }
+    }
+    &.is-hovered {
+      &.is-navigable {
+        .spectrum-Steplist-marker {
+          color: var(--spectrum-global-color-gray-50);
+        }
+      }
+    }
+    /* Steplist emphasized*/
+    &.is-emphasized {
+      .spectrum-Steplist-label {
+        color: var(--spectrum-global-color-blue-500)
+      }
+      .spectrum-Steplist-marker {
+        background-color: var(--spectrum-global-color-blue-500)
       }
     }
   }
@@ -59,11 +79,27 @@ governing permissions and limitations under the License.
   &.spectrum-Steplist--interactive {
     .spectrum-Steplist-item {
       /* Step Focused */
-      &:focus,
-      &.is-focused,
-      *:focus {
-        .spectrum-Steplist-marker {
-          background-color: var(--spectrum-steplist-current-marker-color-key-focus)
+      &.is-keyboard-focused {
+        .spectrum-Steplist-marker-focus {
+          border-color: var(--spectrum-steplist-current-marker-color-key-focus)
+        }
+      }
+      &.is-hovered {
+        &.is-navigable {
+          .spectrum-Steplist-marker {
+            background-color: var(--spectrum-steplist-current-marker-color)
+          }
+        }
+      }
+      /* Steplist emphasized*/
+      &.is-emphasized {
+        &.is-navigable {
+          .spectrum-Steplist-label {
+            color: var(--spectrum-global-color-blue-500)
+          }
+          .spectrum-Steplist-marker {
+            background-color: var(--spectrum-global-color-blue-500)
+          }
         }
       }
     }

packages/@react-aria/selection/src/useSelectableCollection.ts

@@ -33,7 +33,7 @@ export interface AriaSelectableCollectionOptions {
   /**
    * The ref attached to the element representing the collection.
    */
-  ref: RefObject<HTMLElement>,
+  ref: RefObject<HTMLElement | HTMLOListElement>,
   /**
    * Whether the collection or one of its items should be automatically focused upon render.
    * @default false

packages/@react-aria/steplist/README.md

@@ -0,0 +1,3 @@
+# @react-aria/steplist
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

packages/@react-aria/steplist/docs/useStepList.mdx

@@ -0,0 +1,39 @@
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-aria/steplist';
+import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType} from '@react-spectrum/docs';
+import packageData from '@react-aria/steplist/package.json';
+
+```jsx import
+import {useStepList} from '@react-aria/steplist';
+```
+
+---
+category: Category Name
+keywords: []
+---
+
+# useStepList
+
+<p>{docs.exports.useStepList.description}</p>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['useStepList']}
+  sourceData={[
+    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-practices/#button'}
+  ]} />
+
+## API
+
+<FunctionAPI function={docs.exports.useStepList} links={docs.links} />
+
+## Features
+
+*Describe what the aria hook helps with/provides.*
+
+## Anatomy/Usage
+
+*For hooks that are meant to be used with specific elements/components, include an Anatomy section detailing the props the hook returns.*
+*For hooks that are meant for more general use, include a Usage section detailing the props/params the hook accepts and returns.*

packages/@react-aria/steplist/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './src';

packages/@react-aria/steplist/intl/en-US.json

@@ -0,0 +1,3 @@
+{
+  "steplist": "Step List"
+}

packages/@react-aria/steplist/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@react-aria/steplist",
+  "version": "3.0.0-alpha.1",
+  "private": true,
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@react-aria/i18n": "3.2.0",
+    "@react-aria/interactions": "3.3.2",
+    "@react-aria/link": "^3.2.0",
+    "@react-aria/selection": "^3.7.1",
+    "@react-aria/tabs": "^3.1.0",
+    "@react-aria/utils": "3.4.1",
+    "@react-stately/list": "3.2.2",
+    "@react-types/shared": "3.3.0",
+    "@react-types/steplist": "^3.0.0-alpha.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@react-aria/steplist/src/StepListKeyboardDelegate.ts

@@ -0,0 +1,100 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Collection, Direction, KeyboardDelegate, Orientation} from '@react-types/shared';
+import {Key} from 'react';
+
+export class StepListKeyboardDelegate<T> implements KeyboardDelegate {
+  private collection: Collection<T>;
+  private flipDirection: boolean;
+  private disabledKeys: Set<Key>;
+  private orientation: Orientation;
+
+  constructor(collection: Collection<T>, direction: Direction, orientation: Orientation, disabledKeys: Set<Key> = new Set()) {
+    this.collection = collection;
+    this.flipDirection = direction === 'rtl' && orientation === 'horizontal';
+    this.orientation = orientation;
+    this.disabledKeys = disabledKeys;
+  }
+
+  getKeyLeftOf(key: Key) {
+    if (this.flipDirection) {
+      return this.getNextKey(key);
+    } else {
+      if (this.orientation === 'horizontal') {
+        return this.getPreviousKey(key);
+      }
+      return null;
+    }
+  }
+
+  getKeyRightOf(key: Key) {
+    if (this.flipDirection) {
+      return this.getPreviousKey(key);
+    } else {
+      if (this.orientation === 'horizontal') {
+        return this.getNextKey(key);
+      }
+      return null;
+    }
+  }
+
+  getKeyAbove(key: Key) {
+    if (this.orientation === 'vertical') {
+      return this.getPreviousKey(key);
+    }
+    return null;
+  }
+
+  getKeyBelow(key: Key) {
+    if (this.orientation === 'vertical') {
+      return this.getNextKey(key);
+    }
+    return null;
+  }
+
+  getFirstKey() {
+    let key = this.collection.getFirstKey();
+    if (this.disabledKeys.has(key)) {
+      key = this.getNextKey(key);
+    }
+    return key;
+  }
+
+  getLastKey() {
+    let key = this.collection.getLastKey();
+    if (this.disabledKeys.has(key)) {
+      key = this.getPreviousKey(key);
+    }
+    return key;
+  }
+
+  getNextKey(key) {
+    do {
+      key = this.collection.getKeyAfter(key);
+      if (key == null) {
+        key = this.collection.getFirstKey();
+      }
+    } while (this.disabledKeys.has(key));
+    return key;
+  }
+
+  getPreviousKey(key) {
+    do {
+      key = this.collection.getKeyBefore(key);
+      if (key == null) {
+        key = this.collection.getLastKey();
+      }
+    } while (this.disabledKeys.has(key));
+    return key;
+  }
+}

packages/@react-aria/steplist/src/index.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './useStepList';
+export * from './useStepListItem';

packages/@react-aria/steplist/src/useStepList.ts

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {HTMLAttributes, RefObject, useMemo} from 'react';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {SpectrumStepListProps, StepListAria, StepListState} from '@react-types/steplist';
+import {StepListKeyboardDelegate} from './StepListKeyboardDelegate';
+import {useLocale, useMessageFormatter} from '@react-aria/i18n';
+import {useSelectableCollection} from '@react-aria/selection';
+
+export function useStepList<T>(props: SpectrumStepListProps<T>, state: StepListState<T>, ref: RefObject<HTMLOListElement>): StepListAria {
+  let {
+    isDisabled,
+    'aria-label': ariaLabel,
+    orientation = 'horizontal',
+    keyboardActivation = 'automatic'
+  } = props;
+  let allKeys = [...state.collection.getKeys()];
+
+  if (!allKeys.some(key => !state.disabledKeys.has(key))) {
+    isDisabled = true;
+  }
+
+  let {
+    collection,
+    selectionManager: manager,
+    disabledKeys
+  } = state;
+  let {direction} = useLocale();
+  let delegate = useMemo(() => new StepListKeyboardDelegate(
+    collection,
+    direction,
+    orientation,
+    disabledKeys), [collection, disabledKeys, orientation, direction]);
+
+  let {collectionProps} = useSelectableCollection({
+    ref,
+    selectionManager: manager,
+    keyboardDelegate: delegate,
+    selectOnFocus: keyboardActivation === 'automatic',
+    disallowEmptySelection: true,
+    scrollRef: ref
+  });
+
+  console.log('collectionProps', collectionProps);
+
+  const formatMessage = useMessageFormatter(intlMessages);
+  const listProps: HTMLAttributes<HTMLElement> = {
+    ...mergeProps(collectionProps, filterDOMProps(props)),
+    'aria-orientation': orientation,
+    'aria-label': ariaLabel || formatMessage('steplist'),
+    'aria-disabled': isDisabled
+  };
+
+  return {
+    listProps
+  };
+}
+
+