Skip to content

ui: Add Statements page storybook#47417

Closed
koorosh wants to merge 1 commit intocockroachdb:masterfrom
koorosh:ui-statements-page--css-modules
Closed

ui: Add Statements page storybook#47417
koorosh wants to merge 1 commit intocockroachdb:masterfrom
koorosh:ui-statements-page--css-modules

Conversation

@koorosh
Copy link
Copy Markdown
Contributor

@koorosh koorosh commented Apr 13, 2020

To test styles isolation for statements page
we need storybook which displays entire
Statements screen only.

To make it work, RouterProvider decorator
is added which connects router to dummy (empty)
store.

statementsPage.fixture.ts file contains snapshot
of required props for StatementsPage component

Release note: None

To test styles isolation for statements page
we need storybook which displays entire
Statements screen only.

To make it work, RouterProvider decorator
is added which connects router to dummy (empty)
store.

`statementsPage.fixture.ts` file contains snapshot
of required props for StatementsPage component

Release note: None
@cockroach-teamcity
Copy link
Copy Markdown
Member

This change is Reviewable

@koorosh koorosh closed this Apr 23, 2020
craig bot pushed a commit that referenced this pull request May 27, 2020
47484: ui: CSS modules for BarCharts components r=koorosh a=koorosh

Depends on: #47417
Depends on: cockroachdb/yarn-vendored#20
Related to: #47527

Current draft is just example for possible styles isolation with CSS modules.
It is required to make components self-contained and easy for extraction.

Before all css files were loaded into
global scope even if file was imported in
some particular module.

Now it is possible to define styles as before
and use old styles without changes, and as a
module, to do this - files has to be named as
someName.module.styl
In webpack config, `style-loader` is defined
two times with different file name matchers
to be able define style loaders with and without
modules.

`barCharts` component is a first candidate to try out css modules.
- all styles related to `barCharts` are copied(!) to `barCharts.module.styl` file,
so in case another component somehow relies on styles defined for barCharts
- it won't be affected.

Storybook is extended with stories related to `barCharts`


Co-authored-by: Andrii Vorobiov <and.vorobiov@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants