Update to npm PropTypes instead of React.PropTypes

Since React 15.5.x we get a warning in the console:

"ERROR: 'Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.'"

We need to update all of our components to https://www.npmjs.com/package/prop-types which is now a standalone Project.

Basically:

Install Prop-Types
Change imports.js
Update Code (Replace) React.PropTypes with PropTypes. Instead of using webpack + aliases we should go through all components and change it.

Make filter panels scrollable again

Make filter panels with fixed vertical size scrollable that user can beside of using the free text field, scroll as well.

Drop down menu solutions

All drop down solutions aligned to the new spacings.
https://zalando.invisionapp.com/d/main#/console/10454474/222956355/preview

As there is no margin defined for dropdown-labels, the labels are so tight to the former dropdown that the dropdown-menu-arrow points to the next label.
What should we do? Pull the arrow more to the input-field or create an input-field styling for the combination label/input?

DS Colors +1 gradient color

Added a gradient color as background for table headers.

https://zalando.invisionapp.com/d/main#/console/10454474/223408083/preview

Remove the margin override for icons in the week picker

This bad boy needs to go once the icon alignment is fixed more globally.

Location: src/ws-week-picker/ws-week-picker.scss

i {
    font-size: 1rem;
    //TODO: This overrides a magic-numbers declaration in the SCSS repo's icons.scss Remove once  margin-top -25% hack is removed there.
    &::before {
          margin: 0;
    }
}

Add Introduction Tutorials for every Framework

We should provide a (short) introduction in our Wiki for every framework where we use our components, e.g. Reactjs, Angular2, Aurelia etc.

keep dropdown selection state

What happens
The selection of dropdown items is resetted but still stored when clicking on document body.

How to reproduce
I don't know anymore^^

Tileschart does not update tile size on update

When the props updates and the component serenaders, the size of the tiles has to be updated.

Currently, it does not, because we calculated the tile size only on componentWillMount.

Merge conflict markers in the docs

The file components/doc/components/dropdown.md was at some point incorrectly merged and conflict markers were accidentally committed, breaking the documentation page:

Arrow Icons in Week-Picker seem to be different in different browsers

Tony:

Fabo:

Let's check back in some time of this is still an issue.

Table Solutions – Adapted spacings

All table solutions aligned to the new spacings.
https://zalando.invisionapp.com/d/main#/console/10454474/222686891/preview

Date Picker

aligned the date picker to the new spacings...
https://zalando.invisionapp.com/d/main#/console/10454474/223650900/preview

Rename Project

As we decided to go with the name "Fabric" we need to rename all repositories.

WS-Header - Text Title has wrong alignment

Looks like when you provide only a Text for the Header Component the Title is aligned wrong.

Current:

Expected:

Might be fix with:
Add .logoto class

WSDropdown does not set the label of the preselected value

The following code, preselects "New" as value.
It's possible to see it by clicking on the dropdown, but it still #shows "Select" as the label.

<WSDropdown text="SELECT..." type="select" multiple={false} items={[ 'New', 'Open' ]} value={"New"}/>

Version and release setup

As part of an working and usable styleguide we don't want to rely on branches which can change without knowing it, but on git tags / github releases which are more resilient and reliable. Therefore we need an more less automated setup which increases our package version and publishes a new release with it's changelog.
Every time a small change was merged to the master we should increase the patch version and create a new release automatically. The changelog should be generated from the commit history by following an commit message convention. This convention has to be in the commit message if a normal merge is used, otherwise it has to be in the message of the squash commit.

Replace isparte with istanbuljs 2.0

According to Isparte Readme it is not maintained anymore which means that it might result in some issue when babel-core changes so that the current isparta is not working anymore.

I checked istanbuljs and it looks like they have introduced istanbuljs 2.0 which supports babeljs (they have a babel plugin).

Dropdown deselection issue

Well maybe the deselection feature is not something that was documented but the component is definitely trying to deselect the selected item when you click on it second time. And at that brings us to the issue...

How to reproduce

I use Google Chrome browser (Version 59.0.3071.115) to reproduce it but I guess it should be possible to reproduce it with any other browser.

Go to the demo page
Open the developer's console
Select any item on the first dropdown of type "select"
Click again on the selected element and this should cause an error:

Uncaught TypeError: Cannot read property 'label' of null
    at WSDropdown.getTextFromValue (vendor-bundle.js:24430)
    at WSDropdown.setValue (vendor-bundle.js:24441)
    at Object.value [as handle] (vendor-bundle.js:24373)
    at Object.value [as handle] (vendor-bundle.js:24811)
    at DropdownMenuItem.onClick (vendor-bundle.js:25181)
    at Object.onClick [as click] (vendor-bundle.js:25213)
    at HTMLLIElement.eventProxy (vendor-bundle.js:20436)

Note: For other dropdown types (anchor, button, icon) there's no such error. As for the multiselect dropdown.

Filterable WSDropdown with many items lacks UX clue for number of elements

Hey all,
The filterable WSDropdown is cool because by filtering the user don't have to deal with scrolling a potentially huge list of elements, but I think it's a bit confusing for the user to actually realize that the list has more elements than .

I made a quick gif of the behavior, the limit is default (10) and the list has 50 elements.

Notice in the beginning that unless the user has previous knowledge OR you tell him somewhere in your screen OR you tell him by using the placeholder text (which can lead to increase the horizontal size of the dropdown menu), the user has no way to tell that the list has 50 elements, unless he starts typing.

I'm no UX guru, I don't know exactly how to give the user a feel that there are more elements without resorting to a scroll bar (maybe som text close to the filter field? but then it would get long like "This list has more elements. Type to filter", probably not cool).

Anyway, keep up the great work!

Create CircleCI robot user

Date picker with limits of selectable values

Check boxes, option fields & switches

Check boxes, option fields & switches with all specifications.
https://zalando.invisionapp.com/d/main#/console/10454474/222964295/preview

Buttons with documented spacings

Buttons are aligned to new spacings and documented with space variables.

https://zalando.invisionapp.com/d/main#/console/10454474/222966622/preview

Update documentation.js

With the release of beta19 of documentationjs they removed the buildSync functionality which is now breaking our generate task for docs. https://github.com/documentationjs/documentation/blob/master/CHANGELOG.md#400-beta19-2017-04-10

We should update to one of the rc versions and update the gulp tasks accordingly.

Autofocus search in dropdowns

Chris mentioned, that dropdowns with search don't focus the search on opening the dropdown.
We think, that autofocus would lead to a better user experience, as the user doesn't need to click again on the search-field.

Updated README for preact

The README references the vanilla WebComponents process. Should we update the README with more specific instructions? I would love to try contributing a component as well, but need some pointers to get started. @wholesale-design-system/engineers

Notifications

Notifications aligned to new spacings.
https://zalando.invisionapp.com/d/main#/console/10454474/222960998/preview

Week-Picker

In the preorder recommendations frontend we need this component.

I already started implementing using the design aligned before for the web component.

Build fails because header component SCSS references a non-existent variable

Module build failed:
      margin-top: $space-l;
                 ^
      Undefined variable: "$space-l".
      in /Users/tschluchter/Developer/WholesaleDesignSystem/components/src/ws-header/ws-header.scss (line 230, column 19)
 @ ./demo/index.scss 4:14-127
 @ ./demo/demo_app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./demo/demo_app.js ./webpack.config.js
webpack: Failed to compile.

Documentation is not clear regarding how to use Demo

It says:

In 'demo/index.html' you will find already build web-components. And see how you can integrate them in a vanilla setup.

But all that index.html has inside is basically import of one non existing script:

    <script src="bundle.js"></script>

Date picker – calendar icon should be part of clickable area to invoke the popover

Expected: In the date picker, the user can click anywhere inside the input field to invoke the popover.
Actual: In the date picker, the user cannot click on the calendar icon to invoke the popover.

Dropdown pop-over configurable with max-width

#97 introduced a sensible default for sizing the pop-over used to pick values from the dropdown.

As a further enhancement to this component's API, I would suggest the following:

Make the component configurable by the implementer to include a max-width
When no max-width is supplied by the implementer, default to the behavior introduced in #97
When a max-width is supplied, set the dropdown to the max-width and truncate all values that are wider than the max-width
If the content of the dropdown is narrower than the max-width, size it to accommodate the content and not wider.

Rationale: At design time, the average length of dropdown content is usually known. For usability purposes, minimizing the number of items that have to be truncated is optimal.

Problems/Questions: How to make this behavior responsive?

Drop down does not support disable attribute

As a user of this component, I would like to be able to use the disable property, and have this behave in a similar way as regular html elements.

Input fields – Adapted spacings

Input field visibility & behaviours... aligned to new spacings

https://zalando.invisionapp.com/d/main#/console/10454474/227050474/preview

Usage section of README

Usage section of README says:

run gulp for building / watcher
gulp test for test / watcher

I think it's explicitly implied that I have to run also npm install (which in my opinion should also be documented)

After doing following:

$ npm install
$ gulp

gulp fails with following output:

[14:42:39] Using gulpfile ~/dev/js/components/gulpfile.js
[14:42:39] Task 'default' is not in your gulpfile
[14:42:39] Please check the documentation for proper gulpfile formatting

gulp test fails with following:

$ gulp test
[14:56:16] Using gulpfile ~/dev/js/components/gulpfile.js
[14:56:16] Starting 'test'...
11 04 2017 14:56:16.849:ERROR [config]: File /Users/alibin/dev/js/components/build/tasks/../../karma.conf.js does not exist!

Tile Chart does not allow mouse events

Tile chart does not accept mouse event functions.

Add the possibility to call a function onMouseEnter and onMouseLeave.
In addition, we also need to call a function by clicking to the tile and we need to know the tile identifier and the group of the tile that was clicked.

Tabel filter panels

Filter panels aligned to new spacings

https://zalando.invisionapp.com/d/main#/console/10454474/222960998/preview

Demo page doesn't work in Preact mode

When running a demo page via npm run start:preact the server starts, but the demo page fails to load components due to a JavaScript error.

React mode (npm run start) works fine.

[bug] ws-dropdown has a weird behaviour when you search before saving selectionon multi-select

As you can see, when you do the following a selection disappears:

Open Multiple Dropdown Demo
Select some options
Do a search with one letter , e.g. "d"
-> Expected Result: See nothing as character is short or show all strings with "d" in it
-> Result: Nothing
Afterwards reset search
Selected options before search are not visible anymore and also not searchable
Click ok -> Empty Selection in Input field
Open Dropdown -> Everything is visible again

fabric-design / components Goto Github PK

components's People

Contributors

Stargazers

Watchers

Forkers

components's Issues

How to reproduce

Recommend Projects

Recommend Topics

Recommend Org