feat: add widthModalExtraLarge token (#2592)

kiwicom · Dec 15, 2020 · 5213c49 · 5213c49
1 parent 05f1960
commit 5213c49
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 8 deletions.
diff --git a/packages/orbit-components/src/Modal/index.js b/packages/orbit-components/src/Modal/index.js
@@ -25,12 +25,11 @@ import type { Instance, Props } from "./index";
 
 const getSizeToken = () => ({ size, theme }) => {
   const tokens = {
-    // TODO: create tokens widthModalSmall,...
     [SIZES.EXTRASMALL]: "360px",
     [SIZES.SMALL]: theme.orbit.widthModalSmall,
     [SIZES.NORMAL]: theme.orbit.widthModalNormal,
-    [SIZES.LARGE]: "900px",
-    [SIZES.EXTRALARGE]: theme.orbit.widthModalLarge, // add token theme.orbit.widthModalExtraLarge
+    [SIZES.LARGE]: theme.orbit.widthModalLarge,
+    [SIZES.EXTRALARGE]: theme.orbit.widthModalExtraLarge,
   };
 
   return tokens[size];

diff --git a/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.js.snap b/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.js.snap
@@ -465,7 +465,8 @@ Object {
   "widthIconLarge": "32px",
   "widthIconMedium": "24px",
   "widthIconSmall": "16px",
-  "widthModalLarge": "1280px",
+  "widthModalExtraLarge": "1280px",
+  "widthModalLarge": "900px",
   "widthModalNormal": "740px",
   "widthModalSmall": "540px",
   "widthRadioButton": "20px",
@@ -943,7 +944,8 @@ Object {
   "widthIconLarge": "32px",
   "widthIconMedium": "24px",
   "widthIconSmall": "16px",
-  "widthModalLarge": "1280px",
+  "widthModalExtraLarge": "1280px",
+  "widthModalLarge": "900px",
   "widthModalNormal": "740px",
   "widthModalSmall": "540px",
   "widthRadioButton": "20px",
@@ -1421,7 +1423,8 @@ Object {
   "widthIconLarge": "3px",
   "widthIconMedium": "2px",
   "widthIconSmall": "1px",
-  "widthModalLarge": "1280px",
+  "widthModalExtraLarge": "1280px",
+  "widthModalLarge": "900px",
   "widthModalNormal": "740px",
   "widthModalSmall": "540px",
   "widthRadioButton": "20px",
@@ -1899,7 +1902,8 @@ Object {
   "widthIconLarge": "32px",
   "widthIconMedium": "24px",
   "widthIconSmall": "16px",
-  "widthModalLarge": "1280px",
+  "widthModalExtraLarge": "1280px",
+  "widthModalLarge": "900px",
   "widthModalNormal": "740px",
   "widthModalSmall": "540px",
   "widthRadioButton": "20px",

diff --git a/packages/orbit-design-tokens/src/index.d.ts b/packages/orbit-design-tokens/src/index.d.ts
@@ -364,6 +364,7 @@ export type Tokens = {
   widthModalSmall: string;
   widthModalNormal: string;
   widthModalLarge: string;
+  widthModalExtraLarge: string;
   widthStopoverArrow: string;
   heightStopoverArrow: string;
   widthBreakpointMediumMobile: number;

diff --git a/packages/orbit-design-tokens/src/index.js b/packages/orbit-design-tokens/src/index.js
@@ -286,7 +286,8 @@ export const getTokens: GetTokens = customFoundation => {
     heightInputGroupSeparatorNormal: theme.base.sizeMd,
     widthModalSmall: "540px",
     widthModalNormal: "740px",
-    widthModalLarge: "1280px",
+    widthModalLarge: "900px",
+    widthModalExtraLarge: "1280px",
     widthStopoverArrow: "36px",
     heightStopoverArrow: "7px",
     // category:Breakpoints

diff --git a/packages/orbit-design-tokens/src/index.js.flow b/packages/orbit-design-tokens/src/index.js.flow
@@ -263,6 +263,7 @@ export type Tokens = {|
   widthModalSmall: string,
   widthModalNormal: string,
   widthModalLarge: string,
+  widthModalExtraLarge: string,
   widthStopoverArrow: string,
   heightStopoverArrow: string,
   widthBreakpointMediumMobile: number,