RNA buttons: add styles and storybook documentation #21496

keoshi · 2021-10-21T16:26:07Z

Changes proposed in this Pull Request:

Add color variables.
Add overriding styles for the @wordpress/components buttons.
Added a documentation page in Storybook.

Jetpack product discussion

p6TEKc-5rF-p2

Does this pull request change what data or activity we track or use?

No

Testing instructions for Storybook:

Go to the Storybook folder cd projects/js-packages/storybook
Run pnpm install
Run pnpm run storybook:dev
Storybook should open in your browser.
Go to Components → Buttons → Docs and play around with the various buttons.

Screenshot

matticbot · 2021-10-21T16:26:14Z

Caution: This PR has changes that must be merged to WordPress.com
Hello keoshi! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D68843-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

github-actions · 2021-10-21T16:27:20Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ All commits were linted before commit.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

Jetpack plugin:

Next scheduled release: March 1, 2022.
Scheduled code freeze: February 22, 2022.

Backup plugin:

Next scheduled release: March 1, 2022.
Scheduled code freeze: February 21, 2022.

projects/js-packages/base-styles/stories/button.stories.mdx

madebynoam · 2021-10-21T16:49:26Z

Just a little comment above, otherwise LGTM! Great job @keoshi!

sergeymitr · 2021-10-21T16:52:36Z

Wow, this is awesome, thanks for doing this!
I've got to run now, but can't wait to review it when I get back!

fgiannar

Wonderful work, Filipe!

I left a few inline comments :)

Out of curiosity, I see you are using the MDX format, I guess because you wish to add custom docs, right? We could take it one step further maybe by utlizing Templates and Controls that will allow us, eg, to edit a button's label but I think this is totally optional in this case.

projects/js-packages/base-styles/_colors.scss

fgiannar · 2021-10-22T10:35:19Z

projects/js-packages/base-styles/stories/button.stories.mdx

-	<Story name="Plain button">
-		<button type="button" className="components-button is-small">Button</button>
+	<Story name="Primary button">
+		<Button variant="primary" href="#">


I think we could omit href for non-link Buttons.

I was trying to get us using link Buttons only by not documenting non-link ones. This would make it easier to see the Storybook documentation and grab the right code from there.

Is there a scenario where we currently use a real <button> element instead of a link as a button? But bottom line, you're right. Maybe these should not be enforced as link-buttons.

sergeymitr · 2021-11-03T19:54:46Z

projects/js-packages/base-styles/_buttons.scss

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


Thanks for fixing the issues!
One little thing I just noticed.
The button label becomes unreadable on hover, should we make it white?

Suggested change

}

}

&:disabled {

color: var( --jp-color-white );

}

sergeymitr · 2021-11-03T19:57:09Z

projects/js-packages/base-styles/_buttons.scss

+@import './variables';
+@import './colors';
+
+.components-button {


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

sergeymitr · 2021-11-04T14:44:44Z

projects/js-packages/connection/components/connect-screen/layout/style.scss

+				a {
+					color: #000;
+					text-decoration: underline;
+				}
 			}
 		}
+
+		a.jp-connection-screen-icon {
+			text-decoration: none;
+			padding-left: 5px;
+		}


Reintroducing these lines, were lost in transition when we merged #21521.
They are responsible for styling the "See all Jetpack features" button and the "external" icon:

fgiannar · 2021-11-04T14:51:44Z

projects/js-packages/connection/components/connect-screen/layout/style.scss

@@ -86,8 +86,18 @@
 				padding-left: 30px;
 				margin-bottom: 9px;
 				color: var( --jp-black );
+
+				a {


@sergeymitr Do we need to repeat the link styles in li? They are also defined in line 60

It seems like we do. I tried without it, and there was no underline.
Apparently some other style overwrites it.
I didn't dig deep into it though ¯\_(ツ)_/¯

Ok I will look into this more while working on the base styles

fgiannar · 2021-11-05T10:49:00Z

Hi @keoshi ,

While testing this I notices that we don't have buttons styles for active button state.

This results in:

Should we add those as well?

keoshi · 2021-11-08T12:30:34Z

Yeah, we totally should @fgiannar ! I was trying to test those but couldn't get them to work.

fgiannar · 2021-11-08T12:40:30Z

@keoshi I'm thinking to use this PR as the basis for the work needed to properly configure the base styles package.
While working on it I can address the issues we've mentioned so I can take the burden of having to maintain / update the PR yourself.
Just let me know here in a comment the changes you'd wish to add and I'd be happy to incorporate them :)

keoshi · 2021-11-11T16:04:26Z

Sorry @fgiannar — I missed the latest notification on this PR somehow.

The only thing I believe is missing are the active states. Do you need those to be specified beyond what we currently have in Figma?

Thank you, appreciate you taking this through the finish line!!

sergeymitr · 2021-12-01T23:21:21Z

Hi @keoshi.
Just a quick update on the state of things.
We're still designing the Base-Styles package, considering different approaches to make it easy to use and prevent it from disrupting other styles on the page.
Here's the discussion we're having: p9dueE-3Tq-p2

samiff · 2021-12-10T22:55:53Z

@sergeymitr Is the base-styles package still being discussed, or has it reached a more stable status?

kraftbj · 2022-02-08T22:16:19Z

Howdy y'all — what is the status of this one? I'm going to mark it as "needs author reply" to clean up the "Needs Review" board since there are multiple conflicts and needs a master-merge.

renatoagds · 2022-03-23T22:05:03Z

Closing in favor of #23584

keoshi added 3 commits October 21, 2021 17:17

Add base-styles changelog

a1a3aef

Add storybook changelog

f65095f

RNA buttons: add styles and storybook documentation

55771be

keoshi added [Status] Needs Review To request a review from Crew. Label will be renamed soon. [Status] Needs Design Review Design has been added. Needs a review! RNA [JS Package] Storybook labels Oct 21, 2021

keoshi requested review from a team October 21, 2021 16:26

keoshi self-assigned this Oct 21, 2021

matticbot added Touches WP.com Files labels Oct 21, 2021

github-actions bot added the [JS Package] Base Styles label Oct 21, 2021

keoshi requested review from fgiannar, leogermani, sergeymitr and jeherve October 21, 2021 16:27

github-actions bot added the [Status] Design Input Requested label Oct 21, 2021

madebynoam reviewed Oct 21, 2021

View reviewed changes

projects/js-packages/base-styles/stories/button.stories.mdx Show resolved Hide resolved

madebynoam previously approved these changes Oct 21, 2021

View reviewed changes

fgiannar reviewed Oct 22, 2021

View reviewed changes

Add newline at the end of files

95e90b1

keoshi dismissed madebynoam’s stale review via 95e90b1 October 22, 2021 15:47

sergeymitr mentioned this pull request Oct 25, 2021

RNA Connection: Add ConnectScreenRequiredPlan Component #21521

Merged

Merge branch 'master' into update/rna-buttons-styles

8dac1be

keoshi requested a review from fgiannar November 2, 2021 14:55

keoshi added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Nov 2, 2021

keoshi mentioned this pull request Nov 2, 2021

RNA Connection Screen: update styles #21622

Closed

sergeymitr reviewed Nov 3, 2021

View reviewed changes

Merge branch 'master' into update/rna-buttons-styles

31dbd5a

sergeymitr force-pushed the update/rna-buttons-styles branch from 49b3b83 to 31dbd5a Compare November 4, 2021 14:42

sergeymitr reviewed Nov 4, 2021

View reviewed changes

fgiannar reviewed Nov 4, 2021

View reviewed changes

Bump package versions.

df015ff

RNA components: Cleanup individual button styles

7fedc6f

kraftbj added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels Feb 8, 2022

renatoagds closed this Mar 23, 2022

github-actions bot removed [Status] Needs Design Review Design has been added. Needs a review! [Status] Design Input Requested [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Mar 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RNA buttons: add styles and storybook documentation #21496

RNA buttons: add styles and storybook documentation #21496

keoshi commented Oct 21, 2021

matticbot commented Oct 21, 2021

github-actions bot commented Oct 21, 2021 •

edited

Loading

madebynoam commented Oct 21, 2021

sergeymitr commented Oct 21, 2021

fgiannar left a comment

fgiannar Oct 22, 2021

keoshi Oct 22, 2021

sergeymitr Nov 3, 2021 •

edited

Loading

sergeymitr Nov 3, 2021

sergeymitr Nov 4, 2021

fgiannar Nov 4, 2021

sergeymitr Nov 4, 2021

fgiannar Nov 4, 2021

fgiannar commented Nov 5, 2021

keoshi commented Nov 8, 2021

fgiannar commented Nov 8, 2021

keoshi commented Nov 11, 2021

sergeymitr commented Dec 1, 2021

samiff commented Dec 10, 2021

kraftbj commented Feb 8, 2022

renatoagds commented Mar 23, 2022

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

RNA buttons: add styles and storybook documentation #21496

RNA buttons: add styles and storybook documentation #21496

Conversation

keoshi commented Oct 21, 2021

Changes proposed in this Pull Request:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions for Storybook:

Screenshot

matticbot commented Oct 21, 2021

github-actions bot commented Oct 21, 2021 • edited Loading

madebynoam commented Oct 21, 2021

sergeymitr commented Oct 21, 2021

fgiannar left a comment

Choose a reason for hiding this comment

fgiannar Oct 22, 2021

Choose a reason for hiding this comment

keoshi Oct 22, 2021

Choose a reason for hiding this comment

sergeymitr Nov 3, 2021 • edited Loading

Choose a reason for hiding this comment

sergeymitr Nov 3, 2021

Choose a reason for hiding this comment

sergeymitr Nov 4, 2021

Choose a reason for hiding this comment

fgiannar Nov 4, 2021

Choose a reason for hiding this comment

sergeymitr Nov 4, 2021

Choose a reason for hiding this comment

fgiannar Nov 4, 2021

Choose a reason for hiding this comment

fgiannar commented Nov 5, 2021

keoshi commented Nov 8, 2021

fgiannar commented Nov 8, 2021

keoshi commented Nov 11, 2021

sergeymitr commented Dec 1, 2021

samiff commented Dec 10, 2021

kraftbj commented Feb 8, 2022

renatoagds commented Mar 23, 2022

github-actions bot commented Oct 21, 2021 •

edited

Loading

sergeymitr Nov 3, 2021 •

edited

Loading