This repository has been archived by the owner on Jan 15, 2021. It is now read-only.
[V2] Button sizes #1633
Merged
[V2] Button sizes #1633
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
anxolin
approved these changes
Nov 19, 2020
Velenir
reviewed
Nov 20, 2020
| // Wrap ColouredAndSizedButtonsBase in it's own ThemeProvider which takes the toplevel app theme | ||
| // ThemeProvider and interpolate over it's props | ||
| const ThemedButtonBase: React.FC<React.ButtonHTMLAttributes<Element>> = (props) => ( | ||
| <ThemeProvider theme={({ mode }: ThemeMode): ThemeMap => ({ mode, component: 'buttons' })}> |
There was a problem hiding this comment.
I'm not entirely sure how styled-theming works, but can't we, instead of an extra Provider, do variants('mode', 'size', like here
There was a problem hiding this comment.
yes but the theme structure then falls on sth like:
{
big: {
light: { ... }
}
}where light and big have no connection
W3stside
force-pushed
the
v2/button-size-prop
branch
from
e708808
to
ad08412
Compare
Velenir
approved these changes
Nov 20, 2020
1. kind > $type 2. size > $size
W3stside
added a commit
that referenced
this pull request
Jan 5, 2021
* added styled-theming lib * styling sheets 1. colours 2. styles 3. commented out stuff in theme * simplify ButtonBase code + add stories * adjust darkMode decorator for new theme 1, add colour to colourSheet * StyledButton base * addressed PR comments: 1. added type to Story 2. Changed DarkThemeTOggler to ThemeToggler 3. simplified ButtonVariant enum * fix button type, add disabled button, string enum 1. use string enum as button type 2. default to dark mode on start * [V2] Colour Sheet from Invision wireframes + added to Button + stories (#1632) * cleanup button story * new colour sheet * fix type, remove class styles, use const style * use new colours in StyledButton * misc. 1. add borderRadius to const 2. use theme bg for darkMode switch * [V2] Button sizes (#1633) * wrap our base styled button in own theme provider and add size opt * add proper types for button size * Stories: add B I G and smol button stories * misc. 1. make theme toggle button smol 2. add buttonFontSize to styles sheet * enum > type for ButtonVariations * incorrect darkMode button logo * better prop names (#1637) 1. kind > $type 2. size > $size * [V2 button] Rearrange component file structure and small prop fixes (#1640) * saving * $transient name props not allowed - use _propName * change props again * _type > variation * _size > size * variation > variant prop name
W3stside
added a commit
that referenced
this pull request
Jan 7, 2021
* creating theme pt 1 * theme * DarkModeThemeToggler decorator * Button common component * Button story * cleaned up Theme types * simplify ButtonBase prop logic * unmemo fn * fix story bprops * V2/button theming (#1626) * added styled-theming lib * styling sheets 1. colours 2. styles 3. commented out stuff in theme * simplify ButtonBase code + add stories * adjust darkMode decorator for new theme 1, add colour to colourSheet * StyledButton base * addressed PR comments: 1. added type to Story 2. Changed DarkThemeTOggler to ThemeToggler 3. simplified ButtonVariant enum * fix button type, add disabled button, string enum 1. use string enum as button type 2. default to dark mode on start * [V2] Colour Sheet from Invision wireframes + added to Button + stories (#1632) * cleanup button story * new colour sheet * fix type, remove class styles, use const style * use new colours in StyledButton * misc. 1. add borderRadius to const 2. use theme bg for darkMode switch * [V2] Button sizes (#1633) * wrap our base styled button in own theme provider and add size opt * add proper types for button size * Stories: add B I G and smol button stories * misc. 1. make theme toggle button smol 2. add buttonFontSize to styles sheet * enum > type for ButtonVariations * incorrect darkMode button logo * better prop names (#1637) 1. kind > $type 2. size > $size * [V2 button] Rearrange component file structure and small prop fixes (#1640) * saving * $transient name props not allowed - use _propName * change props again * _type > variation * _size > size * variation > variant prop name
W3stside
added a commit
that referenced
this pull request
Jan 7, 2021
* creating theme pt 1 * theme * DarkModeThemeToggler decorator * Button common component * Button story * cleaned up Theme types * simplify ButtonBase prop logic * unmemo fn * fix story bprops * V2/button theming (#1626) * added styled-theming lib * styling sheets 1. colours 2. styles 3. commented out stuff in theme * simplify ButtonBase code + add stories * adjust darkMode decorator for new theme 1, add colour to colourSheet * StyledButton base * addressed PR comments: 1. added type to Story 2. Changed DarkThemeTOggler to ThemeToggler 3. simplified ButtonVariant enum * fix button type, add disabled button, string enum 1. use string enum as button type 2. default to dark mode on start * [V2] Colour Sheet from Invision wireframes + added to Button + stories (#1632) * cleanup button story * new colour sheet * fix type, remove class styles, use const style * use new colours in StyledButton * misc. 1. add borderRadius to const 2. use theme bg for darkMode switch * [V2] Button sizes (#1633) * wrap our base styled button in own theme provider and add size opt * add proper types for button size * Stories: add B I G and smol button stories * misc. 1. make theme toggle button smol 2. add buttonFontSize to styles sheet * enum > type for ButtonVariations * incorrect darkMode button logo * better prop names (#1637) 1. kind > $type 2. size > $size * [V2 button] Rearrange component file structure and small prop fixes (#1640) * saving * $transient name props not allowed - use _propName * change props again * _type > variation * _size > size * variation > variant prop name * add polished, css interpolation pkg
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
馃挧 into #1632
Adds theme capabilities for creating sized versions of buttons and creates a
ThemeProviderwrapped Button default exportSee stories BIG and SMOL to test