Skip to content

Spike: Button with css - #3065

Closed
siddharthkp wants to merge 36 commits into
mainfrom
spike-publish-css
Closed

Spike: Button with css#3065
siddharthkp wants to merge 36 commits into
mainfrom
spike-publish-css

Conversation

@siddharthkp

@siddharthkpsiddharthkp commented Mar 22, 2023

Copy link
Copy Markdown
Member

Going to test this with dotcom

Bundled css as into one file, needs to be imported explicitly

import{Button}from'@primer/react/lib-esm/drafts/Button2'import'@primer/react/lib-esm/components.css'

@changeset-bot

This comment was marked as off-topic.

@siddharthkpsiddharthkp self-assigned this Mar 22, 2023
@siddharthkpsiddharthkp added the skip changeset This change does not need a changelog label Mar 22, 2023
@github-actions
github-actionsBot temporarily deployed to storybook-preview-3065 March 22, 2023 20:22 Inactive
@primer
primerBot temporarily deployed to github-pages March 22, 2023 20:23 Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-3065 March 22, 2023 20:23 Inactive
@github-actions

github-actionsBot commented Mar 22, 2023

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
dist/browser.esm.js121.24 KB (+0.07% 🔺)
dist/browser.umd.js121.54 KB (+0.07% 🔺)

@siddharthkp
siddharthkp temporarily deployed to github-pages March 22, 2023 22:40 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-3065 March 22, 2023 22:41 Inactive
@siddharthkp
siddharthkp temporarily deployed to github-pages March 23, 2023 00:04 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-3065 March 23, 2023 00:04 Inactive
@siddharthkp
siddharthkp temporarily deployed to github-pages March 23, 2023 00:13 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-3065 March 23, 2023 00:13 Inactive
Comment thread.storybook/main.js
'@storybook/addon-interactions',
'@storybook/addon-a11y',
'@storybook/addon-links',
{

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

css modules setup for storybook

Comment thread.storybook/preview.js
import {PrimerBreakpoints} from '../src/utils/layout'

import '@primer/css/dist/primitives.css'
import '@primer/css/dist/color-modes.css'

@siddharthkpsiddharthkpApr 12, 2023

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

note: dependency on css variables from primitives!

"type": "| 'small'\n| 'medium'\n| 'large'",
"defaultValue": "'medium'"
},
{

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

unintentional change!

Comment threadpatches/rollup-plugin-lib-style+1.2.10.patch Outdated
@siddharthkpsiddharthkp mentioned this pull request Apr 12, 2023
Comment threadsrc/Button2/Button.tsx Outdated
Comment threadsrc/global.d.ts
declare var __DEV__: boolean

// supress type warnings for css files
declare module '*.module.css'

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

typescript not happy with css imports, there probably is a better way to do this, but this works for now

@siddharthkpsiddharthkp added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 25, 2023
Comment threadsrc/BaseStyles.tsx
lineHeight={lineHeight}
data-color-mode={primerColorModeToPrimitiveColorMode[colorMode || defaultColorMode]}
data-light-theme={dayScheme}
data-dark-theme={nightScheme}

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

note: theming support for primitives

@siddharthkp
siddharthkp temporarily deployed to github-pages April 25, 2023 14:52 — with GitHub Actions Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-3065 April 25, 2023 14:52 Inactive
@siddharthkpsiddharthkp added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Apr 25, 2023
@github-actions
github-actionsBot temporarily deployed to storybook-preview-3065 April 25, 2023 15:02 Inactive
@github-actionsgithub-actionsBot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 25, 2023
@github-actions
github-actionsBot temporarily deployed to storybook-preview-3065 April 25, 2023 15:04 Inactive
@primer
primerBot temporarily deployed to github-pages April 25, 2023 15:09 Inactive
@github-actions
github-actionsBot temporarily deployed to storybook-preview-3065 April 25, 2023 15:09 Inactive
@@ -0,0 +1,203 @@
.button {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is there any particular reason to rewrite this CSS instead of using what we already have from PVC? https://github.com/primer/view_components/blob/main/app/components/primer/beta/button.pcss

I think its harder to read this file with the custom CSS vars and overrides. I also think we should continue to use BEM for this test, and then if we move forward with CSS Modules write an ADR about how we want to name classes.

@siddharthkp

siddharthkp commented Apr 26, 2023

Copy link
Copy Markdown
MemberAuthor

This PR is busted 😢, going to close it and start over from main

@langermank, saw your comment, will copy it on the new PR!

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip changesetThis change does not need a changelog

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@siddharthkp@langermank