added createFlatBoxStyles fn for flat component styles

2026-04-26 03:00:18 -04:00 · 2019-05-16 23:09:58 +02:00
parent 7cfb670225
commit 2f1a76d996
6 changed files with 178 additions and 58 deletions
--- a/src/components/TextArea/TextArea.js
+++ b/src/components/TextArea/TextArea.js
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import propTypes from "prop-types";

 import styled from "styled-components";
-import { createDisabledTextStyles } from "../common";
+import { createDisabledTextStyles, createFlatBoxStyles } from "../common";
 import { blockSizes, fontSizes, padding, fontFamily } from "../common/system";
 import Cutout from "../Cutout/Cutout";

@@ -13,6 +13,11 @@ const StyledTextAreaWrapper = styled(Cutout)`
  background: ${({ theme, isDisabled }) =>
    isDisabled ? theme.material : theme.canvas};
 `;
+const StyledFlatTextAreaWrapper = styled.div`
+  position: relative;
+  min-height: ${blockSizes.md};
+  ${createFlatBoxStyles()}
+`;
 const StyledTextArea = styled.textarea`
  width: 100%;
  height: 100%;
@@ -24,50 +29,56 @@ const StyledTextArea = styled.textarea`
  resize: none;
  font-size: ${fontSizes.md};
  font-family: ${fontFamily};
-  color: ${({ theme, disabled }) =>
-    disabled ? theme.inputTextDisabled : theme.inputText};
-  ${props => props.disabled && createDisabledTextStyles()}
+
+  ${({ disabled, flat }) => !flat && disabled && createDisabledTextStyles()}
 `;

 const TextArea = ({
  onChange,
  disabled,
+  flat,
  width,
  height,
  style,
  className,
  shadow,
  ...otherProps
-}) => (
-  <StyledTextAreaWrapper
-    style={{
-      ...style,
-      width: width ? width : "100%",
-      height: height ? height : "auto"
-    }}
-    className={className}
-    isDisabled={disabled}
-    shadow={shadow}
-  >
-    <StyledTextArea
-      width={width}
-      height={height}
-      readOnly={disabled}
-      onChange={disabled ? undefined : onChange}
-      disabled={disabled}
-      {...otherProps}
-    />
-  </StyledTextAreaWrapper>
-);
+}) => {
+  const Wrapper = flat ? StyledFlatTextAreaWrapper : StyledTextAreaWrapper;
+  return (
+    <Wrapper
+      style={{
+        ...style,
+        width: width ? width : "100%",
+        height: height ? height : "auto"
+      }}
+      className={className}
+      isDisabled={disabled}
+      shadow={shadow}
+    >
+      <StyledTextArea
+        width={width}
+        height={height}
+        readOnly={disabled}
+        onChange={disabled ? undefined : onChange}
+        disabled={disabled}
+        flat={flat}
+        {...otherProps}
+      />
+    </Wrapper>
+  );
+};

 TextArea.defaultProps = {
-  shadow: true
+  shadow: true,
+  flat: false
 };
 TextArea.propTypes = {
  width: propTypes.oneOfType([propTypes.string, propTypes.number]),
  height: propTypes.oneOfType([propTypes.string, propTypes.number]),
  onChange: propTypes.func,
  disabled: propTypes.bool,
+  flat: propTypes.bool,
  className: propTypes.string,
  shadow: propTypes.bool
 };
--- a/src/components/TextArea/TextArea.stories.js
+++ b/src/components/TextArea/TextArea.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";

 import TextArea from "./TextArea";
-import { Button } from "../";
+import { Button, Cutout } from "../";

 const onChange = e => console.log(e.target.value);

@@ -40,6 +40,41 @@ storiesOf("TextArea", module)
  ))
  .add("no shadow", () => (
    <TextArea shadow={false} placeholder="Type in here.." onChange={onChange} />
+  ))
+  .add("flat", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add text area on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <TextArea
+          flat
+          width={"100%"}
+          height={200}
+          placeholder="Type in here.."
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
+  ))
+  .add("flat disabled", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add text area on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <TextArea
+          flat
+          disabled
+          width={"100%"}
+          height={200}
+          placeholder="Type in here.."
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
  ));
 class ControlledTextAreaExample extends React.Component {
  state = {
--- a/src/components/TextField/TextField.js
+++ b/src/components/TextField/TextField.js
@@ -1,16 +1,21 @@
 import React from "react";
 import propTypes from "prop-types";

-import styled from "styled-components";
-import Cutout from "../Cutout/Cutout";
+import styled, { css } from "styled-components";
+import { createDisabledTextStyles, createFlatBoxStyles } from "../common";
 import { blockSizes, fontSizes, padding, fontFamily } from "../common/system";
+import Cutout from "../Cutout/Cutout";

 const StyledWrapper = styled(Cutout)`
  height: ${blockSizes.md};
  background: ${({ theme, isDisabled }) =>
    isDisabled ? theme.material : theme.canvas};
 `;
-
+const StyledFlatWrapper = styled.div`
+  position: relative;
+  height: ${blockSizes.md};
+  ${createFlatBoxStyles()}
+`;
 export const StyledTextInput = styled.input`
  box-sizing: border-box;
  width: 100%;
@@ -21,46 +26,50 @@ export const StyledTextInput = styled.input`
  background: none;
  font-size: ${fontSizes.md};
  font-family: ${fontFamily};
-  color: ${({ theme, disabled }) =>
-    disabled ? theme.inputTextDisabled : theme.inputText};
-  text-shadow: ${({ theme, disabled }) =>
-    disabled ? "1px 1px " + theme.inputTextDisabledShadow : "none"};
+  ${({ disabled, flat }) => !flat && disabled && createDisabledTextStyles()}
 `;
 const TextField = ({
  onChange,
  disabled,
+  flat,
  type,
  style,
  shadow,
  className,
  width,
  ...otherProps
-}) => (
-  <StyledWrapper
-    width={width}
-    shadow={shadow}
-    isDisabled={disabled}
-    style={{ ...style, width: width ? width : "auto" }}
-    className={className}
-  >
-    <StyledTextInput
-      onChange={disabled ? undefined : onChange}
-      readOnly={disabled}
-      disabled={disabled}
-      type={type}
-      {...otherProps}
-    />
-  </StyledWrapper>
-);
+}) => {
+  const Wrapper = flat ? StyledFlatWrapper : StyledWrapper;
+  return (
+    <Wrapper
+      width={width}
+      shadow={shadow}
+      isDisabled={disabled}
+      style={{ ...style, width: width ? width : "auto" }}
+      className={className}
+    >
+      <StyledTextInput
+        onChange={disabled ? undefined : onChange}
+        readOnly={disabled}
+        disabled={disabled}
+        flat={flat}
+        type={type}
+        {...otherProps}
+      />
+    </Wrapper>
+  );
+};
 TextField.defaultProps = {
  disabled: false,
+  type: "text",
  shadow: true,
-  type: "text"
+  flat: false
 };
 TextField.propTypes = {
  width: propTypes.oneOfType([propTypes.string, propTypes.number]),
  onChange: propTypes.func,
  disabled: propTypes.bool,
+  flat: propTypes.bool,
  shadow: propTypes.bool,
  type: propTypes.string,
  className: propTypes.string
--- a/src/components/TextField/TextField.stories.js
+++ b/src/components/TextField/TextField.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";

 import TextField from "./TextField";

-import { Button, Toolbar } from "../";
+import { Button, Toolbar, Cutout } from "../";

 const onChange = e => console.log(e.target.value);

@@ -28,6 +28,45 @@ storiesOf("TextField", module)
  ))
  .add("custom width", () => (
    <TextField defaultValue="Custom width" width={150} onChange={onChange} />
+  ))
+  .add("flat", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add input field on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <label style={{ paddingRight: "0.5rem", fontSize: "1rem" }}>
+          Name:
+        </label>
+        <TextField
+          flat
+          placeholder="type here..."
+          width={150}
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
+  ))
+  .add("flat disabled", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add input field on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <label style={{ paddingRight: "0.5rem", fontSize: "1rem" }}>
+          Name:
+        </label>
+        <TextField
+          flat
+          disabled
+          defaultValue="Can't type 😥"
+          width={150}
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
  ));

 class ControlledTextFieldExample extends React.Component {
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -15,6 +15,17 @@ export const createBoxStyles = () =>
    background-color: ${({ theme }) => theme.material};
    color: ${({ theme }) => theme.text};
  `;
+export const createFlatBoxStyles = () =>
+  css`
+    box-sizing: border-box;
+    display: inline-block;
+    color: ${({ theme }) => theme.text};
+    background: ${({ theme, isDisabled }) =>
+      isDisabled ? theme.flatLight : theme.canvas};
+    border: 2px solid ${({ theme }) => theme.canvas};
+    outline: 2px solid ${({ theme }) => theme.flatDark};
+    outline-offset: -4px;
+  `;
 export const createBorderStyles = (invert = false) =>
  invert
    ? css`
--- a/src/components/common/themes.js
+++ b/src/components/common/themes.js
@@ -31,7 +31,10 @@ themes.default = {

  hoverBackground: "#000080",
  checkmark: "#050608",
-  progress: "#000080"
+  progress: "#000080",
+
+  flatLight: "#d8d8d8",
+  flatDark: "#9e9e9e"
 };

 themes.water = {
@@ -65,7 +68,10 @@ themes.water = {

  hoverBackground: "#72b3b4",
  checkmark: "#050608",
-  progress: "#72b3b4"
+  progress: "#72b3b4",
+
+  flatLight: "#d8d8d8",
+  flatDark: "#9e9e9e"
 };

 themes.coldGray = {
@@ -103,7 +109,10 @@ themes.coldGray = {

  hoverBackground: "#8d88c2",
  checkmark: "#010601",
-  progress: "#8d88c2"
+  progress: "#8d88c2",
+
+  flatLight: "#a4a7c8",
+  flatDark: "#5b57a1"
 };

 themes.lilacRoseDark = {
@@ -139,7 +148,10 @@ themes.lilacRoseDark = {

  hoverBackground: "#713259",
  checkmark: "#010601",
-  progress: "#713259"
+  progress: "#713259",
+
+  flatLight: "#E597C9",
+  flatDark: "#7F3163"
 };

 themes.violetDark = {
@@ -171,6 +183,9 @@ themes.violetDark = {

  hoverBackground: "#512155",
  checkmark: "#000000",
-  progress: "#000080"
+  progress: "#000080",
+
+  flatLight: "#945b9b",
+  flatDark: "#3c1f3e"
 };
 export default themes;