Minor updates from v2.2 -> v2.11, diff here

Diff here

The React implementation of ButtonGroup.Item adds a class when focussed, which bumps the z-index from 10 up to 20 to prevent this ugliness:

I've quickly tried replicating this in the Ember component but divs don't seem to be capable of firing focus/blur (or in Ember land, focusIn/focusOut) actions. That or the button inside the button group icon is stealing the focus/blur events, not sure... either way, this needs fixing, but is quite low priority as not many people will see it.

Diff here

In fixing bubbling from polaris-links (#36), I introduced a polaris-unstyled-link component as per the React implementation. We should refactor polaris-button to use it when a URL is supplied.

Diff here

We currently use Polaris v1.1.1 - we should update to the latest Polaris release (at the time of writing, v1.10.2). Below is a list of what needs updating to catch up:

• Icon files

• SASS files

• Component files (each of these is a link to the diff between our currently implemented v1.1.1 and the latest master at this point, v1.10.2):

• ActionList (PR here)

• Banner (PR here)

• Breadcrumbs (PR here)

• Button (PR here)

• Checkbox (PR here)

• ColorPicker (PR here)

• ColorPicker/Slidable (PR here)

• ColorPicker/color-utilities (PR here)

• Layout/Section (PR here)

• Link (PR here)

• Page/Action (PR here)

• Page/Header (PR here)

• Page (PR here)

• Pagination (PR here)

• Popover/Pane

• Popover

• Popover/PopoverOverlay

• PositionedOverlay

• PositionedOverlay/math

• ResourceList/Item - only updates seem to be TypeScript-related and the blur event handler which we don't have implemented at this point anyway.

• ResourceList - only updates seem to be related to the react-specific key property which we don't use.

• Scrollable

• Stack (PR here)

• TextContainer (PR here)

• New components which we'll need in near future:

• Spinner (PR here)

• SkeletonBodyText (PR here)

• SkeletonDisplayText (PR here)

• SkeletonPage (PR here)

Changes here

Diff here

Currently this addon has a copy of the Polaris SASS files in its vendor folder - we should leverage the install process to pull these files dynamically and remove them from this addon.

text is probably the best alternative. We should update the readme to add a note about this once it's done too.

The links in the README to the docs pages for each individual component give a 404 when clicked on npm. I've opened an issue with npm to find out what the correct way of linking those is as the fix I attempted in #135 didn't actually fix the issue. One possibility would be to use HTML link tags instead of markdown, and specify the URL ourselves... would like to know what the correct way of doing this would be as well though 😉

Repro steps

1. Set up a page with a polaris-text-field and a polaris-button on it.
2. Focus the text field, enter some text and click the button.

Expected result
Button action fires.

Actual result
Button action does not fire.

I've confirmed that this is not an issue with the original React component.

Example - clicking the page secondary action here should always open a modal, but does not when the text field is focussed and has an updated value:

Switching an app over to use the new breadcrumb implementation, I found that the click event from the polaris-breadcrumb button element's onclick handler was being passed to the outside world on action invocation, which is messy and in my case, caused an error in the action being invoked.

Diff here

Diff here

Diff here

Diff here

Diff here

Currently users have to @import "polaris/styles.scss" in their app to pull in the Polaris styles. We should change this to @import "ember-polaris" if possible.

Diff here

Implement https://polaris.shopify.com/components/overlays/tooltip.

Related info:

• react implementation
• original polaris stylesheet
• polaris' test suite for tooltip component

Diff here

A number of the components in this addon take enum attributes. We should assert that these attributes are given valid values.

This addon currently only makes Polaris styles available via SASS. We should support plain CSS as well, since not all host apps will have the option to use SASS.

Component docs here

Diff here

Diff here

TextStyle component has been swapped out for a plain div with AnnotationDescription styles in the react implementation

We should set up the dummy app as a demo page and host it via GitHub pages

Diff here

In the following scenario, the button click on the polaris-action-list/item will submit the form that the list is nested inside of:

<form onsubmit={{action "submitted"}}>
  {{polaris-action-list
    items=(array
      (hash
        text="Click me"
        onAction=(action "onClick")
      )
    )
  }}
</form>

import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    onClick() {
      alert('action list item clicked.')
    },

    submitted() {
      alert('form submitted.');
    }
  }
});

The page also reloads after the form submits. The above implementation is not likely to be used, but this has also happened in other popular form addons such as ember-form-for.

As a quick test, I added an event.preventDefault(); here in the onItemAction and it seemed to fix the issue.

Demo gif:

The spinner SVG has a fill attribute on it which causes the image to always be grey. We need to remove this attribute as we do in polaris-icon, so we should probably abstract this behaviour into a mixin and reuse it in polaris-spinner. However, the latter is tagless, so we'll need to find some reliable way of grabbing the spinner's SVG element.

Diff here

Diff here

It's more than 6 months this was released and we still don't have this and hack around it, will give a quick shot at this
App Provider

We need this to be able to port the ResourceList component across from React-land 😄

Original Sticky component source is here. We will also need a StickyManager service, React source here.

Diff here

Our implementation of polaris-action-list seems a bit out of date and different from the way the React component is structured.

Our polaris-action-list/item component takes only a single item object attribute, when it should really be taking item attributes:

• id
• badge
• content
• url
• onAction
• icon
• image
• disabled
• external
• destructive
• ellipsis
• active
• role

This is just one example where the components differ, we should check all of them thoroughly. Also some of these attributes we currently don't have implemented so we should add anything that's been missing.

• ActionList on github
• ActionList reference and docs

Polaris form component as described here

render-content is useful in many cases where we need to support either text/component being passed in is one of the fields of the polaris components.

This needs to be included in the docs along with any limitations it may have.

New nextKeys, previousKeys, nextTooltip, and previousTooltip attributes added with some new event listeners to handle keypress events.

The initial implementation of the polaris-icon component has a few nasties around SVG import, such as having to add svg options to the host app's ember-cli-build.js. We should look into how we do this properly.

Noticed that on first initialisation, polaris-select always seems to consider the first option selected irrespective of the value passed in; this doesn't seem to be an issue in the React implementation.

In the GIF below, the selected value is stripe, but the control shows the checkmark next to the first item (shopify), which prevents that first option being clickable until another option has been clicked:

Diff here

New OptionList component as of Polaris 2.3 -

• Polaris demo and docs
• Github folder (v2.11.0)

If our v2.11.0 updates have been merged and released, then this new component can go in master. Otherwise create the component off dev branch.

Needed components in admin:

• Page component
• Titles and text (not really a component but need to import the polaris typography)
• Action buttons (default, primary, link buttons)
• Table (unavailable in code - using an Ember each in the app for now)
• Form input - #17 but available via our ember-form-for wrappers
• Layout
• Form layout
• Form select - available via our ember-form-for wrappers
• Card
• Badge
• Resource List
• Overlays - Modal
• Pagination
• Stack

Nice to haves:

• Icon
• Main navigation (not available in code)
• Overlays - Popover (for logout)
• Tabs (if we decide to use them)
• Progress Spinners (unavailable in code, also if we decide to use them)
• Tooltip (optional for helper states)
• Link

If a polaris-data-table is being used to render data and e.g. a new item is added or the content of a cell is updated, the code to set row heights etc. doesn't run. This can leave table row heights too big/small for their content.

We might be able to handle this by bubbling an action from polaris-data-table/cell's didRender hook up to the polaris-data-table component and triggering the height recalculation from there.