Use UI Icon ListGripper (#2908)

Upgrade out UI Icon dependency so we get ListGripper
Use UI Icon ListGripper in ListView

Author: snowystinger

packages/@adobe/spectrum-css-temp/components/icon/ui-icons.css

@@ -10,6 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+:root {
+  --spectrum-icon-listgripper-width: var(--spectrum-global-dimension-size-75);
+  --spectrum-icon-listgripper-height: var(--spectrum-global-dimension-size-150);
+}
+
 /* Hide UI icons on older browsers with SVG 1.1 implementations */
 .spectrum--medium {
   .spectrum-UIIcon--large {
@@ -151,6 +156,10 @@ governing permissions and limitations under the License.
   inline-size: var(--spectrum-icon-info-small-width);
   block-size: var(--spectrum-icon-info-small-height);
 }
+.spectrum-UIIcon-ListGripper {
+  inline-size: var(--spectrum-icon-listgripper-width);
+  block-size: var(--spectrum-icon-listgripper-height);
+}
 .spectrum-UIIcon-Magnifier {
   inline-size: var(--spectrum-icon-magnifier-width);
   block-size: var(--spectrum-icon-magnifier-height);

packages/@react-spectrum/list/src/DragHandle.tsx

@@ -24,12 +24,12 @@ import {Checkbox} from '@react-spectrum/checkbox';
 import {classNames, SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {Content} from '@react-spectrum/view';
 import type {DraggableCollectionState} from '@react-stately/dnd';
-import DragHandle from './DragHandle';
 import {DragHooks} from '@react-spectrum/dnd';
 import {GridCollection, GridState, useGridState} from '@react-stately/grid';
 import {GridKeyboardDelegate, useGrid, useGridSelectionCheckbox} from '@react-aria/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import ListGripper from '@spectrum-icons/ui/src/ListGripper';
 import {ListLayout} from '@react-stately/layout';
 import {ListState, useListState} from '@react-stately/list';
 import listStyles from './listview.css';
@@ -176,7 +176,7 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
             <div className={listStyles['react-spectrum-ListViewItem-grid']}>
               <div className={listStyles['react-spectrum-ListViewItem-draghandle-container']}>
                 <div className={listStyles['react-spectrum-ListViewItem-draghandle-button']}>
-                  <DragHandle />
+                  <ListGripper />
                 </div>
               </div>
               {showCheckbox &&

packages/@react-spectrum/list/src/ListView.tsx

@@ -15,9 +15,9 @@ import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
 import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';
 import {Content} from '@react-spectrum/view';
 import type {DraggableItemResult} from '@react-aria/dnd';
-import DragHandle from './DragHandle';
 import {FocusRing, useFocusRing} from '@react-aria/focus';
 import {Grid} from '@react-spectrum/layout';
+import ListGripper from '@spectrum-icons/ui/src/ListGripper';
 import listStyles from './listview.css';
 import {ListViewContext} from './ListView';
 import {mergeProps} from '@react-aria/utils';
@@ -136,7 +136,7 @@ export function ListViewItem(props) {
                     style={!showDragHandle ? {...visuallyHiddenProps.style} : {}}
                     ref={dragButtonRef}
                     draggable="true">
-                    <DragHandle />
+                    <ListGripper />
                   </div>
                 </FocusRing>
               }

packages/@react-spectrum/list/src/ListViewItem.tsx

@@ -118,12 +118,14 @@
     grid-area: draghandle;
     width: var(--spectrum-global-dimension-size-250);
     display: flex;
-    align-items: center;
-    justify-items: center;
+    align-self: stretch;
+    justify-self: stretch;
+    justify-content: center;
+    padding: var(--spectrum-global-dimension-size-25);
 
 
     .react-spectrum-ListViewItem-draghandle-button {
-      margin: auto var(--spectrum-global-dimension-size-25);
+      width: var(--spectrum-global-dimension-size-200);
       display: flex;
       align-items: center;
       justify-content: center;

packages/@react-spectrum/list/src/listview.css

@@ -10,9 +10,7 @@
   "scripts": {
     "build-icons": "cross-env BUILD_ENV=production babel --root-mode upward src -d . --extensions '.ts,.tsx' && tsc --project ./tsconfig.types.json"
   },
-  "dependencies": {
-    "@adobe/react-spectrum-ui": "^1.0.0"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@spectrum-icons/build-tools": "3.0.0-alpha.1"
   },

packages/@spectrum-icons/illustrations/package.json

@@ -12,7 +12,7 @@
     "make-icons": "babel-node --presets @babel/env ./scripts/generateIcons.js -i '[]' && tsc --project ./tsconfig.types.json"
   },
   "dependencies": {
-    "@adobe/react-spectrum-ui": "^1.0.0",
+    "@adobe/react-spectrum-ui": "^1.1.0",
     "@react-spectrum/icon": "^3.3.4"
   },
   "devDependencies": {

packages/@spectrum-icons/ui/package.json

@@ -32,10 +32,10 @@
   dependencies:
     tunnel "0.0.6"
 
-"@adobe/react-spectrum-ui@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@adobe/react-spectrum-ui/-/react-spectrum-ui-1.0.1.tgz#5fe405d55534e06d3bf060f86a79935cda5f6615"
-  integrity sha512-3RSX2hVWo4n7eUAkYBJmEySc5yfyWXLpQLiSKcOSGIXseD/1aUlPQxcYTdgj8gpRmJH7QghmoHeCjRviRfPXyg==
+"@adobe/react-spectrum-ui@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@adobe/react-spectrum-ui/-/react-spectrum-ui-1.1.0.tgz#6ab31697e29be80a5f04088be1eb8f2a65d9ce54"
+  integrity sha512-r8+Kl0OJQJOI0tuuQh+/m66OSbDTbfDcuc0e+wtxCLiyi3iEXHWxWkc1TPFBHq9WPX+ALAykJxmlqLtYypP78g==
 
 "@adobe/react-spectrum-workflow-color@^1.0.0":
   version "1.0.1"