QA Review - Apr 4

[daltonwh]

• Inspect Mode seems to be working backwards. It’s active when it appears to not be selected, but inactive when it appears to be selected.

• My expectation with Inspect Mode is that you hover and select elements directly in the target app, but it only works by hovering over different items in the element tree

• Pseudoclasses should have a gradient to fade out the element item label, rather than being abruptly cut off

• All inputs for properties in the grid that are editable should have a background hover, like the Select inputs have.

• It appears some inputs in the property grid do have a background hover, but are the same color as the background for the hover state of the row, so they appear invisible. I would check the colors used for various states on each input type and ensure they have the same styles across the board. As they currently have different styles between Select inputs, Color Picker, and other inputs.

• The Select input menu/popover width changes as you scroll, depending on the character count of the items in view. The menu width should stay static and should fit whatever the longest item is in the whole menu. I’m assuming this is happening because of some sort of lazy loading?

• For property grid rows, there should be top and bottom padding of base-size-4 to ensure there’s some white space when users hover over the input in a property row

• Overall I’d say do double check padding/margins and sizing of all components in the app, as I notice there are some components across the app that don’t have proper sizing/spacing. For example the Pseudoclass tag appears to have some right-padding, but not left-padding.

• The Close button (X icon) when searching in the element tree appears to be using the incorrect icon and is an incorrect size.

• No “reset” button appears for elements or element properties when changing values to properties.

• For links on the empty state of Additional Tools tabs, I’d choose neutral-250 for the default state and neutral-100 for the hover with no underline.

• For the table header labels, the order should either be shown by default, or on hover. With an “active” state for the selected table column (appears as a blue tag). You can test this on any of the Additional Tools workflows if you view them as a prototype

• The Filter popover appears to either be using the incorrect ordering icons (ascending/descending), or they might be sized too large.

• The cards used for property details shouldn’t have a background change for the label background when expanded. The chevron icon and text changes colors to indicate, but the background will remain the same (specifically when it’s expanded)

• Chevrons should have a separate hover state when they operate separately. In the case of the Elements tree, you can expand/collapse layers without actually selecting a given layer, so the chevron should have a separate hover for this reason. You should be able to view any of the workflow prototypes with the elements tree visible to see this hover state

• Element property categories (ex: Appearance, Behavior, Layout, etc.) should have chevrons on the righthand to indicate the status of whether it’s collapsed and also cue users into knowing they can expand/collapse.

• For Assets and Resources in particular, the sub-header (table labels) should be the same background color as the main header. The background colors have specific usage for visualizing the hierarchy.

• On that note, the Asset item rows should have a hover state, and essentially any series of elements should have a hover state. Anything clickable should have a hover state to indicate to users it's clickable. This applies to the Resources tab as well (rows should have a hover state). I don't think it's necessary for Settings screens, but it might still be nice for readability as users can see what settings item they're focused on more easily.