fabric-design / scss Goto Github PK

As discussed with @szafranek, loading times for the TypeKit are a performance concern. TypeKit offers performance optimizations that we haven't yet taken advantage of. Let's figure out whether they decrease loading times to a negligible quantity:
Increasing cache times: https://helpx.adobe.com/typekit/using/optimizing-performance.html
Advanced loading with custom logic: https://helpx.adobe.com/typekit/using/embed-codes.html (See Advanced Embed Code)

Line hight of fonts in tables are 3rem (instead of 2rem).

Change variable name of "Value XXL" in to "Value XXXL".

Added a new label style with 3rem line hight.

All fonts with the color "Lynch" changed to "Fiord"

Discuss outcome of the #87 topic in our next JF meeting.

Do it!!!

a) Publishing to internal npm is not complicated as CDP provides a solution for that.
b) We are still on GH and can do it with CircleCI and publish to official npm

Adding stylelint linting rules to the project.

@fokusferit @fragsalat @tonysaad and me decided to go with following approach for internationalisation:

Each component that uses localisable labels has a property lang that takes in a language identifier.
The language can be chosen in the WS-Header. There is an language-changed-event propagated by the WS-Header the dev can listen on.
The localised labels are stored in a json per component.
The currency- and date-format are affected by this language property.
The default is always german ('de').
Both currency- and date-format can be overwritten by the properties currency-format and date-format.

XXL is changed from 4rem to 3rem. Use variable XXXL as 4rem in future.

As a User
I want to see the text of a button after clicking it
So i can know what i just clicked

the focus color of the links is [nearly?] the same as the Page Header background. It should not have a focus color

• Fix stylelint issues (2000+) (use stylefmt to autoformat as much as possible)
• How can we 'force' people to use the stylelint linting rules ?

Basically the issue is related to libsass (sass/libsass#2312) which is used by node-sass (which is used by sass-loader in webpack).

During our prototyping we discovered two issues:

• https://github.com/wholesale-design-system/scss/blob/master/utils/_helpers.scss#L92
• https://github.com/wholesale-design-system/scss/blob/master/atoms/_buttons.scss#L49

The error report for example is:

  throw new Error('Invalid mapping: ' + JSON.stringify({
      ^

Error: Invalid mapping: {"generated":{"line":1,"column":29588},"source":"webpack:///node_modules/wholesale-styleguide-scss/atoms/_buttons.scss","original":{"line":46,"column":-17},"name":null}
    at SourceMapGenerator_validateMapping [as _validateMapping] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-map-generator.js:277:13)
    at SourceMapGenerator_addMapping [as addMapping] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-map-generator.js:101:12)
    at /Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-node.js:345:13
    at SourceNode_walk [as walk] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-node.js:224:9)
    at SourceNode_walk [as walk] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-node.js:220:13)
    at SourceNode_walk [as walk] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-node.js:220:13)
    at SourceNode_toStringWithSourceMap [as toStringWithSourceMap] (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/source-map/lib/source-node.js:336:8)
    at ConcatSource.proto.sourceAndMap (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack-sources/lib/SourceAndMapMixin.js:30:32)
    at /Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/SourceMapDevToolPlugin.js:66:35
    at Array.map (native)
    at /Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/SourceMapDevToolPlugin.js:53:85
    at Array.forEach (native)
    at Compilation.<anonymous> (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/SourceMapDevToolPlugin.js:52:12)
    at Compilation.applyPlugins1 (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/tapable/lib/Tapable.js:75:14)
    at self.applyPluginsAsync.err (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/Compilation.js:639:11)
    at next (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/tapable/lib/Tapable.js:138:11)
    at Compilation.compilation.plugin (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/ProgressPlugin.js:117:6)
    at next (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/tapable/lib/Tapable.js:140:14)
    at Compilation.compilation.plugin (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:230:5)
    at Compilation.applyPluginsAsyncSeries (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/tapable/lib/Tapable.js:142:13)
    at self.applyPluginsAsync.err (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/webpack/lib/Compilation.js:635:10)
    at next (/Users/fetopcu/Desktop/Projects/alpha/shopping-queen-frontend/app/node_modules/tapable/lib/Tapable.js:138:11)

it is related to using '&' in mixins heavily which is weird as it is a crucial part of Sass.

Thomas Schlage implemented in Blockorder already a component that can filter multiple values for selection. Needs to be adapted to the latest Design System styles, and aligned with the filterable dropdown pattern.

Apply to all current table solutions.

• [] Fix wrong path config for stylelint
• [] Fix all existing issues

Specification here: https://zalando.invisionapp.com/d/main#/console/10454474/222037213/preview

Problem
For the new Retail Portal, we will introduce shared components (header, sidenavbar) and independently from our approach, this leads to an issue with the current fabric scss library. As the header will load parts of fabric, and will be "a container" for the integrated application, initially we need scoped styling for each application + shared components.

This is currently not possible as some Atoms are styling directly DOM Tags instead of abstracting them to CSS-Classes. More Details regarding "Rules of Play" will be shared (internally).

As part of this one might start also thinking of introducing Accessibility features as part of new major release.

Task
Rewrite the following Atoms, so that they are not styling DOM Tags directly but based on Class names:

• Atoms/Toggle -> Radio and Checkbox Styling
• Atoms/Button.scss
• Atoms/Forms.scss
• Molecules/Tables.scss

Additionally, it would be quite helpful when we could have already a fabric.css production ready file created in the repo so we can easily use with a CDN (or use https://rawgit.com/ ).

Outcome
A new version of Fabric as this is definitely breaking applications and should be a major version bump.
This would allow existing applications to update to the newer version when they are ready. This would also mean that we need to discuss topics around bug fixes, as master would be referencing to this new v2 and v1 would exist in a separate branch.

During our Innovation Camp, I discovered that we don't prefix anything, therefore usage of CSS Functions like transform3D are not applicable and might create a breaking UI.

As with CDP we could move back to GHE. Investigate how we can use CircleCI set up within CDP and move back to GHE.

For our use case, we don't want to have the Fabric WSHeader Component, as our application will be used by users outside of the company, therefore:

• A future Login will be not our internal IAM, instead a separate one
• Initially we don't need any language selector, login etc. -> Only a Header Bar.

I've started with the second one and will work on that topic, so that we have the scss from the Header component separated and as part of the scss library.

Resolved in #13

We aligned on having precommit hooks for tests and linting in place until we have CI ready. In this repo there is no precommit hook in place.

new hex code for madang: #78EB81

• Check Prettier as a better alternative for code consistency

It might be simpler to use Prettier, also one tool, for code formatting. This task is about exploring Prettier and if it could reduce complexity of maintaining different rules in different repositories.

I added a yellow palette to exclude orange from system colors, which are enabled for color schemes in future.

In every component that uses icons, implementers use different strategies to make them align the way they want to. Because of the way the icon CSS is structured, it's really hard to predict how icons are going to behave when they are placed at different sizes.

Let's clean that up.

setting use cases for theme colors

There are several components that use an arrow tip to indicate that a floating element is "attached" to another control:

• Date picker
• Time picker
• Week picker
• Dropdown

All these components should use the same implementation, therefore I'd suggest a mixin that works well with the border styles we've introduced to heighten arrow tip contrast on white background.

As seen below, we need to update our yml files I guess