stellar / stellar-design-system

Components for Stellar’s design system

Stellar Design System

Components for Stellar Development Foundation’s design system.

Usage

Install as a dependency:

yarn add @stellar/design-system

Add the main CSS file to your project (for example, the main index file of your React project).

import "@stellar/design-system/build/styles.min.css";

Import Stellar Design System components

import { Button, Input } from "@stellar/design-system";

Available components can be found here.

Development

This repo has two parts to it:

• Stellar Design System repo - everything for the design system,
• Stellar Design System website repo - website for the design system.

This project is tested with BrowserStack.

Scripts

build:sds build Stellar Design System (sds) project only

build:sds-web build Stellar Design System Website (sds-web) project only

build build both projects

start:sds start sds project for local development

start:sds-web start sds-web project for local development

clean delete node_modules and build directories in the whole repo

Note You need to run each start command in its own window or tab.

stellar-design-system's Issues

Input hover and focus states colliding

When you hover and focus on an input, the two states overlap. This is likely because the hove state is on div class="Input_wrapper" but the focus state is on the input inside

Related JIRA issue: https://stellarorg.atlassian.net/browse/WAL-89

Update website UI per designs

Designs: https://www.figma.com/file/76H3em3Auk43P4SHhH54az/Stellar-Web-Products-Style-Guide?node-id=747%3A0

• Dark mode theme (#36)
• Landing page layout (#37)
• Details page layout (#40)
• Add details page navigation (#40)

Component detail pages

Have a details page for every component with API and examples.

Add error field to Checkbox

Add error field to Checkbox with similar styling to Input error

Add increased flexibility to block components

What problem does your feature solve?

The stellar-anchor-tests UI has create several custom components that closely mimic the InfoBlock component, with the following variations:

• no icon / custom icon
• custom border, text, & background coloring

What would you like to see?

This flexibility supported natively in the InfoBlock SDS component.

What alternatives are there?

Keeping the custom components.

PR sources:

• ResultBlock
• SepBlock
• TestBlock

Bug: DetailsTooltip icon overlaps tooltip bubble

The bug is in DetailsTooltip component in Stellar Design System. A potential fix could be increasing opened tooltips z-index by 1.

Issue on https://demo-wallet.stellar.org/

Standardize component API and structure

Most common components have standardized API and structure

Update dependencies

Update all project dependencies.

yarn upgrade-interactive --latest

Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.

Make <TextLink /> and <CopyText /> have same hover state

TextLink and CopyText have different hover states. Should they be the same?

TextLink uses --pal-text-link-hover while CopyText uses --opacity-disabled-button

Add new components

Add new components from AMM Reference UI.

• Avatar
• Card
• Tooltip
• Header
• Table
• Pagination
• Sortable table

Note adding Chart yet because it's used only in one project.

website: IconButton text reads <Info /> instead of <Icon.Info />

Make DetailsTooltip buttons type="button"

If the DetailsTooltip is in a form currently it submits the form on click

Update dependencies

Update all project dependencies.

yarn upgrade-interactive --latest

Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.

Add basic instructions in README

• How to import CSS file.
• How to import components.

Add guidelines for structure

Add guidelines to file and component structure to keep everything as consistent as possible.

[SPIKE] Investigate integrating Figma and SDS

• Can this be done via plugin?
• What's the lift?
• What are the maintenance costs?
• Will designers be comfortable working with this in their day-to-day?

Feature Request: Add ability to remove file from input

What problem does your feature solve?

When I upload a file to an input field, sometimes I would like to remove that file or "clear" it, but I cannot do that unless I click the input field and select "cancel" in the file selection menu.

One of the reasons this is needed is because if I try to re-upload the same filename with new contents, the new content is not loaded. This means users need to clear the file in order to re-upload.

What would you like to see?

An "x" or "clear" button that allows users to remove files from the input field. Ideally we can also pass a function that is executed when a file is cleared as well.

Update dependencies

Update all project dependencies.

yarn upgrade-interactive --latest

Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.

Checkbox: make label optional

There are use cases where the label is not needed.

Launch SDS website

• Website layout is presentable (#26)
• Minimize normalize CSS (#27)
• Update palette colors (#28)

Feature Request: Status Bar Addition

What problem does your feature solve?

Standardizing status bars across our products. This came up based on a discussion around how we have different, not clear distinctions for TestNet vs. MainNet.

Designs:

https://www.figma.com/file/76H3em3Auk43P4SHhH54az/Stellar-Web-Products-Style-Guide?node-id=986%3A865

The designs are very similar to our Info Block component, with changes to padding, text size, and should be full width. There is one for Default, Success, Warning, and Error.

Update dependencies

Update all project dependencies.

yarn upgrade-interactive --latest

Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.

Feature Request: Add 'tag' component

What problem does your feature solve?

The stellar-anchor-tests UI would like to indicate whether or not the home domain specified has a TOML file specifying a testnet or mainnet set of services. The mockup designs have a 'Testnet' or 'Mainnet' tag similar to a Github issue label next to the home domain input field.

What would you like to see?

Add a SDS component that for adding tags/labels to other UI elements.

What alternatives are there?

Creating a custom component.

Toggle: add example how to use in settings

Table: improve responsive layout

Currently, there is no way to specify mobile/desktop breakpoint for the Table component.

Feature: Add a <TextArea />

Add a TextArea with similar styling to Input

Update dependencies

Update all project dependencies.

yarn upgrade-interactive --latest

Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.

Update dependencies

Update all project dependencies.

yarn upgrade-interactive --latest

Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.

Update dependencies

Update all project dependencies.

yarn upgrade-interactive --latest

Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.

Upgrade dependencies

Replace RGBA colors with solid colors

Transparent colors are harder to manage because they change depending on the background. To make sure colors are always easy to read, we'll use only solid colors (no transparency).

Update dependencies

Update all project dependencies.

yarn upgrade-interactive --latest

Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.

Update dependencies

Update all project dependencies.

yarn upgrade-interactive --latest

Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.

Create monorepo structure

It will be better to have the design system and website in the same repo.

• Separate directories (sds and sds-web inside packages/)
• CircleCI is updated and works as expected
• sds has development mode (has only production mode at the moment)
• sds-web has basic setup with create-react-app
• Update readme

Update docs (NavButton, dev notes)

• NavButton component
• Icons

Update dark theme text colors

--pal-text-primary: #FFFFFF
--pal-text-secondary: #D4D5D8
--pal-text-tertiary: #A9ABB2

feature request: custom button

Where text, icon, and onClick can be customized with props. example use case, a download button:

Adding one to SDS will make these custom buttons designs consistent across projects (and also consistent with other buttons in SDS like Copy)

Update dependencies

Update all project dependencies.

yarn upgrade-interactive --latest

Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.

Update documentation

• SDS website landing page text (#23)
• All components have a description and API docs (#24, #25)
• SDS component readme is updated (#25)

Allow ReactNode labels for inputs and selects

Currently, only strings are allowed for labels, which is limiting.

Publish v0.1.0

Publish new v0.1.0-beta.1 (currently at v0.1.0-alpha.3)

Feature Request: Pie Progress Indicator

What problem does your feature solve?

We need a progress indicator for the Anchor Validator to show progress/status of SEP tests run.

What would you like to see?

Indicator logic:
Pie Circle / Number of Tests
Then progressing in clockwise order, showing each slice (representative of each test) as green for successful, or red for unsuccessful. These colors can be pulled from the current color palette for light/dark mode

Link to designs:
https://www.figma.com/file/4BjIB3QZMbI5pd87JJwSLi/Anchor-Validator?node-id=395%3A62

Design updates

Website: sticky side navigation

Update dependencies

Update all project dependencies.

yarn upgrade-interactive --latest

Make sure there are no issues in the code editor, code compiles, and it runs without issues in the browser.

Update SDS icons

Use these: https://feathericons.com

Table: allow ReactNode as table column label

Currently, we allow only strings as table column labels.

Feature Request: Color palette in SDS Website

It'd be useful to be able to see every available color on the SDS website.

For ex: var(--pal-brand-primary) next to a swatch of what that color looks like

Issue it solves: when a dev receives a comment like "Let's make this color stand out more", we could take a look at what's available in our color palette to use

Update packages

Add status message components

These components would replace custom components/styling for every project.

• Error
• Success
• Warning