Spike: Button with css #3065
Spike: Button with css #3065
Conversation
This comment was marked as off-topic.
This comment was marked as off-topic.
size-limit report 📦
|
siddharthkp
temporarily deployed
to
github-pages
GitHub Actions
Inactive
siddharthkp
temporarily deployed
to
github-pages
GitHub Actions
Inactive
siddharthkp
temporarily deployed
to
github-pages
GitHub Actions
Inactive
| @@ -9,6 +9,10 @@ module.exports = { | |||
| '@storybook/addon-interactions', | |||
| '@storybook/addon-a11y', | |||
| '@storybook/addon-links', | |||
| { | |||
There was a problem hiding this comment.
css modules setup for storybook
| @@ -2,6 +2,9 @@ import {addons} from '@storybook/addons' | |||
| import {withThemeProvider, withSurroundingElements, toolbarTypes} from '../src/utils/story-helpers' | |||
| import {PrimerBreakpoints} from '../src/utils/layout' | |||
|
|
|||
| import '@primer/css/dist/primitives.css' | |||
| import '@primer/css/dist/color-modes.css' | |||
There was a problem hiding this comment.
note: dependency on css variables from primitives!
generated/components.json
Outdated
| @@ -1580,16 +1580,6 @@ | |||
| "type": "| 'small'\n| 'medium'\n| 'large'", | |||
| "defaultValue": "'medium'" | |||
| }, | |||
| { | |||
There was a problem hiding this comment.
unintentional change!
| @@ -1,2 +1,5 @@ | |||
| // eslint-disable-next-line no-var | |||
| declare var __DEV__: boolean | |||
|
|
|||
| // supress type warnings for css files | |||
| declare module '*.module.css' | |||
There was a problem hiding this comment.
typescript not happy with css imports, there probably is a better way to do this, but this works for now
| lineHeight={lineHeight} | ||
| data-color-mode={primerColorModeToPrimitiveColorMode[colorMode || defaultColorMode]} | ||
| data-light-theme={dayScheme} | ||
| data-dark-theme={nightScheme} |
There was a problem hiding this comment.
note: theming support for primitives
siddharthkp
temporarily deployed
to
github-pages
GitHub Actions
Inactive
| @@ -0,0 +1,203 @@ | |||
| .button { | |||
There was a problem hiding this comment.
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.
|
This PR is busted 😢, going to close it and start over from @langermank, saw your comment, will copy it on the new PR! |
Going to test this with dotcom
Bundled css as into one file, needs to be imported explicitly