[jboss-jira] [JBoss JIRA] (DROOLS-2922) CSS: Pop-over menu for DMN decision tables.

[Liz Clayton (JIRA)]

    [ https://issues.jboss.org/browse/DROOLS-2922?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13626565#comment-13626565 ] 

Liz Clayton edited comment on DROOLS-2922 at 8/30/18 10:45 AM:
---------------------------------------------------------------

Adding a pic with some callouts to sum my understanding of the agreements on the final design. The items with pink callouts are things that I assume can be added as elements even if it can't be styled immediately. The degree to which [~manstis] [~karreiro] you are able to style these to align with common PF or WB elements, I hope you and [~srambach] can discuss and align on that. The items with gold callouts, reflect my assumption around which elements rely specifically on CSS/Html styling provided through this jira. 

A) Form field labels for usability (context) and accessibility.
B) Group the two actions (edit name, select data type) conceptually under a single task (Edit Decision) which is the pop-up title.
C) Added a "Manage" link outside of the dropdown element - because with the Live Search it might overload the affordance to also offer an inline action link within the list. Note: Manage link opens the Manage dialog. 
D) Data type selector with "Live Search" type-ahead. Note: dropdown should expand within the pop-over. [~srambach] I believe that [~karreiro] has a solution for this dropdown. 
*E & F)* Use variant 1 of the PF pop-over patterns, which includes a title, pointer, and close icon.

 !pop-overcSpecs.png|thumbnail! 


was (Author: uxdlc):
Adding a pic with some callouts to sum my understanding of the agreements on the final design. The items with pink callouts are things that I assume can be added as elements even if it can't be styled immediately. The degree to which [~manstis] [~karreiro] you are able to style these to align with common PF or WB elements, I hope you and [~srambach] can discuss and align on that. The items with gold ones, is my assumption around which elements rely specifically on CSS/Html styling provided through this jira. 

A) Form field labels for usability (context) and accessibility.
B) Group the two actions (edit name, select data type) conceptually under a single task (Edit Decision) which is the pop-up title.
C) Added a "Manage" link outside of the dropdown element - because with the Live Search it might overload the affordance to also offer an inline action link within the list. Note: Manage link opens the Manage dialog. 
D) Data type selector with "Live Search" type-ahead. Note: dropdown should expand within the pop-over. [~srambach] I believe that [~karreiro] has a solution for this dropdown. 
*E & F)* Use variant 1 of the PF pop-over patterns, which includes a title, pointer, and close icon.

 !pop-overcSpecs.png|thumbnail! 

> CSS: Pop-over menu for DMN decision tables.
> -------------------------------------------
>
>                 Key: DROOLS-2922
>                 URL: https://issues.jboss.org/browse/DROOLS-2922
>             Project: Drools
>          Issue Type: Story
>          Components: DMN Editor
>            Reporter: Liz Clayton
>            Assignee: Sarah Rambacher
>              Labels: UX, UXTeam, drools-tools
>         Attachments: DataType selection ('Properties Panel' and 'in-grid').png, Screen Shot 2018-08-10 at 10.23.36 AM.png, pop-overc.png, pop-overcSpecs.png, select.png
>
>
> *Background*
> Persona: Business analyst or Rules practitioner
> Use Cases from the DMN canvas view, as a user I want to:
> * Search a list of available data types from a decision table, as part of an input/selection process. 
> * Select  a data type inline from a decision table. 
> * Have a means to rename the Decision (node.)
> * Have a means to access the Manage Data Types dialog.
> Notes: 
> Design requires a Pop-over, which includes:
> * Form field labels for usability (context) and accessibility.
> * Variant 1 of the PF pop-over patterns, which supports a the pop-up title. 
> * Drop down component with Live Search
> * "Manage" link opens a dialog. 
> * Pop-up is initiated by a single-left mouse click within the respective decision table cell. 
> * Design needs to be reasonably consistent with Stunner and PF components. 
> Verification conditions:
> * Scrum team and PO review. 



--
This message was sent by Atlassian JIRA
(v7.5.0#75005)