Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

RNA buttons: add styles and storybook documentation #21496

Closed
wants to merge 15 commits into from
Closed

RNA buttons: add styles and storybook documentation #21496

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
a1a3aef
Add base-styles changelog
keoshi Oct 21, 2021
f65095f
Add storybook changelog
keoshi Oct 21, 2021
55771be
RNA buttons: add styles and storybook documentation
keoshi Oct 21, 2021
95e90b1
Add newline at the end of files
keoshi Oct 22, 2021
8dac1be
Merge branch 'master' into update/rna-buttons-styles
sergeymitr Oct 25, 2021
01b0e49
Reuse the base styles for `ActionButton` component.
sergeymitr Oct 25, 2021
cea6ff0
Connection Screen button styling - tiny fix.
sergeymitr Oct 25, 2021
8493851
Merge branch 'master' into update/rna-buttons-styles
sergeymitr Oct 25, 2021
b0ea51c
Connection Screen button styling - another tiny fix.
sergeymitr Oct 25, 2021
9d2ad4b
Add RGB colors
keoshi Nov 2, 2021
3e1095d
Add disabled styles
keoshi Nov 2, 2021
b2e7017
Add stories for disabled buttons
keoshi Nov 2, 2021
31dbd5a
Merge branch 'master' into update/rna-buttons-styles
sergeymitr Nov 4, 2021
df015ff
Bump package versions.
sergeymitr Nov 4, 2021
7fedc6f
RNA components: Cleanup individual button styles
fgiannar Nov 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

93 changes: 93 additions & 0 deletions projects/js-packages/base-styles/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
@import './variables';
@import './colors';

.components-button {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We discussed it with the team today, and discovered that these styles will also apply to non-RNA buttons, and in some cases could affect even non-Jetpack elements on the page.
We're discussing possible solutions in Slack: p1635967176436400-slack-CBG1CP4EN

border-radius: var( --jp-border-radius );

&:focus:not(:disabled) {
box-shadow: inset 0 0 0 1px var( --jp-color-white ), 0 0 0 var(--wp-admin-border-width-focus) var( --jp-color-black );
}

&:active:not(:disabled) {
color: var( --jp-color-black );
}
}

.components-button.is-primary:not(.is-destructive) {
background: var( --jp-color-black );
sergeymitr marked this conversation as resolved.
Show resolved Hide resolved

&:hover:not(:disabled) {
background: var( --jp-color-gray-80 );
}

&:focus:not(:disabled) {
box-shadow: inset 0 0 0 1px var( --jp-color-white ), 0 0 0 var(--wp-admin-border-width-focus) var( --jp-color-black );
}

&:disabled {
color: rgba( var( --jp-color-white-rgb ), 0.4 );
background: var( --jp-color-black );
}
}

.components-button.is-secondary:not(.is-destructive) {
color: var( --jp-color-black );
box-shadow: inset 0 0 0 1px var( --jp-color-black );

&:hover:not(:disabled) {
color: var( --jp-color-black );
background: var( --jp-color-gray-0 );
box-shadow: inset 0 0 0 1px var( --jp-color-black );
}

&:focus:not(:disabled) {
box-shadow: inset 0 0 0 1px var( --jp-color-white ), 0 0 0 var(--wp-admin-border-width-focus) var( --jp-color-black );
}

&:disabled {
color: rgba( var( --jp-color-black-rgb ), 0.4 );
}
}

.components-button.is-link {
color: var( --jp-color-black );

&:hover {
text-decoration-thickness: 3px;
}
}

.components-button.is-destructive {


&:hover:not(:disabled) {
background: var( --jp-color-gray-80 );
}

&:focus:not(:disabled) {
color: var( --jp-color-white );
box-shadow: inset 0 0 0 1px var( --jp-color-white ), 0 0 0 var(--wp-admin-border-width-focus) var( --jp-color-red-60 );
}

&:disabled {
color: rgba( var( --jp-color-white-rgb ), 0.4 );
}

&.is-secondary {

&:focus:not(:disabled) {
color: var( --jp-color-red-50 );
}
Copy link
Contributor

@sergeymitr sergeymitr Nov 3, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing the issues!
One little thing I just noticed.
The button label becomes unreadable on hover, should we make it white?
Screen Shot 2021-11-03 at 3 44 38 PM

Suggested change
}
}
&:disabled {
color: var( --jp-color-white );
}

}

&.is-link {

&:hover:not(:disabled) {
box-shadow: none;
}

&:focus:not(:disabled) {
color: var( --jp-color-red-50 );
}
}
}
15 changes: 15 additions & 0 deletions projects/js-packages/base-styles/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
:root {
--jp-color-black: #000000;
--jp-color-white: #FFFFFF;

--jp-color-black-rgb: 0, 0, 0;
--jp-color-white-rgb: 255, 255, 255;

--jp-color-gray-0: #F6F7F7;
--jp-color-gray-80: #2C3338;

--jp-color-red-0: #F7EBEC;
--jp-color-red-50: #D63638;
--jp-color-red-60: #B32D2E;
--jp-color-red-80: #8A2424;
}
3 changes: 3 additions & 0 deletions projects/js-packages/base-styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
:root {
--jp-border-radius: 4px;
}
5 changes: 5 additions & 0 deletions projects/js-packages/base-styles/changelog/rna-button-styles
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
Significance: patch
Type: changed
Comment: Added base styles for RNA buttons.


Loading