fabric-design / components Goto Github PK

View Code? Open in Web Editor NEW

3.0 12.0 9.0 3.01 MB

Moved to internal repo

Home Page: https://fabric-design.github.io/styleguide

License: MIT License

CSS 12.91% JavaScript 87.09%

reactjs preact preact-components javascript

components's Introduction

Zalando Fabric Components

Motivation

At Zalando Retail Operations we develop a lot of web applications of different size and complexity. We want to ensure consistent look and feel in every one of them, regardless which individual team worked on it. For this purpose we created a styleguide that provides a SCSS style library and a set of independent React/Preact components.

This repository is a home to the aforementioned components.

How it works

Components in this repository are one part of the styleguide. We don't install any framework or styles, therefore if you want to use the components you have to provide the framework (React or Preact) and styles in your project yourself.

For development and testing we use gulp, webpack, karma and jasmine.

Integrating Components into Your Project

The package is not yet published on npm as we are still in the beta phase.

First of all you should install React/Preact (if haven't already) and our scss rules:

npm i -D -E preact prop-types or npm i -D -E react react-dom prop-types
npm i -D -E git+https://github.com/fabric-design/scss.git
Follow instructions for integrating the components into your build process.
Alternatively, you can check our example vanillaJS setup.

Running Demo Page

We provide a demo page that integrates all components and runs locally at http://localhost:8080:

npm run start starts the demo in React mode
npm run start:preact starts the demo in Preact mode.

Check the 'demo' folder for the example of how to integrate components into a React tech stack.

Contributing

The styleguide is in active development and we welcome any contributions and feedback. See our contributing guidelines for detailed information.

Internal API Documentation

To help with onboarding of potential contributors we provide auto-generated documentation of components API Documentation.

Development Tasks (npm scripts)

npm run lint for linting the source code of our components and tests
npm run test runs both test scenarios (react and preact)
- npm run test:preact for running component tests only with the preact framework
- npm run test:react for running component tests only with the react framework
npm run tdd continuous test runner for components (uses preact)
npm run docs generates documentation in docs/api based on jsdocs in the components (src-folder)
npm run build builds our components into the dist folder for later integration. We are currently transpiling our components into AMD, CommmonJS, ES2015 and Systemjs modules.
npm run precommit we recommend that before you commit / do a pull-request you should execute this command. It runs the linter, tests and builds everything.
npm run start starts our demo application with webpack dev server at http://localhost:8080. Provides the scss library and react framework.
- npm run start:preact starts our demo application with webpack dev server at http://localhost:8080. Provides the scss library and preact framework.

Contact

Feel free to reach out any of us here. We are all friendly and will be more then happy to answer any question regarding our styleguide.

components's People

Contributors

Stargazers

Watchers

Forkers

raphaelbauer mroderick antnascimento epaul luisftmarin anstit btemur bgehrels mabdelsamie

components's Issues

Notifications

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

Input fields – Adapted spacings

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

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

DS Colors +1 gradient color

Added a gradient color as background for table headers.

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

Date Picker

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

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.

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.

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.

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.

Filter panels wider than its parent element

Very long content of filter panels are cuttet... sometimes more than necessary. Therefore it should be possible to customise panels width on given requirements, that panels could be wider than its parent element

Bad example how it should't look:

Spinner component

Since there is currently no spinner component defined we should take the spinner from materializecss http://materializecss.com/preloader.html

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.

Notification - Icons Redesigns

We got updates for the icons

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.

Paper shadows and elevation

Specifications of Paper elements.

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

Checkboxes and radios are too small in Firefox

As show on the screenshot, checkbox and radio inputs are rendered in a tiny size in Firefox. They look fine in Chrome. Tested in FF 54 on mac.

https://wholesale-design-system.github.io/styleguide/#/atoms/forms

Create CircleCI robot user

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

[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

Check boxes, option fields & switches

Check boxes, option fields & switches with all specifications.
https://zalando.invisionapp.com/d/main#/console/10454474/222964295/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.

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.

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.

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.

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

Tabel filter panels

Filter panels aligned to new spacings

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

Date picker with limits of selectable values

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:

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.

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!

Table Solutions – Adapted spacings

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

Drop down menu solutions

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

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.

Rename Project

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

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?

Waffle Chart

Amount + single status visualization

Tile chart highlight by group on mouse over

Currently, it's not possible to highlight the tiles by group on mouse over.
The idea is to add 'group-over' class to all the tiles of the group when the mouse is over one of the tiles of the group.

Date-Picker ranges

Investigate min/max on date inputs.
Maybe this is already implemented in flat-picker.

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>

Automatically generate API docs

In order to build a good styleguide documentation page we want to automatically generate markdown files for our components API.
This should be done on every branch build / merge to master automatically.

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"}/>

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!

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.

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^^

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.

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;
    }
}

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

Week-Picker

In the preorder recommendations frontend we need this component.

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

Composition of Dropdowns

Chris found an interesting styling bug:

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?

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).