Merge pull request #24 from platformbuilders/fix/FlatButton

Fix/flat button
platformbuilders · Aug 9, 2021 · af22460 · af22460
2 parents de10459 + 12a691a
commit af22460
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@platformbuilders/react-native-elements",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Platform Builders Shared Components Library For React Native",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap b/src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap
@@ -31,9 +31,8 @@ exports[`<Button /> should render button 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#C6B09E",
-          "borderColor": "black",
+          "borderColor": "#C6B09E",
           "borderRadius": 8,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -55,6 +54,7 @@ exports[`<Button /> should render button 1`] = `
       accessibilityLabel="undefined"
       buttonVariant="primary"
       disabled={false}
+      flat={false}
       style={
         Array [
           Object {
@@ -108,9 +108,8 @@ exports[`<Button /> should render button when rounded 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#C6B09E",
-          "borderColor": "black",
+          "borderColor": "#C6B09E",
           "borderRadius": 35.35714285714286,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -132,6 +131,7 @@ exports[`<Button /> should render button when rounded 1`] = `
       accessibilityLabel="undefined"
       buttonVariant="primary"
       disabled={false}
+      flat={false}
       style={
         Array [
           Object {
@@ -185,9 +185,8 @@ exports[`<Button /> should render button with children 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#C6B09E",
-          "borderColor": "black",
+          "borderColor": "#C6B09E",
           "borderRadius": 8,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -209,6 +208,7 @@ exports[`<Button /> should render button with children 1`] = `
       accessibilityLabel="[object Object]"
       buttonVariant="primary"
       disabled={false}
+      flat={false}
       style={
         Array [
           Object {
@@ -280,9 +280,8 @@ exports[`<Button /> should render button with contrast 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#C6B09E",
-          "borderColor": "black",
+          "borderColor": "#C6B09E",
           "borderRadius": 8,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -304,6 +303,7 @@ exports[`<Button /> should render button with contrast 1`] = `
       accessibilityLabel="undefined"
       buttonVariant="primary"
       disabled={false}
+      flat={false}
       style={
         Array [
           Object {
@@ -357,9 +357,8 @@ exports[`<Button /> should render button with custom accessibility label 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#C6B09E",
-          "borderColor": "black",
+          "borderColor": "#C6B09E",
           "borderRadius": 8,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -381,6 +380,7 @@ exports[`<Button /> should render button with custom accessibility label 1`] = `
       accessibilityLabel="undefined"
       buttonVariant="primary"
       disabled={false}
+      flat={false}
       style={
         Array [
           Object {
@@ -434,9 +434,8 @@ exports[`<Button /> should render button with custom style 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#C6B09E",
-          "borderColor": "black",
+          "borderColor": "#C6B09E",
           "borderRadius": 8,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -460,6 +459,7 @@ exports[`<Button /> should render button with custom style 1`] = `
       accessibilityLabel="undefined"
       buttonVariant="primary"
       disabled={false}
+      flat={false}
       style={
         Array [
           Object {
@@ -513,9 +513,8 @@ exports[`<Button /> should render button with custom text style 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#C6B09E",
-          "borderColor": "black",
+          "borderColor": "#C6B09E",
           "borderRadius": 8,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -537,6 +536,7 @@ exports[`<Button /> should render button with custom text style 1`] = `
       accessibilityLabel="undefined"
       buttonVariant="primary"
       disabled={false}
+      flat={false}
       style={
         Array [
           Object {
@@ -592,9 +592,8 @@ exports[`<Button /> should render button with disabled 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#C6B09E70",
-          "borderColor": "black",
+          "borderColor": "#C6B09E70",
           "borderRadius": 8,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -616,6 +615,7 @@ exports[`<Button /> should render button with disabled 1`] = `
       accessibilityLabel="undefined"
       buttonVariant="primary"
       disabled={true}
+      flat={false}
       style={
         Array [
           Object {
@@ -669,9 +669,8 @@ exports[`<Button /> should render button with loading 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#C6B09E",
-          "borderColor": "black",
+          "borderColor": "#C6B09E",
           "borderRadius": 8,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -765,9 +764,8 @@ exports[`<Button /> should render button with test id 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#C6B09E",
-          "borderColor": "black",
+          "borderColor": "#C6B09E",
           "borderRadius": 8,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -789,6 +787,7 @@ exports[`<Button /> should render button with test id 1`] = `
       accessibilityLabel="undefined"
       buttonVariant="primary"
       disabled={false}
+      flat={false}
       style={
         Array [
           Object {
@@ -842,9 +841,8 @@ exports[`<Button /> should render button with typography variant 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#C6B09E",
-          "borderColor": "black",
+          "borderColor": "#C6B09E",
           "borderRadius": 8,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -866,6 +864,7 @@ exports[`<Button /> should render button with typography variant 1`] = `
       accessibilityLabel="undefined"
       buttonVariant="primary"
       disabled={false}
+      flat={false}
       style={
         Array [
           Object {
@@ -919,9 +918,8 @@ exports[`<Button /> should render button with variant 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "#805281",
-          "borderColor": "black",
+          "borderColor": "#805281",
           "borderRadius": 8,
-          "borderStyle": "solid",
           "borderWidth": 0,
           "flexDirection": "row",
           "height": 70.71428571428572,
@@ -943,6 +941,7 @@ exports[`<Button /> should render button with variant 1`] = `
       accessibilityLabel="undefined"
       buttonVariant="secondary"
       disabled={false}
+      flat={false}
       style={
         Array [
           Object {

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -59,6 +59,7 @@ const Button: FC<ButtonProps> = ({
             <TextButton
               style={textStyle}
               disabled={disabled}
+              flat={flat}
               variant={typographyVariant}
               buttonVariant={variant}
             >

diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
@@ -7,6 +7,7 @@ import LoadingIndicator from '../LoadingIndicator';
 import TouchableComponent from '../Touchable';
 import TypographyComponent from '../Typography';
 
+const borderWidthSmall = getTheme('borderWidth.xxs');
 const brandPrimary = getTheme('brand.primary.main');
 const brandPrimaryContrast = getTheme('brand.primary.contrast');
 const brandSecondary = getTheme('brand.secondary.main');
@@ -70,6 +71,7 @@ type TextButtonProps = {
   buttonVariant: ButtonVariants;
   variant?: TypographyVariants;
   disabled?: boolean;
+  flat?: boolean;
   style: any;
 };
 
@@ -120,13 +122,13 @@ export const ButtonWrapper = styled.View<ButtonWrapperProps>`
     props.rounded ? buttonSize / 2 : buttonRadius(props)}px;
   justify-content: center;
   background-color: ${isFlat('transparent', getBackgroundColor)};
-  border-color: ${getTextColor};
-  border: ${(props) => hasBorder(`1px solid ${getTextColor(props)}`, '0')};
+  border-color: ${getBackgroundColor};
+  border-width: ${hasBorder(borderWidthSmall, '0')};
 `;
 
 export const TextButton = styled(TypographyComponent)<TextButtonProps>`
   letter-spacing: 0.4px;
-  color: ${getTextColor};
+  color: ${isFlat(getBackgroundColor, getTextColor)};
   font-weight: 500;
 `;