ebay / ebayui-core Goto Github PK

Design doc:
https://ebay.invisionapp.com/share/CWN9X1JF6MA#/screens/293357159

Currently the transform expects direct nested tags, and does not allow any other Marko tags.

For example, the <ebay-select> expects a direct nested tag <ebay-select-option>, and if you add any control tags, like <if()> or <for()>, you will break rendering.

The fix is to walk the entire tree of children tags and apply the transform to any tag that matches, regardless of whether the nested tag is an immediate child of the tag.

Let's run our tests through Travis CI and report all test coverage via Coveralls.

By default, Travis runs the npm test command found in package.json.

For an example of how this works, view any of the makeup modules:

https://github.com/makeup-js/makeup-expander/blob/master/.travis.yml

(Note that the location of our reports is different than in makeup).

Coveralls will be a new devDependency.

Description

Refer to #74.

We should create a repository to house a set of Browserlist definitions, specifically to keep eBay in lock-step around browser policy.

Resources

Browserlist
Browserlist is a Good Idea

Added the new component to the ebayui test env page
When I use long text to fill the line- the new line starts with the arrow

expected behavior- The new line takes in the last word with it

http://go/ebayuitest

screenshot attached

Repro:
ebay-menu

1. in mac safari- open up the ebay menu
2. select any item
3. click on the menu box directly- its is expected to collapse but it doesn't

The build script makes some assumptions about it's env and leaves the env in a v4 state. So running this script back to back locally causes an error (because it assume v3 state). This is because it's optimized for CI machine, not local. Let's rename the script to make this obvious. I propose cibuild or cijob or the like.

Related to: #52

Combobox pattern:

https://www.w3.org/TR/wai-aria-practices-1.1/#combobox

For first version let's implement autocomplete with manual selection.

Example:

https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.0pattern/combobox-autocomplete-list.html

Helpful plugins:

https://github.com/makeup-js/makeup-active-descendant

unable to collapse the menu by clicking outside the menu area

Design doc:
https://ebay.invisionapp.com/share/CWN9X1JF6MA#/screens/276179313

Related issue: eBay/skin#80

ebay-button secondary, small and large -in firefox clicking on the item does hot hold the blue - selected layout

once the button is clicked it is expected to hold the clicked state of the component. but the state is released.

the blue outline goes away.

takes first click to select the component and second click to expand the menu.
it does not happen always but happens pretty frequently.
the same happens with collapse

I have added the components to the ebayui test page.
http://go/ebayuitest

Breadcumbs- last page as parent
I see a right arrow to the right of the leaf element pointing to nothing.
This is what I used

eBay
Cell Phones, Smart Watches & Accessories
Smart Watch Accessories
Smart Watch Bands

screenshot attached

You can see a right arrow to the right of "Smart Watch Bands"

Let's get the latest menu and notice styles!

Creating placeholder issue. Spec to follow....

Related ticket to be tackled first: eBay/skin#54.

Details to follow...

Related issue: eBay/skin#82

The current Skin scoped CSS does not provide scoping for individual components which are used from the eBayUI Core library. It only provides scoping when Skin is used in isolation (no eBayUI components).

Therefore, we need to provide a way to scope the individual components when they are used within a project.

Some ideas:

1. Allow a specifically scoped .ds6 version of the Skin css within each component
2. Create a special scoped class on the main container when a certain flag is encountered
3. Use ARC to provide a wholly separate component path
4. Copy the corresponding Skin module CSS into a local LESS file for each component

Please let me know if any of you have questions about the reasons, and please chime in if you have an idea about possible solutions.

Creating placeholder issue. Spec to follow....

Because we have an internal corp NPM registry, we need to ensure that we're actually publishing the core components to the public registry, and enforce this setting when publishing.

Resources:
https://docs.npmjs.com/files/npmrc
https://docs.npmjs.com/files/package.json#publishconfig

Placeholder issue created. More details to follow....

(basically a carbon copy of ebayui-image I think)

Bug Report

Details

Currently the carousel component is attaching a resize event to the window object that is not being cleaned up when the component is removed which will slowly leak memory.

Possible Fix

#10

Creating placeholder issue. Spec to follow....

https://ebay.invisionapp.com/share/CWN9X1JF6MA#/screens/299234476

Some additional thoughts:

• The component should allow the application to suggest a position to open the tooltip, but use JS to override that in order to keep the tooltip on page.
• A11y guidelines:
  • Tooltip: https://ebay.gitbooks.io/mindpatterns/content/disclosure/tooltip.html
  • Infotip: https://ebay.gitbooks.io/mindpatterns/content/disclosure/bubblehelp.html
  • Tourtip: Guidelines need to be established. They are unique since they are usually meant to be open when the page is loaded and grab the user's focus.
• Based on my implementation of tourtips in the past
  • It looks bad if there are many tourtips open on the page at the same time. They can even overlap each other. It would be good to add some management to prevent this.
  • Tourtips usually only show up once and then the user never sees them again (using local storage). We could create this functionality to prevent applications from having to duplicate it. Applications will probably also want ways to reset the timeout period.

(It's currently in dependencies)

If these things are going to be around for ever, and we know about them, can we at least hide them and reduce noise in our test output:

I know this is done, but just creating for tracking/historical purposes.

The nested tag transformer is a bit aggressive and renames all nested tags, even if they are already using Marko's nested tag syntax.

<ebay-menu>
    <ebay-menu:item>Item</ebay-menu:item>
</ebay-menu>

becomes:

<ebay-menu>
    <ebay:menu:item>Item</ebay:menu:item>
</ebay-menu>

Honestly, probably not much of an issue once #11 and #13 are fixed, but ran into this trying to work around those issues.

Details to follow...

Related issue: eBay/skin#81

Bug Report

Details

Currently when the <ebay-listbox> is rendered without any options there is an error thrown from here.

Possible Fix

We should either update the component to support having no selected option (currently tries to select the default), or provide a better error message to users.

Notes

If the listbox will support having no options then we should also support a placeholder attribute or come up with something to display in that case.

Creating placeholder issue. Spec to follow....

Porting over some notes from the old repo:

• Improve cleanup in failure case
• Use npm pack
• Verify no errors in browser console
• Move main functionality to standalone package
• Investigate improvements to Marko to allow multiple versions to be installed at the same time
• Improve local debugging of testing against v4

When using a component that has nested tags that are created using the nested tag transformer (like <ebay-menu-item> rather than <ebay-menu:item>, Marko 4 will throw an error during the parse stage (which occurs before the transform stage) saying it found an unrecognized tag.

Solution:
Add an empty tag definition for all valid nested tags:

{
    "<ebay-menu-item>": {}
}

Array.prototype.find is not supported in IE

https://github.com/eBay/ebayui-core/blob/0.1.0/src/components/ebay-select/index.js#L31

We either refactor in ES5 or use a transform/polyfill.

ES5 will work for quick fix, but for long term I say we should be leaning towards transform/polyfill.

Looks better if we show the secondary button instead of the raw button:

Also tempted for us to make secondary the default instead of raw. Raw button has practical aspects for people consuming skin directly (horrible imagery there!) - but perhaps not so useful in ebayui.

Bug Report

Details

Currently in IE there are two runtime features being used that are not polyfilled.

1. Array.prototype.find (https://github.com/eBay/ebayui-core/blob/0.1.0/src/components/ebay-select/index.js#L31)
2. Promise (used by Marko internally).

Possible Fix

1. We should probably just avoid Array methods added post IE9 (moved to #50).
2. I'm not sure if it was intended for Promise to sneak into the Marko codebase, @mlrawlings what are your thoughts? For now we could just include a promise polyfill with this library, or at least recommend a polyfill.

Should be identical to the eBay policy.

All tests (server and browser) should ideally run against both v3 and v4. We may want to limit the v4 testing to CI (like with the integration suite), since it modifies dependencies.

So that we can catch and fix bugs in all browsers, we need to be running the transpiled dist code in our local demo.

Running yarn start should add a transpile step to it's pipeline, and local demo should have capability to be running on the transpiled code in dist.

Related to: #59

https://github.com/amilajack/eslint-plugin-compat

The marko.json that specifies the nested tag transformer is only scoped to the demo and test components.

Any outside user of the components will not have their nested tags transformed:

ebay_listbox_tag({
        name: "name"
      }, out, 0, function renderBody(out, ebay_listbox0) {
      out.w("<ebay-listbox-option value=\"1\" label=\"Option 1\"></ebay-listbox-option><ebay-listbox-option value=\"2\" label=\"Option 2\" selected></ebay-listbox-option><ebay-listbox-option value=\"3\" label=\"Option 3\"></ebay-listbox-option>");
    });

repro:
open the ebay-menu checkbox
select on a couple of items
it is expected to stay expanded until I collapse it by hitting the menu head
but it collapses at some selections

Creating placeholder issue. Spec to follow....

There are currently some inconsistencies with the ebay-listbox components README.md vs the other components:

1. Headings contain code blocks.
2. "Examples" used instead of "Usage".
3. Headings prefixed with component name.

I'm not sure which format works best but I do believe we should make these consistent.

ebay-listbox readme

ebay-button readme

[removed prior content as it was confusing]

The test script in package.json needs updating to incorporate linting.

IOS- the ebay-button raw looks different.