Re: [Design update] Style guide for pgAdmin4

On Friday, May 19, 2017, Shirley Wang <swang(at)pivotal(dot)io> wrote:

>
>
> On Fri, May 19, 2017 at 7:40 AM Dave Page <dpage(at)pgadmin(dot)org
> <javascript:_e(%7B%7D,'cvml','dpage(at)pgadmin(dot)org');>> wrote:
>
>> Hi
>>
>> On Thu, May 18, 2017 at 6:57 PM, Shirley Wang <swang(at)pivotal(dot)io
>> <javascript:_e(%7B%7D,'cvml','swang(at)pivotal(dot)io');>> wrote:
>>
>>> Hello!
>>>
>>> *Update on style guide location*
>>> We're going to move the agreed upon styles from Figma onto a webpage
>>> that will be accessible by everyone. We've decided to have a static site,
>>> with the html and css available to copy and paste. We'll add components to
>>> the style guide after we update the current UI with new styles.
>>>
>>> *Dropdown styles*
>>> I noticed that some drop downs include a 'x' next to the current option
>>> in the text field:
>>>
>>> The 'x' and the down arrow functionally do the same thing, and it seems
>>> redundant to have both. I would suggest removing the 'x' since selecting
>>> another option from the dropdown will automatically replace the current
>>> option.
>>>
>>
>> No they don't. The x clears the current selection, and opens the combo.
>> The arrow will just open the combo. Both operations are valid (and in some
>> cases, required), but for clarity we probably should change it such that
>> the x doesn't open the combo.
>>
>>
> If the 'x' doesn't open the combo, Is there a way to just type in that
> text field without opening the drop down menu? It seems like in many of the
> fields where there is an 'x' a user would still need to open the dropdown
> first to type.
>
> [image: options.png]
>
> In most cases where I've seen a text field with options, usually a drop
> down appears automagically without a need for a dropdown icon or x
>
> [image: googlesearch.gif]
>
>
>
> [image: text_field_dropdowns.gif]
>

Yes, I think that would be an improvement, if it can be done appropriately.
I think the reason it's not done that way now is that unlike the examples
you gave, in pgAdmin we're searching for one of the existing values in the
list, rather than entering a free-type value that might be auto-completed.

>
>
>>
>>
>>>
>>> *Button toggles vs checkboxes*
>>> In some cases within dialogs, a toggle is used to define yes or no,
>>> while in other cases a radio button is used to define yes or no:
>>>
>>> It does seem like 'Connect now?' and 'Save password' (in 'Connection'
>>> tab within 'Create - Server') are the only places where checkboxes are
>>> used, is there a reason why these are different? I think we should just
>>> choose one, unless there was a specific reason as to why both check boxes
>>> and toggles are used.
>>>
>>
>> I think it was just because that was one of the very first dialogues
>> written, when we were in POC mode. It should be fixed.
>>
>
> ok!
>
>

--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company