Merge f2aa6fd into de65e68

app/ids-draggable/example.html

@@ -0,0 +1,40 @@
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Draggable</ids-text>
+</ids-layout-grid>
+<ids-layout-grid>
+  <ids-draggable>
+    <div class="ids-draggable-demo-box">
+      <ids-text>no axis</ids-text></div>
+  </ids-draggable>
+    <ids-draggable axis="y">
+      <div class="ids-draggable-demo-box">
+        <ids-text>axis='y'</ids-text>
+      </div>
+    </ids-draggable>
+    <ids-draggable axis="x">
+      <div class="ids-draggable-demo-box">
+        <ids-text>axis='x'</ids-text>
+      </div>
+    </ids-draggable>
+</ids-layout-grid>
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Draggable (Bounded by Div/Container)</ids-text>
+</ids-layout-grid>
+<ids-layout-grid>
+  <div class="ids-draggable-demo-content">
+    <ids-draggable parent-containment>
+      <div class="ids-draggable-demo-box">
+        <ids-text>no axis</ids-text></div>
+    </ids-draggable>
+    <ids-draggable axis="y" parent-containment>
+      <div class="ids-draggable-demo-box">
+        <ids-text>axis='y'</ids-text>
+      </div>
+    </ids-draggable>
+    <ids-draggable axis="x" parent-containment>
+      <div class="ids-draggable-demo-box">
+        <ids-text>axis='x'</ids-text>
+      </div>
+    </ids-draggable>
+  </div>
+</ids-layout-grid>

app/ids-draggable/example.js

@@ -0,0 +1 @@
+import './example.scss';

app/ids-draggable/example.scss

@@ -0,0 +1,49 @@
+.ids-draggable-demo-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-style: dashed;
+}
+
+.ids-draggable-demo-content {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  width: 312px;
+  height: 128px;
+  border: 1px dashed var(--ids-color-palette-graphite-60);
+}
+
+ids-draggable:nth-of-type(1) .ids-draggable-demo-box,
+ids-layout-grid-cell:nth-of-type(1) .ids-draggable-demo-box {
+  border: 1px dashed var(--ids-color-palette-ruby-40);
+}
+
+ids-draggable:nth-of-type(2) .ids-draggable-demo-box,
+ids-layout-grid-cell:nth-of-type(2) .ids-draggable-demo-box {
+  border: 1px dashed var(--ids-color-palette-emerald-40);
+}
+
+ids-draggable:nth-of-type(3) .ids-draggable-demo-box,
+ids-layout-grid-cell:nth-of-type(3) .ids-draggable-demo-box {
+  border: 1px dashed var(--ids-color-palette-azure-40);
+}
+
+.ids-draggable-handle-example {
+  display: flex;
+  flex-direction: row;
+  border: 1px dashed var(--ids-color-palette-ruby-40);
+  align-items: center;
+  justify-content: center;
+
+  & div:nth-child(2) {
+    padding: 16px 8px;
+  }
+}
+
+.ids-draggable-handle {
+  align-items: center;
+  margin-right: 8px;
+}

app/ids-draggable/index.html

@@ -0,0 +1,3 @@
+{{> ../layouts/head.html }}
+{{> example.html }}
+{{> ../layouts/footer.html }}

app/ids-draggable/index.js

@@ -0,0 +1 @@
+import IdsDraggable from '../../src/ids-draggable';

app/ids-draggable/sandbox.html

@@ -0,0 +1,76 @@
+{{> ../layouts/head.html }}
+
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Draggable</ids-text>
+</ids-layout-grid>
+<ids-layout-grid>
+  <ids-draggable>
+    <div class="ids-draggable-demo-box">
+      <ids-text>no axis</ids-text></div>
+  </ids-draggable>
+    <ids-draggable axis="y">
+      <div class="ids-draggable-demo-box">
+        <ids-text>axis='y'</ids-text>
+      </div>
+    </ids-draggable>
+    <ids-draggable axis="x">
+      <div class="ids-draggable-demo-box">
+        <ids-text>axis='x'</ids-text>
+      </div>
+    </ids-draggable>
+</ids-layout-grid>
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Draggable (Bounded by Div/Container)</ids-text>
+</ids-layout-grid>
+<ids-layout-grid>
+  <div class="ids-draggable-demo-content">
+    <ids-draggable parent-containment>
+      <div class="ids-draggable-demo-box">
+        <ids-text>no axis</ids-text></div>
+    </ids-draggable>
+    <ids-draggable axis="y" parent-containment>
+      <div class="ids-draggable-demo-box">
+        <ids-text>axis='y'</ids-text>
+      </div>
+    </ids-draggable>
+    <ids-draggable axis="x" parent-containment>
+      <div class="ids-draggable-demo-box">
+        <ids-text>axis='x'</ids-text>
+      </div>
+    </ids-draggable>
+  </div>
+</ids-layout-grid>
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Draggable (Bounded by Layout Grid)</ids-text>
+</ids-layout-grid>
+<ids-layout-grid>
+  <ids-draggable parent-containment>
+    <div class="ids-draggable-demo-box">
+      <ids-text>no axis</ids-text></div>
+  </ids-draggable>
+  <ids-draggable axis="y" parent-containment>
+    <div class="ids-draggable-demo-box">
+      <ids-text>axis='y'</ids-text>
+    </div>
+  </ids-draggable>
+  <ids-draggable axis="x" parent-containment>
+    <div class="ids-draggable-demo-box">
+      <ids-text>axis='x'</ids-text>
+    </div>
+  </ids-draggable>
+</ids-layout-grid>
+
+<ids-layout-grid>
+  <ids-draggable handle=".ids-draggable-handle">
+    <div class="ids-draggable-handle-example">
+    <ids-icon
+      class="ids-draggable-handle"
+      icon="drag"
+      size="large"
+    ></ids-icon>
+    <div>
+      drag the handle to the left
+    </div>
+  </div>
+  </ids-draggable>
+</ids-layout-grid>

app/ids-draggable/sandbox.js

@@ -0,0 +1,2 @@
+import './index';
+import './example.scss';

app/index.js

@@ -47,6 +47,7 @@ import IdsPager, {
   IdsPagerButton,
   IdsPagerNumberList
 } from '../src/ids-pager';
+import IdsDraggable from '../src/ids-draggable';
 
 // Import Example Code
 
@@ -81,3 +82,4 @@ import './ids-spinbox/index';
 import './ids-tabs/index';
 import './ids-pager/example';
 import './ids-loading-indicator/index';
+import './ids-draggable/index';

doc/CHANGELOG.md

@@ -27,6 +27,13 @@
   - If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll
   - Markup has changed to a custom element `<ids-data-grid></ids-data-grid>`
   - Can now be imported as a single JS file and used with encapsulated styles
+- `[Draggable]` The drag component is now a web component called `ids-draggable` ([#253](https://github.com/infor-design/enterprise-wc/issues/253))
+  - Markup has changed to a custom element that wraps draggable content; `<ids-draggable>content</ids-draggable>`.
+  - Bounding drag movement to a specific axis is done by passing the axis attribute as `x` or `y`.
+  - The Draggable can be contained to the first measurable parent's rectangle bounds by adding the
+  flag `parent-container`.
+  - A handle within the draggable content can be set by using the attribute `handle` as a query selector e.g. `handle=".custom-handle-class"`.
+  - Draggable events to listen for are now `ids-dragstart`, `ids-drag`, and `ids-dragend`.
 - `[Fieldset]` The fieldset component has been changed to a web component `ids-fieldset` ([#138](https://github.com/infor-design/enterprise-wc/issues/138))
   - Markup has changed to a custom element `<ids-fieldset></ids-fieldset>`
   - Can now be imported as a single JS file and used with encapsulated styles.

doc/CHECKLIST.md

@@ -53,6 +53,7 @@ Will get a checkbox at minimum viable product. The rest of the details are cover
  - [ ] Datagrid (ids-data-grid)
  - [ ] Datepicker (ids-date-picker)
  - [ ] Donut (ids-donut or combined with ids-pie)
+ - [x] Drag (ids-draggable)
  - [ ] Dropdown (ids-drop-down)
  - [ ] Editor (ids-editor)
  - [ ] Emptymessage (ids-empty-message)

src/ids-base/ids-attributes.js

@@ -18,6 +18,7 @@ export const attributes = {
   AUTOGROW_MAX_HEIGHT: 'autogrow-max-height',
   AUTO_HEIGHT: 'auto-height',
   AUTOSELECT: 'autoselect',
+  AXIS: 'axis',
   BG_TRANSPARENT: 'bg-transparent',
   BLEED: 'bleed',
   BUTTONS: 'buttons',
@@ -58,6 +59,7 @@ export const attributes = {
   GAP: 'gap',
   GROUP: 'group',
   GROUP_DISABLED: 'group-disabled',
+  HANDLE: 'handle',
   HEIGHT: 'height',
   HORIZONTAL: 'horizontal',
   HREF: 'href',
@@ -67,6 +69,7 @@ export const attributes = {
   ID: 'id',
   INDETERMINATE: 'indeterminate',
   INLINE: 'inline',
+  IS_DRAGGING: 'is-dragging',
   JUSTIFY: 'justify',
   KEEP_OPEN: 'keep-open',
   LABEL: 'label',
@@ -107,6 +110,7 @@ export const attributes = {
   PAGE_NUMBER: 'page-number',
   PAGE_SIZE: 'page-size',
   PADDING: 'padding',
+  PARENT_CONTAINMENT: 'parent-containment',
   PARENT_DISABLED: 'parent-disabled',
   PERCENTAGE_VISIBLE: 'percentage-visible',
   PLACEHOLDER: 'placeholder',

src/ids-draggable/README.md

@@ -0,0 +1,82 @@
+# Ids Draggable
+
+## Description
+
+A container which limits and tracks the dragging of an HTML Element along a specific axis or within the bounds of it's parent element.
+
+## Use Cases
+
+A draggable would be used in the case where you may have a pane splitter (e.g. in `ids-splitter`), or a list that is meant to be dragged along a specific axis. It may also be used in many cases where we have a canvas or pane that should be resized (in one or two dimensions).
+
+It does not currently support drag/drop targets in the current iteration, but in the future this component may be used for moving items.
+
+## Features (With Code Examples)
+A draggable component with no bounds to where it is moved.
+```html
+ <ids-draggable>
+  <div class="ids-draggable-demo-box">
+    <ids-text>Drag Me</ids-text>
+  </div>
+</ids-draggable>
+```
+
+A draggable component along the X axis (e.g. drags horizontally).
+```html
+<ids-draggable axis="x">
+  <div class="ids-draggable-demo-box">
+    <ids-text>Horizontally Draggable</ids-text>
+  </div>
+</ids-draggable>
+```
+
+A draggable component along the Y axis (e.g. drags vertically).
+```html
+<ids-draggable axis="y">
+  <div class="ids-draggable-demo-box">
+    <ids-text>Vertically Draggable</ids-text>
+  </div>
+</ids-draggable>
+```
+
+A draggable component which can be dragged either horizontally or vertically
+but is contained by it's first non zero-width/height parent (can also work for non-`<div>`, but cannot be a controlled `ids-layout-grid-cell`).
+```html
+<div>
+ <ids-draggable parent-containment>
+    <div class="ids-draggable-demo-box">
+      <ids-text>Vertically Draggable</ids-text></div>
+  </ids-draggable>
+</div>
+```
+
+A draggable component which is draggable only by a specific handle on the tab (note: a draggable component currently has a limitation of one handle element, even if the class matches multiple handles).
+```html
+<div>
+ <ids-draggable handle=".drag-handle">
+    <div class="ids-draggable-demo-box">
+      <ids-icon
+        class="drag-handle"
+        icon="drag"
+        size="large"
+      ></ids-icon>
+      <ids-text>
+        All-content drags, but only .drag-handle is draggable
+      </ids-text>
+    </div>
+  </ids-draggable>
+</div>
+```
+
+## Settings and Attributes
+
+- `parent-containment` {boolean} Flags this draggable as having drag range being contained only within the first/closest inner parent of the content with a measurable width or height.
+- `is-draggable` {boolean} Whether or not the `ids-draggable` and content is being dragged.
+- `disabled` {boolean}
+- `axis?` {'x' | 'y'}   The axis that the draggable content will be moving along (e.g. X => horizontal, Y => vertical); By default, not defined and supports both axes.
+- `handle?` {string} A query selector representing an optional handle that can be used to drag the content of the draggable.
+
+## Accessibility
+
+- Wherever possible, it would be worth adding some visual indicator that content is dragged (this can be done using the `is-dragging` attribute or listening on `ids-dragstart` and `ids-dragend` callbacks).
+- It is good to keep in mind that draggable content may present issues for people with visual impairments, and so things such as scrollability and typical keyboard
+navigation should all function as normal in the case where a user is browsing content that may have resize handles or other draggability aspects.

src/ids-draggable/TODO.md

@@ -0,0 +1,7 @@
+# TODO for IDS Draggable
+
+- [] consider mobile touch.
+....
+- documentation: ids-drag event: e.detail.parentRect, e.detail.dragDeltaX/Y, e.detail.translateX/Y
+- known issue (minor): in firefox, the cursor when moved quickly flashes between dragging/default as the positioning/detection
+isnt instant as it is in chrome.