Altered styles and added some props #1
Conversation
| @@ -13,26 +12,31 @@ | |||
| } | |||
|
|
|||
| &.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle] { | |||
| border: 1px solid transparent; | |||
| // What was the reason for the transparent border? | |||
There was a problem hiding this comment.
Now that it uses euiFocusRing, there is no reason for it. Before, there was a size change in the handle when the border was added.
There was a problem hiding this comment.
Cool, feel free to remove the comment then.
| export interface EuiDraggableProps | ||
| extends CommonProps, | ||
| Omit<DraggableProps, 'children'> { | ||
| children: ReactElement | DraggableProps['children']; | ||
| className?: string; | ||
| customDragHandle?: boolean; | ||
| spacing?: EuiDraggableSpacing; |
| /** | ||
| * Adds an EuiPanel style to the droppable area | ||
| */ | ||
| withPanel?: boolean; |
There was a problem hiding this comment.
I also considered doing this. Thanks!
| @include euiBottomShadow; | ||
| border: 1px solid $euiDraggableFocusColor; | ||
| // Commenting this out for now, | ||
| // I'm thinking about adding an optional prop to auto-add these styles versus always having them |
Are you looking to have the click toggle the dragging state, or just have the button be the drag handle, or both? |
|
just have the button be the drag handle |
|
You can merge in now and hook up those couple buttons I added. |
|
I'll work on the extra props later |
Update defazio fork to 13.0
* removed duplicate icons * Fixing changelog and updating tests (#1) Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
While playing with the default, I've decided that the only part that needs to be automatically styled is the shading of the droppable areas (I'll also look into how users can override later).
I also felt that using panels for the droppable areas is such a useful feature that we should build it in, so I'm using the prop
withPanelto add those panel styles (but not the actual component). I also added aspacingprop to both the droppable and draggable components.In the third (custom handle) example I'm playing with the idea of using completely custom/non Panel components, like the EuiListGroup and how that's affected by the draggable.
For the copyable example, I added an
EuiButtonIconto the copied item that we should hook up to some remove function. Also, in agreement with chandler that we should allow removal, and so maybe dragging outside of the droppable area should allow removal (though this should be up to the consumer too).Lastly, in the complex example, I changed the custom drag handle here to an
EuiButtonIconand it's not working as expected. Is it possible to allow this? I think it would simplify some hover and focus states for the consumer so they don't need to add any.