From b19629cfa21cfc2883726372e4827240f015fe04 Mon Sep 17 00:00:00 2001 From: Huyghe Pierre Date: Tue, 11 Feb 2020 22:44:23 +0100 Subject: [PATCH 1/4] feat(customize): add getVariantType and mergeStyles --- src/Button/Button.re | 29 ++++++++++++++++++++++++----- src/Button/ButtonStyles.re | 19 +++++++++++++------ src/Theme/Theme.re | 2 +- src/Utils/Customize.re | 37 +++++++++++++++++++++++++++++++++++++ stories/ButtonShowcase.re | 9 ++++++++- 5 files changed, 83 insertions(+), 13 deletions(-) create mode 100644 src/Utils/Customize.re diff --git a/src/Button/Button.re b/src/Button/Button.re index 8ff1e15..f839006 100644 --- a/src/Button/Button.re +++ b/src/Button/Button.re @@ -1,14 +1,33 @@ module Css = ButtonStyles; +let buttonVariants: Customize.cssVariantTypes = { + primary: Css.primary, + secondary: Css.primary, + default: Css.default, + disabled: Css.primary, +}; + [@react.component] -let make = (~primary=false, ~children) => { +let make = + ( + ~variant=Customize.Default, + ~onClick=_ => ignore(), + ~className="", + ~children, + ) => { let theme = ThemeContext.useTheme(); + let currentVariantStyle = + Customize.getVariantType(~variant, ~cssVariants=buttonVariants, ~theme); + ; }; \ No newline at end of file diff --git a/src/Button/ButtonStyles.re b/src/Button/ButtonStyles.re index 5b9464c..fcef781 100644 --- a/src/Button/ButtonStyles.re +++ b/src/Button/ButtonStyles.re @@ -2,21 +2,28 @@ open Emotion; let default = (~theme: ThemeTypes.theme) => [%css [ - color(`hex(theme.text.default)), + color(`hex(theme.colors.common.black)), margin(`rem(0.5)), + padding2(`rem(0.5), `rem(1.5)), borderRadius(`rem(2.)), fontSize(`rem(1.)), - borderColor(`hex(theme.action.default)), - borderStyle(`solid), + borderStyle(`none), cursor(`pointer), - backgroundColor(`hex(theme.background.default)), + backgroundColor(`hex(theme.action.default)), fontWeight(600), + /* focus */ + focus([outline(`rem(0.), `solid, `hex(theme.colors.primary.main))]), + /* hover */ + hover([backgroundColor(`hex(Colors.grey.light))]), ] ]; let primary = (~theme: ThemeTypes.theme) => [%css [ - color(`hex(theme.text.primary)), - backgroundColor(`hex(theme.action.primary)), + color(`hex(theme.colors.primary.contrastText)), + borderStyle(`none), + backgroundColor(`hex(theme.colors.primary.main)), + /* hover */ + hover([backgroundColor(`hex(theme.colors.primary.light))]), ] ]; \ No newline at end of file diff --git a/src/Theme/Theme.re b/src/Theme/Theme.re index 3dea1cc..b1a50cf 100644 --- a/src/Theme/Theme.re +++ b/src/Theme/Theme.re @@ -20,7 +20,7 @@ let light: ThemeTypes.theme = { action: { primary: "000088", secondary: "ffff88", - default: Colors.common.white, + default: Colors.grey.main, disabled: "575757", }, text: { diff --git a/src/Utils/Customize.re b/src/Utils/Customize.re new file mode 100644 index 0000000..f0fc316 --- /dev/null +++ b/src/Utils/Customize.re @@ -0,0 +1,37 @@ +open Emotion; + +let mergeStyles = (~customClassName="", ~originalClassName) => + Cx.merge([|originalClassName, customClassName|]); + +type variantTypes = + | Primary + | Secondary + | Default + | Disabled; + +type cssVariantTypes = { + primary: (~theme: ThemeTypes.theme) => string, + secondary: (~theme: ThemeTypes.theme) => string, + default: (~theme: ThemeTypes.theme) => string, + disabled: (~theme: ThemeTypes.theme) => string, +}; + +let getVariantType = (~variant, ~cssVariants, ~theme) => + switch (variant) { + | Primary => + mergeStyles( + ~customClassName=cssVariants.primary(~theme), + ~originalClassName=cssVariants.default(~theme), + ) + | Secondary => + mergeStyles( + ~customClassName=cssVariants.secondary(~theme), + ~originalClassName=cssVariants.default(~theme), + ) + | Default => cssVariants.default(~theme) + | Disabled => + mergeStyles( + ~customClassName=cssVariants.disabled(~theme), + ~originalClassName=cssVariants.default(~theme), + ) + }; \ No newline at end of file diff --git a/stories/ButtonShowcase.re b/stories/ButtonShowcase.re index ba6d88f..3a4212c 100644 --- a/stories/ButtonShowcase.re +++ b/stories/ButtonShowcase.re @@ -1,4 +1,11 @@ let default = {"title": "Button", "excludeStories": [|"$$default"|]}; +let normal = () => + + + ; + let primary = () => - ; \ No newline at end of file + + + ; \ No newline at end of file From 338d07c4eeb12b5714f26c2e7ac4b5dc33b0055b Mon Sep 17 00:00:00 2001 From: Huyghe Pierre Date: Tue, 11 Feb 2020 23:26:14 +0100 Subject: [PATCH 2/4] clean and rename --- src/Button/Button.re | 10 +++++----- src/Button/ButtonStyles.re | 21 ++++++++++++++++++++ src/{Colors => Utils}/Colors.re | 0 src/Utils/Customize.re | 35 +-------------------------------- src/Utils/Variants.re | 32 ++++++++++++++++++++++++++++++ stories/ButtonShowcase.re | 14 ++++++++++--- 6 files changed, 70 insertions(+), 42 deletions(-) rename src/{Colors => Utils}/Colors.re (100%) create mode 100644 src/Utils/Variants.re diff --git a/src/Button/Button.re b/src/Button/Button.re index f839006..0e63b20 100644 --- a/src/Button/Button.re +++ b/src/Button/Button.re @@ -1,16 +1,16 @@ module Css = ButtonStyles; -let buttonVariants: Customize.cssVariantTypes = { +let buttonVariants: Variants.cssBasicTypes = { primary: Css.primary, - secondary: Css.primary, + secondary: Css.secondary, default: Css.default, - disabled: Css.primary, + disabled: Css.disabled, }; [@react.component] let make = ( - ~variant=Customize.Default, + ~variant=Variants.Default, ~onClick=_ => ignore(), ~className="", ~children, @@ -18,7 +18,7 @@ let make = let theme = ThemeContext.useTheme(); let currentVariantStyle = - Customize.getVariantType(~variant, ~cssVariants=buttonVariants, ~theme); + Variants.getBasicType(~variant, ~cssVariants=buttonVariants, ~theme); ; + +let primary = () => - + ; -let primary = () => +let secondary = () => + + + ; + +let disabled = () => - + ; \ No newline at end of file From 21c5b966e8b66b229ccb953ddb657c66c59815c8 Mon Sep 17 00:00:00 2001 From: Huyghe Pierre Date: Wed, 12 Feb 2020 09:07:41 +0100 Subject: [PATCH 3/4] rename variant and use hook --- src/Button/Button.re | 8 +++----- src/Utils/Variants.re | 12 +++++++++--- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/Button/Button.re b/src/Button/Button.re index 0e63b20..2c9f924 100644 --- a/src/Button/Button.re +++ b/src/Button/Button.re @@ -15,17 +15,15 @@ let make = ~className="", ~children, ) => { - let theme = ThemeContext.useTheme(); - - let currentVariantStyle = - Variants.getBasicType(~variant, ~cssVariants=buttonVariants, ~theme); + let currentVariant = + Variants.useBasicVariant(~variant, ~cssVariants=buttonVariants);