design system: make sure that box-sizing: border-box; is applied manually to each component because some codebases wont have resets

components/system/components/Buttons.js

@@ -4,6 +4,7 @@ import * as Constants from "~/common/constants";
 import { css } from "@emotion/react";
 
 const STYLES_BUTTON = `
+  box-sizing: border-box;
   border-radius: 4px;
   outline: 0;
   border: 0;
@@ -19,6 +20,7 @@ const STYLES_BUTTON = `
 `;
 
 const STYLES_BUTTON_FULL = `
+  box-sizing: border-box;
   border-radius: 4px;
   outline: 0;
   border: 0;

components/system/components/CardTabGroup.js

@@ -11,6 +11,7 @@ const TAB_GROUP_SIZE_MAP = {
 };
 
 const STYLES_CARD_TAB_GROUP = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   width: 100%;
   display: flex;

components/system/components/CheckBox.js

@@ -5,6 +5,7 @@ import * as SVG from "~/components/system/svg";
 import { css } from "@emotion/react";
 
 const STYLES_CHECKBOX = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   display: flex;
   align-items: flex-start;
@@ -13,6 +14,7 @@ const STYLES_CHECKBOX = css`
 `;
 
 const STYLES_CHECKBOX_FIGURE = css`
+  box-sizing: border-box;
   box-shadow: 0 0 0 1px ${Constants.system.darkGray};
   background-color: ${Constants.system.white};
   height: 32px;
@@ -27,6 +29,7 @@ const STYLES_CHECKBOX_FIGURE = css`
 `;
 
 const STYLES_CHECKBOX_INPUT = css`
+  box-sizing: border-box;
   opacity: 0;
   pointer-events: none;
   visibility: hidden;
@@ -38,6 +41,7 @@ const STYLES_CHECKBOX_INPUT = css`
 `;
 
 const STYLES_CHECKBOX_LABEL = css`
+  box-sizing: border-box;
   font-size: 14px;
   min-width: 10%;
   width: 100%;

components/system/components/CodeBlock.js

@@ -4,6 +4,7 @@ import * as Constants from "~/common/constants";
 import { css } from "@emotion/react";
 
 const STYLES_CODE_BLOCK = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.monoCode};
   background-color: ${Constants.system.pitchBlack};
   color: ${Constants.system.white};
@@ -15,6 +16,7 @@ const STYLES_CODE_BLOCK = css`
 `;
 
 const STYLES_PADDING = css`
+  box-sizing: border-box;
   display: flex;
   border-radius: 7px;
   align-items: flex-start;
@@ -23,6 +25,7 @@ const STYLES_PADDING = css`
 `;
 
 const STYLES_PRE = css`
+  box-sizing: border-box;
   color: #666;
   font-family: ${Constants.font.monoCode};
   flex-shrink: 0;
@@ -31,6 +34,7 @@ const STYLES_PRE = css`
 `;
 
 const STYLES_CODE = css`
+  box-sizing: border-box;
   background-color: ${Constants.system.pitchBlack};
   font-family: ${Constants.font.monoCode};
   color: ${Constants.system.gray};

components/system/components/CodeTextarea.js

@@ -6,6 +6,7 @@ import { css } from "@emotion/react";
 import TextareaAutoSize from "~/vendor/react-textarea-autosize";
 
 const STYLES_CODE_TEXTAREA = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.mono};
   display: block;
   max-width: 480px;

components/system/components/DatePicker.js

@@ -7,15 +7,9 @@ import moment from "moment";
 
 import { Input } from "~/components/system/components/Input";
 
-const weekdays = [
-  "Sun",
-  "Mon",
-  "Tue",
-  "Wed",
-  "Thu",
-  "Fri",
-  "Sat",
-].map((day, i) => <div key={i}>{day}</div>);
+const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map(
+  (day, i) => <div key={i}>{day}</div>
+);
 
 const expand = keyframes`
   0% {
@@ -29,10 +23,12 @@ const expand = keyframes`
 `;
 
 const STYLES_DATE_INPUT = css`
+  box-sizing: border-box;
   position: relative;
 `;
 
 const STYLES_HIDDEN_INPUT = css`
+  box-sizing: border-box;
   opacity: 0;
   position: absolute;
   top: 2px;
@@ -40,6 +36,7 @@ const STYLES_HIDDEN_INPUT = css`
 `;
 
 const STYLES_CALENDAR = css`
+  box-sizing: border-box;
   position: absolute;
   font-family: ${Constants.font.text};
   max-width: 480px;
@@ -54,18 +51,21 @@ const STYLES_CALENDAR = css`
 `;
 
 const STYLES_MONTH_CONTAINER = css`
+  box-sizing: border-box;
   display: grid;
   grid-template-columns: 30px 1fr 30px;
   align-items: center;
 `;
 
 const STYLES_MONTH = css`
+  box-sizing: border-box;
   text-align: center;
   font-size: ${Constants.typescale.lvl1};
   margin: 10px 0;
 `;
 
 const STYLES_WEEKDAYS = css`
+  box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
@@ -78,6 +78,7 @@ const STYLES_WEEKDAYS = css`
 `;
 
 const STYLES_DAY = css`
+  box-sizing: border-box;
   font-size: 0.9em;
   cursor: pointer;
 
@@ -87,6 +88,7 @@ const STYLES_DAY = css`
 `;
 
 const STYLES_CHOSEN_DAY = css`
+  box-sizing: border-box;
   font-size: 0.9em;
   position: relative;
   cursor: pointer;
@@ -108,12 +110,14 @@ const STYLES_CHOSEN_DAY = css`
 `;
 
 const STYLES_DISABLED_DAY = css`
+  box-sizing: border-box;
   font-size: 0.9em;
   cursor: not-allowed;
   color: ${Constants.system.gray} !important;
 `;
 
 const STYLES_DATES = css`
+  box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-template-rows: repeat(6, 40px);
@@ -125,6 +129,7 @@ const STYLES_DATES = css`
 `;
 
 const STYLES_ICON = css`
+  box-sizing: border-box;
   cursor: pointer;
   margin: 0 10px;
 

components/system/components/Input.js

@@ -8,6 +8,7 @@ import { css } from "@emotion/react";
 import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
 
 const INPUT_STYLES = `
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   -webkit-appearance: none;
   width: 100%;
@@ -26,6 +27,7 @@ const INPUT_STYLES = `
 `;
 
 const STYLES_INPUT_CONTAINER = css`
+  box-sizing: border-box;
   position: relative;
   max-width: 480px;
   min-width: 188px;
@@ -64,6 +66,7 @@ const STYLES_INPUT = css`
 `;
 
 const STYLES_ICON = css`
+  box-sizing: border-box;
   position: absolute;
   right: 12px;
   margin-top: 1px;

components/system/components/ListEditor.js

@@ -22,11 +22,13 @@ const expand = keyframes`
 `;
 
 const STYLES_INPUT = css`
+  box-sizing: border-box;
   display: inline-block;
   width: calc(100% - 80px);
 `;
 
 const STYLES_INPUT_HIDDEN = css`
+  box-sizing: border-box;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
@@ -35,6 +37,7 @@ const STYLES_INPUT_HIDDEN = css`
 `;
 
 const STYLES_MODAL_BACKGROUND = css`
+  box-sizing: border-box;
   position: fixed;
   top: 0;
   left: 0;
@@ -43,11 +46,13 @@ const STYLES_MODAL_BACKGROUND = css`
 `;
 
 const STYLES_BUTTON = css`
+  box-sizing: border-box;
   display: inline-block;
   text-align: right;
 `;
 
 const STYLES_DELETE = css`
+  box-sizing: border-box;
   height: 18px;
   margin-top: 1px;
   cursor: pointer;
@@ -60,6 +65,7 @@ const STYLES_DELETE = css`
 `;
 
 const STYLES_REORDER = css`
+  box-sizing: border-box;
   height: 14px;
   margin-top: 1px;
   cursor: grab;
@@ -72,6 +78,7 @@ const STYLES_REORDER = css`
 `;
 
 const STYLES_LIST = css`
+  box-sizing: border-box;
   max-width: 480px;
   min-width: 188px;
   width: 100%;
@@ -86,6 +93,7 @@ const STYLES_LIST = css`
 `;
 
 const STYLES_LIST_ITEM = css`
+  box-sizing: border-box;
   font-size: 14px;
   height: 30px;
   display: grid;

components/system/components/Notification.js

@@ -8,6 +8,7 @@ import { css } from "@emotion/react";
 import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
 
 const STYLES_NOTIFICATION = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   background-color: ${Constants.system.white};
   border-radius: 5px;
@@ -19,12 +20,14 @@ const STYLES_NOTIFICATION = css`
 `;
 
 const STYLES_ICON = css`
+  box-sizing: border-box;
   position: relative;
   bottom: 2px;
   margin-bottom: 8px;
 `;
 
 const STYLES_CLOSE = css`
+  box-sizing: border-box;
   height: 18px;
   position: absolute;
   top: 8px;

components/system/components/PopoverNavigation.js

@@ -4,6 +4,7 @@ import * as Constants from "~/common/constants";
 import { css } from "@emotion/react";
 
 const STYLES_POPOVER = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   position: absolute;
   width: 288px;
@@ -14,6 +15,7 @@ const STYLES_POPOVER = css`
 `;
 
 const STYLES_POPOVER_ITEM = css`
+  box-sizing: border-box;
   top: 0;
   left: 0;
   padding: 8px 24px 8px 24px;

components/system/components/RadioGroup.js

@@ -6,6 +6,7 @@ import { css } from "@emotion/react";
 import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
 
 const STYLES_RADIO = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   display: flex;
   align-items: flex-start;
@@ -17,6 +18,7 @@ const STYLES_RADIO = css`
 `;
 
 const STYLES_RADIO_INPUT = css`
+  box-sizing: border-box;
   opacity: 0;
   pointer-events: none;
   visibility: hidden;
@@ -28,11 +30,13 @@ const STYLES_RADIO_INPUT = css`
 `;
 
 const STYLES_RADIO_GROUP = css`
+  box-sizing: border-box;
   display: block;
   width: 100%;
 `;
 
 const STYLES_RADIO_CUSTOM = css`
+  box-sizing: border-box;
   box-shadow: 0 0 0 1px ${Constants.system.darkGray};
   background-color: ${Constants.system.white};
   cursor: pointer;
@@ -48,6 +52,7 @@ const STYLES_RADIO_CUSTOM = css`
 `;
 
 const STYLES_RADIO_CUSTOM_SELECTED = css`
+  box-sizing: border-box;
   background-color: ${Constants.system.brand};
   height: 24px;
   width: 24px;
@@ -59,6 +64,7 @@ const STYLES_RADIO_CUSTOM_SELECTED = css`
 `;
 
 const STYLES_RADIO_LABEL = css`
+  box-sizing: border-box;
   font-size: 14px;
   cursor: pointer;
   min-width: 10%;

components/system/components/SelectMenus.js

@@ -8,6 +8,7 @@ import { DescriptionGroup } from "~/components/system/components/fragments/Descr
 import { SELECT_COUNTRY_OPTIONS } from "~/common/fixtures";
 
 const INPUT_STYLES = `
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   -webkit-appearance: none;
   width: 100%;
@@ -26,6 +27,7 @@ const INPUT_STYLES = `
 `;
 
 const STYLES_SELECT_MENU = css`
+  box-sizing: border-box;
   display: inline-flex;
   position: relative;
   height: 40px;
@@ -34,6 +36,7 @@ const STYLES_SELECT_MENU = css`
 `;
 
 const STYLES_SELECT_MENU_FULL = css`
+  box-sizing: border-box;
   display: inline-flex;
   position: relative;
   height: 40px;
@@ -41,6 +44,7 @@ const STYLES_SELECT_MENU_FULL = css`
 `;
 
 const STYLES_SELECT_MENU_ANCHOR = css`
+  box-sizing: border-box;
   display: block;
   position: absolute;
   top: 0;
@@ -61,11 +65,13 @@ const STYLES_SELECT_MENU_LABEL = css`
 `;
 
 const STYLES_SELECT_MENU_CATEGORY = css`
+  box-sizing: border-box;
   color: ${Constants.system.darkGray};
   margin-left: 4px;
 `;
 
 const STYLES_SELECT_MENU_CHEVRON = css`
+  box-sizing: border-box;
   position: absolute;
   right: 12px;
   margin-top: 1px;
@@ -131,6 +137,6 @@ export const SelectCountryMenu = (props) => {
       category={props.category}
       onChange={props.onChange}
       options={SELECT_COUNTRY_OPTIONS}
-    ></SelectMenu>
+    />
   );
 };

components/system/components/Stat.js

@@ -5,6 +5,7 @@ import * as SVG from "~/components/system/svg";
 import { css } from "@emotion/react";
 
 const STYLES_BANDWIDTH = css`
+  box-sizing: border-box;
   padding: 8px 8px 8px 8px;
   display: inline-flex;
   font-family: ${Constants.font.mono};

components/system/components/StatCard.js

@@ -7,6 +7,7 @@ import { LineChart } from "~/vendor/react-chartkick";
 import "chart.js";
 
 const STYLES_STAT_CARD = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   width: 100%;
   box-shadow: 0 0 0 1px ${Constants.system.gray}, 0 1px 4px rgba(0, 0, 0, 0.04);
@@ -15,6 +16,7 @@ const STYLES_STAT_CARD = css`
 `;
 
 const STYLES_STAT_CARD_TOP = css`
+  box-sizing: border-box;
   background-color: ${Constants.system.foreground};
   color: ${Constants.system.black};
   padding: 16px 16px 16px 16px;
@@ -22,20 +24,25 @@ const STYLES_STAT_CARD_TOP = css`
 `;
 
 const STYLES_STAT_CARD_BOTTOM = css`
+  box-sizing: border-box;
   border-top: 1px solid ${Constants.system.gray};
   padding: 12px 16px 12px 16px;
   border-radius: 0 0 4px 4px;
   font-size: 14px;
 `;
 
-const STYLES_STAT_CARD_NAME = css``;
+const STYLES_STAT_CARD_NAME = css`
+  box-sizing: border-box;
+`;
 
 const STYLES_STAT_CARD_VALUE_GROUP = css`
+  box-sizing: border-box;
   color: ${Constants.system.black};
   border-radius: 4px 4px 0 0;
 `;
 
 const STYLES_STAT_CARD_VALUE = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.medium};
   font-size: ${Constants.typescale.lvl3};
   color: ${Constants.system.brand};
@@ -43,6 +50,7 @@ const STYLES_STAT_CARD_VALUE = css`
 `;
 
 const STYLES_STAT_CARD_DENOMINATION = css`
+  box-sizing: border-box;
   display: block;
   font-family: ${Constants.font.semiBold};
   font-size: 10px;

components/system/components/TabGroup.js

@@ -4,6 +4,7 @@ import * as Constants from "~/common/constants";
 import { css } from "@emotion/react";
 
 const STYLES_TAB_GROUP = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   width: 100%;
   display: flex;
@@ -11,6 +12,7 @@ const STYLES_TAB_GROUP = css`
 `;
 
 const STYLES_TAB_GROUP_TAB = css`
+  box-sizing: border-box;
   background: ${Constants.system.gray};
   color: ${Constants.system.black};
   border-bottom: 1px solid ${Constants.system.white};

components/system/components/Table.js

@@ -18,6 +18,7 @@ const TABLE_COLUMN_WIDTH_DEFAULTS = {
 };
 
 const STYLES_TABLE_PLACEHOLDER = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   display: block;
   width: 100%;
@@ -27,6 +28,7 @@ const STYLES_TABLE_PLACEHOLDER = css`
 `;
 
 const STYLES_TABLE_ROW = css`
+  box-sizing: border-box;
   padding: 0 8px 0 8px;
   border-bottom: 1px solid ${Constants.system.gray};
   display: flex;
@@ -39,11 +41,13 @@ const STYLES_TABLE_ROW = css`
 `;
 
 const STYLES_TABLE_SELECTED_ROW = css`
+  box-sizing: border-box;
   display: block;
   border-bottom: 1px solid ${Constants.system.gray};
 `;
 
 const STYLES_TABLE_TOP_ROW = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.semiBold};
   width: 100%;
   padding: 0 8px 0 8px;

components/system/components/Textarea.js

@@ -6,6 +6,7 @@ import { css } from "@emotion/react";
 import TextareaAutoSize from "~/vendor/react-textarea-autosize";
 
 const STYLES_TEXTAREA = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   -webkit-appearance: none;
   width: 100%;

components/system/components/Toggle.js

@@ -7,6 +7,7 @@ import { DescriptionGroup } from "~/components/system/components/fragments/Descr
 
 const STYLES_TOGGLE = css`
   font-family: ${Constants.font.text};
+  box-sizing: border-box;
   display: inline-flex;
   height: 40px;
   border-radius: 40px;
@@ -19,6 +20,7 @@ const STYLES_TOGGLE = css`
 `;
 
 const STYLES_DIAL = css`
+  box-sizing: border-box;
   height: 32px;
   width: 32px;
   border-radius: 32px;

components/system/components/Typography.js

@@ -4,6 +4,7 @@ import * as Constants from "~/common/constants";
 import { css } from "@emotion/react";
 
 const STYLES_H1 = css`
+  box-sizing: border-box;
   font-size: ${Constants.typescale.lvl4};
   line-height: 1.1;
   font-family: ${Constants.font.semiBold};
@@ -35,6 +36,7 @@ export const H1 = (props) => {
 };
 
 const STYLES_H2 = css`
+  box-sizing: border-box;
   font-size: ${Constants.typescale.lvl3};
   line-height: 1.1;
   font-family: ${Constants.font.medium};
@@ -67,6 +69,7 @@ export const H2 = (props) => {
 };
 
 const STYLES_P = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   font-size: ${Constants.typescale.lvl1};
   line-height: 1.5;
@@ -87,6 +90,7 @@ export const P = (props) => {
 };
 
 const STYLES_UL = css`
+  box-sizing: border-box;
   padding-left: 24px;
 `;
 
@@ -95,6 +99,7 @@ export const UL = (props) => {
 };
 
 const STYLES_LI = css`
+  box-sizing: border-box;
   margin-top: 12px;
 
   strong {

components/system/components/fragments/CodeText.js

@@ -17,6 +17,7 @@ const STYLES_WRAP = {
 };
 
 const STYLES_CODE = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.mono};
   font-size: 0.95em;
   background-color: ${Constants.system.white};
@@ -41,6 +42,7 @@ const STYLES_CODE_COPYABLE = css`
 `;
 
 const STYLES_HIDDEN = css`
+  box-sizing: border-box;
   opacity: 0;
   position: absolute;
 `;

components/system/components/fragments/DescriptionGroup.js

@@ -7,6 +7,7 @@ import { css } from "@emotion/react";
 import { TooltipAnchor } from "~/components/system/components/fragments/TooltipAnchor";
 
 const STYLES_DESCRIPTION_GROUP_LABEL = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.semiBold};
   font-size: 14px;
   padding: 0;
@@ -18,6 +19,7 @@ const STYLES_DESCRIPTION_GROUP_LABEL = css`
 `;
 
 const STYLES_DESCRIPTION_GROUP_DESCRIPTION = css`
+  box-sizing: border-box;
   font-family: ${Constants.font.text};
   font-size: 14px;
   margin-bottom: 12px;

components/system/components/fragments/TableComponents.js

@@ -35,6 +35,7 @@ const COMPONENTS_ICON = {
 };
 
 const STYLES_TABLE_TAG = css`
+  box-sizing: border-box;
   font-weight: 400;
   font-family: ${Constants.font.semiBold};
   letter-spacing: 0.2px;

components/system/components/fragments/TooltipAnchor.js

@@ -1,11 +1,12 @@
-import * as React from 'react';
-import * as Constants from '~/common/constants';
-import * as SVG from '~/components/system/svg';
+import * as React from "react";
+import * as Constants from "~/common/constants";
+import * as SVG from "~/components/system/svg";
 
-import { css } from '@emotion/react';
-import { Tooltip } from 'react-tippy';
+import { css } from "@emotion/react";
+import { Tooltip } from "react-tippy";
 
 const STYLES_TOOLTIP_ANCHOR = css`
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -22,7 +23,9 @@ export class TooltipAnchor extends React.Component {
           {this.props.children ? (
             this.props.children
           ) : (
-            <SVG.Information height={this.props.height ? this.props.height : '24px'} />
+            <SVG.Information
+              height={this.props.height ? this.props.height : "24px"}
+            />
           )}
         </span>
       </Tooltip>

components/system/modules/CreateFilecoinAddress.js

@@ -22,6 +22,8 @@ const SELECT_MENU_SAVE_STRINGS = {
 };
 
 const STYLES_CONTAINER = css`
+  font-family: ${Constants.font.text};
+  box-sizing: border-box;
   padding: 24px;
   border-radius: 4px;
   background-color: ${Constants.system.white};

components/system/modules/CreateFilecoinStorageDeal.js

@@ -5,6 +5,8 @@ import * as System from "~/components/system";
 import { css } from "@emotion/react";
 
 const STYLES_CONTAINER = css`
+  font-family: ${Constants.font.text};
+  box-sizing: border-box;
   padding: 24px;
   border-radius: 4px;
   background-color: ${Constants.system.white};
@@ -25,6 +27,7 @@ const STYLES_FILE_HIDDEN = css`
 `;
 
 const STYLES_FOCUS = css`
+  box-sizing: border-box;
   font-size: ${Constants.typescale.lvl1};
   font-family: ${Constants.font.medium};
   overflow-wrap: break-word;

components/system/modules/CreateToken.js

@@ -5,6 +5,8 @@ import { css } from "@emotion/react";
 import { ButtonPrimaryFull } from "~/components/system/components/Buttons";
 
 const STYLES_CREATE_TOKEN = css`
+  font-family: ${Constants.font.text};
+  box-sizing: border-box;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
   display: block;
   max-width: 480px;
@@ -12,6 +14,7 @@ const STYLES_CREATE_TOKEN = css`
 `;
 
 const STYLES_CREATE_TOKEN_TOP = css`
+  box-sizing: border-box;
   background: ${Constants.system.black};
   color: ${Constants.system.white};
   font-family: "mono";
@@ -24,6 +27,7 @@ const STYLES_CREATE_TOKEN_TOP = css`
 `;
 
 const STYLES_CREATE_TOKEN_BOTTOM = css`
+  box-sizing: border-box;
   background: ${Constants.system.white};
   border-radius: 0 0 4px 4px;
   padding: 16px;

components/system/modules/PeersList.js

@@ -5,6 +5,8 @@ import * as System from "~/components/system";
 import { css } from "@emotion/react";
 
 const STYLES_CONTAINER = css`
+  font-family: ${Constants.font.text};
+  box-sizing: border-box;
   border-radius: 4px;
   background-color: ${Constants.system.white};
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);