[polaris.shopify.com] Example audit

All examples

[ ] Width is too thin, see Autocomplete with action
[ ] Drop down for one item is not useful
[ ] Combobox and Autocomplete are the same?
[ ] Examples require clicking to see different types, The approach to button disabled does this much better
[ ] Spinners and animations not triggering (probably why progress bar doesn't show)

AppProvider

[ ] with link component could be simplified to a link instead of a <Page>
[ ] with color scheme looks broken with white text on grey background

Autocomplete

[ ] Destructive action has double padding causing odd focus

Avatar

[ ] Small example does not need to be in a list/popover

Banner

[ ] Warning has incorrect left padding

Card

[ ] Subdued secondary content and with seperate header has incorrect left padding
[ ] Custom React Node Title width changes and layout is odd
[ ] With flushed sections looks broken

Collapsible

[ ] When closing it resizes the whole card

ContextualSaveBar

[ ] Cannot see difference between fullwidth, flush and default

CustomProperties

[ ] Cannot see a difference between app provider and or app provider + color scheme

DataTable

[ ] Sortable when sorted cannot read properties of undefined (reading 'rightEdge')
[ ] with all of its elements should replace default
[ ] with fixed first column has too much UI for the iframe
[ ] sticky header doesn't work in iframe

DatePicker

[ ] Background should be a card white, the grey makes it hard to see active cells.

Dropzone

[ ] With drop on page is just putting a dropzone inside a page? odd example. I think it's meant to make the whole page a drag target. The name could be updated or it could not use the <Page> component to confuse things.
[ ] accepts only svg files appears as a dashed line

Filters

[ ] Clicking filters opens a sheet which breaks the layout of the iframe and scrolls the page a bunch

Form

[ ] Custom on submit does nothing pressing submit, could open alert?

Frame

[ ] Background colors conflict with grays
[ ] Cannot see what offset does without scrolling

Fullscreenbar

[ ] Broken and doesn't expand to fill container

Grid

[ ] Broken and doesn't expand
[ ] three one third columns shows two columns?
[ ] custom layout removes content from card?

IndexTable

[ ] With empty state is just a card with content
[ ] clickable button looks broken as button has no whitespace around it
[ ] with all of it's elements should be default

Layout

[ ] no room for columns, snaps back to one column

List

[ ] No bullets rendered

ListBox

[ ] Loading spinner doesn't spin
[ ] with custom element looks broken

MediaCard

[ ] with small visual doesn't change image size
[ ] Duplicates card examples for actions

Modal

[ ] Only shows mobile layout, appears as sheet
[ ] without an activator prop doesn't render

Navigation

[ ] Odd double background color
[ ] Should be left aligned instead of center?

Page actions

[ ] Doesn't expand to fill area

Page

[ ] Small width by default, hard to identiify what it is

Pagination

[ ] with keyboard navigation should work like that by default, confusing example

ProgressBar

[ ] Nothing rendered

ResourceItem

[ ] Default renders in resource list?

ResourceList

[ ] Loading no spinning
[ ] Sorting looks broken
[ ] Width is tiny
[ ] with alternate tool is broken
[ ] empty search result state looks broken as it's just a para chucked in
[ ] Default x all of it's elements should be consolidated

Scrollable

[ ] to child is confusing, just put a link at the top?

Select

[ ] with seperate validation error feels outside the select component

SkeletonBodyText SkeletonDisplayText

[ ] Not visible

Spinner

[ ] with focus management outside scope of component

Stack

[ ] Default/non wrapping appear the same
[ ] Vertical centering needs more width, text wrapping looks broken

Tags

[ ] removable is a huge tag?

TextField

[ ] right aligned could have two fields with different length labels to quickly show the right alignment faster
[ ] inline suggestion does nothing?

TextStyle

[ ] code example is / and could be a larger string like hello world

Topbar

[ ] with color scheme example does nothing, clicking button doesn't work

Shopify / polaris

[polaris.shopify.com] Example audit #6706