protonmail / design-system Goto Github PK

View Code? Open in Web Editor NEW

131.0 18.0 16.0 7.26 MB

Design system for new Proton project

Home Page: https://design-system-beta.netlify.com/

License: ISC License

SCSS 99.85% Shell 0.12% CSS 0.03%

css html a11y design-system

design-system's Introduction

Design system

Proton Design system, for all Proton Projects: https://design-system.protontech.ch/

How to install it

First clone the project, then do a npm i.

Linting

We suggest to use the extension stylelint (stylelint.vscode-stylelint) to take avantage of our linter config.

Commands

CSS Reset used by Android app

If you need to refresh the CSS build, you can perform a npm run build:reset.

MISC

Where is the documentation?

Actually there is a static website, but it will be soon revamped. Stay tuned.

design-system's People

Contributors

Stargazers

Watchers

Forkers

tarsbase csalmeida forkkit darthvader2 cesarhub mbr001 rdpli atable msgpo emmanguyen cooperatievevennootschapcvbvbv nichtkunst hemraker sleepthegod prabhat-jha-cs

design-system's Issues

Refresh icon is missing

Test grid/float examples for settings home

Feature description

See especially degradation of this layout.
(grid-auto-flow: row dense; to test)

Benefits (optional)

Because, it is nice.

Containers

Add basic containers:

alert
fieldset / legend

Manage a list of notifications

There should be several notifications possible.

Top nav icons

Quick summary of bug

On resize icons are too small:

Checkboxes/Radios forms

Feature description

Checkboxes/Radios forms design.
Layout for toggle with icons

Change asset structure

Feature description

Image shared, images only for design system website, images only per project, etc.

Benefits (optional)

To facilitate dev of product :)

Prepare panels

Sometimes v4 display panels like that:

Give us the HTML / CSS to use.

Support cascade for helpers (ex: margin)

Feature description

margin: 0;
margin-left: 1rem

This is valid CSS, so the fw should allow the same behavior:

<div class="m0 ml1">popopo</div>

It should be ~= margin: 0 0 0 1rem

Use cases

reset a margin on an element and add a margin

Benefits (optional)

Same behavior as the cascade, we forget about the fw, it works.

Info icon can be present in table header

Can be a link or a toolip.

Vertical centering differences between browsers

Quick summary of bug

Modal is not vertically centered the same way on all browsers.

Add design for Breadcrumb

Component

Add design for Breadcrumb component (fil d'ariane).

Design

Code

import React from 'react';
import PropTypes from 'prop-types';

const Breadcrumb = ({ list, current, onClick }) => {
    const handleClick = (index) => {
        if (onClick) {
            onClick(index);
        }
    };

    return (
        <div className="breadcrumb-container">
            {list.map((item, index) => {
                return <button
                    disabled={index === current}
                    onClick={handleClick(index)}
                    key={index.toString()}
                    className={`breadcrumb-item ${current === index ? 'breadcrumb-item--active' : ''}`}>{item}</button>;
            })}
        </div>
    );
};

Breadcrumb.propTypes = {
    onClick: PropTypes.func,
    list: PropTypes.array.isRequired,
    current: PropTypes.number.isRequired
};

Breadcrumb.defaultProps = {
    current: 0
};

export default Breadcrumb;

Note

The active step is disabled.
Other steps need to react on hover.
The component can be edited if needed for HTML / CSS reasons.

"Block standard" padding not the same as on design system

Quick summary of bug

padding-top/bottom is not the same as specified on the design system.

Harmonize outline styles on input

Feature description

Maybe more Github style.

Use cases

Inputs, selects, etc.

Benefits (optional)

It is important.

Italic styles

Feature description

A class for italic text.

Document `.unstyled` class

Quick summary of bug

BECAUSE DOCUMENTATION.

Password input

The password input has a button to toggle the type between text and password.

Top navigation design

Feature description

Create SVG sprite dedicated to CSS use

Feature description

Example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
    <style>
        use         { display: none; }
        use:target  { display: block; }

        .white { fill: #fff; }
        .black  { fill: #000; }
    </style>
    <symbol id="symbol-blahblah">
        <path d="M22.6 25L.49 47.3a1.6 1.6 0 0 0 1.1 2.7c.43 0 .83-.17 1.12-.47L25 27.08l22.3 22.45a1.57 1.57 0 0 0 2.22 0 1.6 1.6 0 0 0 0-2.24L27.4 25.01 49.54 2.7a1.6 1.6 0 0 0 0-2.25c-.61-.61-1.6-.62-2.22 0L25 22.93 2.68.47a1.57 1.57 0 0 0-2.23 0 1.6 1.6 0 0 0 0 2.24L22.61 25z"/>
    </symbol>
    ...
    <use id="blahblah" xlink:href="#symbol-blahblah" class="black" />

And called via background: url("../img/sprite.svg#blahblah");

Use cases

input type search, select, special cases that can't use inline sprite.

Benefits

Avoid inlining too much base64 in CSS, CSS should be LIGHTWEIGHT!

Toggle style

Feature description

can you please try a version were you hide the check and x while loading and jsut show the spinner in the middle? (for loading state for toggle)

To test.

State "working" on toggle

Feature description

Because API call can take some time to execute. The user needs to have visual feedback that "something is happening, please be patient" (especially on bad connexions).

To test with aria-busy, other attribute, etc.