From 134ff71c78a988b527c6f2515e4647cf59650cb6 Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Mon, 12 Mar 2018 21:45:00 -0700 Subject: [PATCH] feat(modals): use dark theme --- .flowconfig | 1 + css/_aui_reset.scss | 1 - css/modals/_dialog.scss | 8 +- .../desktop-picker/_desktop-picker.scss | 3 +- .../device-selection/_device-selection.scss | 18 +- css/modals/speaker_stats/_speaker_stats.scss | 4 - css/themes/_light.scss | 20 +- css/unsupported-browser/_no-mobile-app.scss | 2 +- package-lock.json | 551 ++++++++++++++---- package.json | 8 +- .../dialog/components/StatelessDialog.web.js | 263 ++++----- .../device-selection/DeviceSelectionPopup.js | 5 +- .../feedback/components/FeedbackDialog.web.js | 5 +- 13 files changed, 621 insertions(+), 268 deletions(-) diff --git a/.flowconfig b/.flowconfig index 1d2a4c0c9..b80c8ab80 100644 --- a/.flowconfig +++ b/.flowconfig @@ -18,6 +18,7 @@ ; Ignore packages in node_modules which we (i.e. the jitsi-meet project) have ; seen to cause errors and we have chosen not to fix. +.*/node_modules/@atlaskit/.*/*.js.flow .*/node_modules/@atlassian .*/node_modules/bower/lib/node_modules/bower-json/test/.* .*/node_modules/immutable/dist/immutable.js.flow diff --git a/css/_aui_reset.scss b/css/_aui_reset.scss index 2990a5133..66716cca3 100644 --- a/css/_aui_reset.scss +++ b/css/_aui_reset.scss @@ -135,7 +135,6 @@ h3 { margin: 30px 0 0 0; } h4 { - color: #333; font-size: 16px; font-weight: bold; line-height: 1.25; diff --git a/css/modals/_dialog.scss b/css/modals/_dialog.scss index 21b38cd0d..d4fc8f5c3 100644 --- a/css/modals/_dialog.scss +++ b/css/modals/_dialog.scss @@ -101,7 +101,7 @@ } &-content { - background-color: $auiDialogContentBg; + background-color: $auiDialogBg; box-sizing: border-box; color: $auiDialogColor; font-size: em(14, 12); @@ -126,6 +126,11 @@ } } + .input-control { + background-color: $auiDialogContentBg; + color: $auiDialogColor; + } + .form-control:not(:last-child) { border-bottom: 1px solid $auiBorderColor; } @@ -138,7 +143,6 @@ } .modal-dialog-form { - color: $modalTextColor; margin-top: 5px !important; .input-control { diff --git a/css/modals/desktop-picker/_desktop-picker.scss b/css/modals/desktop-picker/_desktop-picker.scss index 7a175cd12..69a85f7cf 100644 --- a/css/modals/desktop-picker/_desktop-picker.scss +++ b/css/modals/desktop-picker/_desktop-picker.scss @@ -36,13 +36,12 @@ } .desktop-picker-source { - color: $defaultDarkFontColor; margin-top: 10px; text-align: center; &.is-selected { .desktop-source-preview-image-container { - background: rgba(0, 0, 0, 0.1); + background: rgba(255,255,255,0.3); border-radius: $borderRadius; } } diff --git a/css/modals/device-selection/_device-selection.scss b/css/modals/device-selection/_device-selection.scss index 4ac49d92e..3dc68ef32 100644 --- a/css/modals/device-selection/_device-selection.scss +++ b/css/modals/device-selection/_device-selection.scss @@ -1,6 +1,4 @@ .device-selection { - color: $feedbackInputTextColor; - .device-selectors { font-size: 14px; @@ -22,19 +20,15 @@ /* device-selector-trigger stylings attempt to mimic AtlasKit button */ .device-selector-trigger { - background-color: rgba(9, 30, 66, 0.04); - border-radius: 3px; - color: #505f79; + background-color: #0E1624; + border: 1px solid #455166; + border-radius: 5px; display: flex; height: 2.3em; justify-content: space-between; line-height: 2.3em; overflow: hidden; padding: 0 8px; - - &:hover { - background-color: rgba(9,30,66,.08); - } } .device-selector-trigger-disabled { .device-selector-trigger { @@ -108,19 +102,21 @@ .audio-output-preview { font-size: 14px; margin-top: 10px; + a { + color: 4C9AFF; cursor: pointer; text-decoration: none; } } .audio-input-preview { - background: #f4f5f7; + background: #7b7b7b; border-radius: 5px; height: 6px; .audio-input-preview-level { - background: #0052cc; + background: #4C9AFF; border-radius: 5px; height: 100%; -webkit-transition: width .1s ease-in-out; diff --git a/css/modals/speaker_stats/_speaker_stats.scss b/css/modals/speaker_stats/_speaker_stats.scss index ab493b832..213d198bd 100644 --- a/css/modals/speaker_stats/_speaker_stats.scss +++ b/css/modals/speaker_stats/_speaker_stats.scss @@ -42,10 +42,6 @@ width: 55%; } - .speaker-stats-item:nth-child(even) { - background: whitesmoke; - } - .speaker-stats-item__name, .speaker-stats-item__time { overflow: hidden; diff --git a/css/themes/_light.scss b/css/themes/_light.scss index 495c18c35..5b4978220 100644 --- a/css/themes/_light.scss +++ b/css/themes/_light.scss @@ -14,11 +14,11 @@ $sliderThumbBackground: #3572b0; /** * Buttons */ -$buttonBackground: #f5f5f5; -$buttonHoverBackground: #e9e9e9; -$buttonBorder: #ccc; -$buttonHoverBorder: #999; -$buttonColor: #333; +$buttonBackground: #44A5FF; +$buttonHoverBackground: #2c4062; +$buttonBorder: transparent; +$buttonHoverBorder: transparent; +$buttonColor: #eceef1; $buttonLightBackground: #f5f5f5; $buttonLightHoverBackground: #e9e9e9; @@ -47,10 +47,10 @@ $reloadProgressBarBg: #0074E0; /** * Dialog colors **/ -$auiDialogColor: #333; -$auiDialogBg: #f5f5f5; -$auiDialogContentBg: $baseLight; -$auiBorderColor: #ccc; +$auiDialogColor: #eceef1; +$auiDialogBg: #253858; +$auiDialogContentBg: #344563; +$auiBorderColor: #253858; $dialogTitleFontWeight: 400; $dialogErrorText: #344563; @@ -58,7 +58,7 @@ $dialogErrorText: #344563; * Inlay colors **/ $inlayColorBg: lighten($defaultBackground, 20%); -$inlayBorderColor: lighten($auiDialogContentBg, 10%); +$inlayBorderColor: lighten($baseLight, 10%); $inlayIconBg: #000; $inlayIconColor: #fff; $inlayFilmstripOnlyColor: #474747; diff --git a/css/unsupported-browser/_no-mobile-app.scss b/css/unsupported-browser/_no-mobile-app.scss index 5bac4569c..7398a86e1 100644 --- a/css/unsupported-browser/_no-mobile-app.scss +++ b/css/unsupported-browser/_no-mobile-app.scss @@ -5,7 +5,7 @@ width: auto; &__title { - border-bottom: 1px solid $auiBorderColor; + border-bottom: 1px solid $inlayBorderColor; color: $unsupportedBrowserTitleColor; font-weight: 400; letter-spacing: 0.5px; diff --git a/package-lock.json b/package-lock.json index af3a7fcc1..1d3227c6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,28 +4,25 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@atlaskit/analytics-next": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-1.1.3.tgz", + "integrity": "sha512-1r9kU2ZbleLCEpJhoPoor/IBbyRue22sutT/+5b8PY43xRgN4HzYT+lWBJRI9fWpG9yJJXLnr9uAjO8LJUKrCg==", + "requires": { + "prop-types": "15.6.0" + } + }, "@atlaskit/avatar": { "version": "8.0.5", "resolved": "https://registry.npmjs.org/@atlaskit/avatar/-/avatar-8.0.5.tgz", "integrity": "sha1-mJ4NkoR7N4yphKI+oHWY9jUhP/I=", "requires": { "@atlaskit/dropdown-menu": "3.10.2", - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "@atlaskit/util-shared-styles": "2.10.6", "babel-runtime": "6.26.0", "prop-types": "15.6.0", - "styled-components": "1.3.0" - } - }, - "@atlaskit/blanket": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/@atlaskit/blanket/-/blanket-2.4.3.tgz", - "integrity": "sha1-5kJGkzk+FxcZ1z8MDiw4OnqkzYA=", - "requires": { - "@atlaskit/util-shared-styles": "2.10.6", - "babel-runtime": "6.26.0", - "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } }, "@atlaskit/button": { @@ -33,11 +30,11 @@ "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-5.4.2.tgz", "integrity": "sha1-CSu+/KR+fPJJBQzRu9/E18o0KYQ=", "requires": { - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "babel-runtime": "6.26.0", "classnames": "2.2.5", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } }, "@atlaskit/dropdown-menu": { @@ -93,7 +90,7 @@ "@atlaskit/item": "4.2.11", "@atlaskit/layer": "2.7.2", "@atlaskit/spinner": "4.0.0", - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "@atlaskit/tooltip": "6.0.0", "babel-runtime": "6.26.0", "classnames": "2.2.5", @@ -219,10 +216,159 @@ "integrity": "sha1-pasqvkxDkjQXiTb2JYNHmaiZRQ0=", "requires": { "@atlaskit/field-base": "8.1.13", - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "babel-runtime": "6.26.0", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" + } + }, + "@atlaskit/field-text-area": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@atlaskit/field-text-area/-/field-text-area-1.2.0.tgz", + "integrity": "sha512-dLZk+KX8F8/nslTYAQEpf3iZnlhmey5uWhtoytBRax2aeBAHAt102E26C86B7Rw5r9JX81c7MuSZWW2pjbdY/Q==", + "requires": { + "@atlaskit/button": "6.6.3", + "@atlaskit/field-base": "8.2.1", + "@atlaskit/icon": "10.12.2", + "@atlaskit/theme": "2.4.0", + "@atlaskit/util-readme": "3.6.5", + "babel-runtime": "6.26.0", + "prop-types": "15.6.0", + "styled-components": "1.4.6" + }, + "dependencies": { + "@atlaskit/button": { + "version": "6.6.3", + "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-6.6.3.tgz", + "integrity": "sha512-+NLQrWv6HeJPC32Q6o+3w59F3secYWPT+9AM9nblPOjvRXmIVosafkro8wncVzX07/nx7MnBIXtYJRE+Cv+9Vg==", + "requires": { + "@atlaskit/analytics-next": "1.1.3", + "@atlaskit/theme": "2.4.1", + "babel-runtime": "6.26.0", + "styled-components": "1.4.6" + }, + "dependencies": { + "@atlaskit/theme": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz", + "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==", + "requires": { + "prop-types": "15.6.0", + "styled-components": "1.4.6" + } + } + } + }, + "@atlaskit/field-base": { + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/@atlaskit/field-base/-/field-base-8.2.1.tgz", + "integrity": "sha512-s18bwvmGug6sYZ6nuHLP33T2AWYZemteZCIaFPwlEKT4MkTXNX3KX9bYy8TRJmQo2+NC4uPVUUT2U8MeF4wBnQ==", + "requires": { + "@atlaskit/icon": "10.12.2", + "@atlaskit/inline-dialog": "5.3.2", + "@atlaskit/spinner": "4.2.1", + "@atlaskit/theme": "2.4.1", + "babel-runtime": "6.26.0", + "styled-components": "1.4.6" + }, + "dependencies": { + "@atlaskit/theme": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz", + "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==", + "requires": { + "prop-types": "15.6.0", + "styled-components": "1.4.6" + } + } + } + }, + "@atlaskit/icon": { + "version": "10.12.2", + "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-10.12.2.tgz", + "integrity": "sha512-OGNCVg8CdyaF/pD6DyhSaiK2pfb5R0jTWezlKCeKNXpmNiLUF4/B5MkOJFBMAHZc1A3EpBr9YNqH/uhJvG9G/Q==", + "requires": { + "@atlaskit/theme": "2.4.1", + "babel-runtime": "6.26.0", + "styled-components": "1.4.6", + "uuid": "3.1.0" + }, + "dependencies": { + "@atlaskit/theme": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz", + "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==", + "requires": { + "prop-types": "15.6.0", + "styled-components": "1.4.6" + } + } + } + }, + "@atlaskit/inline-dialog": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/@atlaskit/inline-dialog/-/inline-dialog-5.3.2.tgz", + "integrity": "sha512-FUZZBi9x6Cr1bpd/f00Q262wLlTfl0Sl7PJUQLoHxy0u7Zg9lBLrUEoxuGh0OlOlqvQA99lJK23igZYOXDe9xA==", + "requires": { + "@atlaskit/layer": "2.9.1", + "@atlaskit/theme": "2.4.1", + "styled-components": "1.4.6" + }, + "dependencies": { + "@atlaskit/theme": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz", + "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==", + "requires": { + "prop-types": "15.6.0", + "styled-components": "1.4.6" + } + } + } + }, + "@atlaskit/layer": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/@atlaskit/layer/-/layer-2.9.1.tgz", + "integrity": "sha512-nyIVGeS2OhuGR5gIMTYUfRmCG8z/9KMgUzTpbpsB70sH6+d4KSFhfkz+KhKNIa8gvKI6zBc+3UBYSlUW1t1qmQ==", + "requires": { + "styled-components": "1.4.6" + } + }, + "@atlaskit/spinner": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-4.2.1.tgz", + "integrity": "sha512-PWJ3hFMl+7rls0vvwFtH6qOu9HKeIHQFtDvJ/+HykmhzIp1tQ+S5DQ+et4ciHfNSh2On2GNiLcZHwXahHvR5WA==", + "requires": { + "@atlaskit/theme": "2.4.1", + "babel-runtime": "6.26.0", + "react-transition-group": "2.2.1", + "styled-components": "1.4.6" + }, + "dependencies": { + "@atlaskit/theme": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz", + "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==", + "requires": { + "prop-types": "15.6.0", + "styled-components": "1.4.6" + } + } + } + }, + "react-transition-group": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz", + "integrity": "sha512-q54UBM22bs/CekG8r3+vi9TugSqh0t7qcEVycaRc9M0p0aCEu+h6rp/RFiW7fHfgd1IKpd9oILFTl5QK+FpiPA==", + "requires": { + "chain-function": "1.0.0", + "classnames": "2.2.5", + "dom-helpers": "3.3.1", + "loose-envify": "1.3.1", + "prop-types": "15.6.0", + "warning": "3.0.0" + } + } } }, "@atlaskit/flag": { @@ -232,12 +378,12 @@ "requires": { "@atlaskit/button": "5.4.2", "@atlaskit/icon": "7.1.0", - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "@atlaskit/util-shared-styles": "2.10.6", "babel-runtime": "6.26.0", "prop-types": "15.6.0", "react-transition-group": "1.2.1", - "styled-components": "1.3.0" + "styled-components": "1.4.6" }, "dependencies": { "@atlaskit/icon": { @@ -247,7 +393,7 @@ "requires": { "babel-runtime": "6.26.0", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } } } @@ -259,7 +405,7 @@ "requires": { "babel-runtime": "6.26.0", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } }, "@atlaskit/inline-dialog": { @@ -268,10 +414,10 @@ "integrity": "sha1-xwPi9seo0M+nrcPXgJK0bE7ShkQ=", "requires": { "@atlaskit/layer": "2.7.2", - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "babel-runtime": "6.26.0", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } }, "@atlaskit/inline-message": { @@ -282,10 +428,10 @@ "@atlaskit/button": "3.6.0", "@atlaskit/icon": "7.1.0", "@atlaskit/inline-dialog": "5.0.2", - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "babel-runtime": "6.26.0", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" }, "dependencies": { "@atlaskit/button": { @@ -297,7 +443,7 @@ "babel-runtime": "6.26.0", "classnames": "2.2.5", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } }, "@atlaskit/icon": { @@ -307,7 +453,7 @@ "requires": { "babel-runtime": "6.26.0", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } } } @@ -375,6 +521,33 @@ } } }, + "@atlaskit/layer-manager": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@atlaskit/layer-manager/-/layer-manager-2.8.0.tgz", + "integrity": "sha512-/o4c+zyF3nOeR3xJGFeUpOh8TUbcX293285Nvxcbo1F+knM7WA1JhE786XkTK05nZ2HCqK6zHKSlyIoKdJYtkw==", + "requires": { + "focusin": "2.0.0", + "prop-types": "15.6.0", + "react-transition-group": "2.2.1", + "styled-components": "1.4.6", + "tabbable": "1.1.2" + }, + "dependencies": { + "react-transition-group": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz", + "integrity": "sha512-q54UBM22bs/CekG8r3+vi9TugSqh0t7qcEVycaRc9M0p0aCEu+h6rp/RFiW7fHfgd1IKpd9oILFTl5QK+FpiPA==", + "requires": { + "chain-function": "1.0.0", + "classnames": "2.2.5", + "dom-helpers": "3.3.1", + "loose-envify": "1.3.1", + "prop-types": "15.6.0", + "warning": "3.0.0" + } + } + } + }, "@atlaskit/lozenge": { "version": "3.4.2", "resolved": "https://registry.npmjs.org/@atlaskit/lozenge/-/lozenge-3.4.2.tgz", @@ -383,7 +556,7 @@ "@atlaskit/util-shared-styles": "1.7.1", "babel-runtime": "6.26.0", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" }, "dependencies": { "@atlaskit/util-shared-styles": { @@ -397,15 +570,100 @@ } }, "@atlaskit/modal-dialog": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/@atlaskit/modal-dialog/-/modal-dialog-2.6.0.tgz", - "integrity": "sha1-gqXtcN8W5s6ttZHQDeYvTzx3jiE=", + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@atlaskit/modal-dialog/-/modal-dialog-3.4.0.tgz", + "integrity": "sha512-5KOZrwCanzXD3b9+kQYIS4tACAj/HjcwY+yLGY1SCxlDxj94uUNr+tTAznng3EKRf64UbqshrRQXBj8Fcol4sw==", "requires": { - "@atlaskit/blanket": "2.4.3", - "@atlaskit/util-shared-styles": "2.10.6", - "babel-runtime": "6.26.0", + "@atlaskit/blanket": "4.1.1", + "@atlaskit/button": "6.6.3", + "@atlaskit/icon": "10.12.2", + "@atlaskit/layer-manager": "2.8.0", + "@atlaskit/theme": "2.4.0", + "focusin": "2.0.0", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "raf-schd": "2.1.0", + "react-transition-group": "2.2.1", + "styled-components": "1.4.6", + "tabbable": "1.1.2" + }, + "dependencies": { + "@atlaskit/blanket": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@atlaskit/blanket/-/blanket-4.1.1.tgz", + "integrity": "sha512-LPqRNVkR6+mI67EutF6iQIUARf1MWpjdVxeLaMJZOG/ej8u9dYIkoOOVeliXx/bx+4X5NfnKikeg34MB6VU5DQ==", + "requires": { + "@atlaskit/theme": "2.4.1", + "styled-components": "1.4.6" + }, + "dependencies": { + "@atlaskit/theme": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz", + "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==", + "requires": { + "prop-types": "15.6.0", + "styled-components": "1.4.6" + } + } + } + }, + "@atlaskit/button": { + "version": "6.6.3", + "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-6.6.3.tgz", + "integrity": "sha512-+NLQrWv6HeJPC32Q6o+3w59F3secYWPT+9AM9nblPOjvRXmIVosafkro8wncVzX07/nx7MnBIXtYJRE+Cv+9Vg==", + "requires": { + "@atlaskit/analytics-next": "1.1.3", + "@atlaskit/theme": "2.4.1", + "babel-runtime": "6.26.0", + "styled-components": "1.4.6" + }, + "dependencies": { + "@atlaskit/theme": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz", + "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==", + "requires": { + "prop-types": "15.6.0", + "styled-components": "1.4.6" + } + } + } + }, + "@atlaskit/icon": { + "version": "10.12.2", + "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-10.12.2.tgz", + "integrity": "sha512-OGNCVg8CdyaF/pD6DyhSaiK2pfb5R0jTWezlKCeKNXpmNiLUF4/B5MkOJFBMAHZc1A3EpBr9YNqH/uhJvG9G/Q==", + "requires": { + "@atlaskit/theme": "2.4.1", + "babel-runtime": "6.26.0", + "styled-components": "1.4.6", + "uuid": "3.1.0" + }, + "dependencies": { + "@atlaskit/theme": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz", + "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==", + "requires": { + "prop-types": "15.6.0", + "styled-components": "1.4.6" + } + } + } + }, + "react-transition-group": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz", + "integrity": "sha512-q54UBM22bs/CekG8r3+vi9TugSqh0t7qcEVycaRc9M0p0aCEu+h6rp/RFiW7fHfgd1IKpd9oILFTl5QK+FpiPA==", + "requires": { + "chain-function": "1.0.0", + "classnames": "2.2.5", + "dom-helpers": "3.3.1", + "loose-envify": "1.3.1", + "prop-types": "15.6.0", + "warning": "3.0.0" + } + } } }, "@atlaskit/multi-select": { @@ -419,12 +677,12 @@ "@atlaskit/spinner": "3.4.2", "@atlaskit/tag": "3.1.3", "@atlaskit/tag-group": "3.5.3", - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "@atlaskit/util-shared-styles": "2.10.6", "babel-runtime": "6.26.0", "classnames": "2.2.5", "prop-types": "15.6.0", - "styled-components": "1.3.0", + "styled-components": "1.4.6", "uid": "0.0.2" }, "dependencies": { @@ -437,7 +695,7 @@ "classnames": "2.2.5", "create-error": "0.3.1", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } }, "@atlaskit/spinner": { @@ -450,7 +708,7 @@ "prop-types": "15.6.0", "prop-types-extra": "1.0.1", "react-transition-group": "1.2.1", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } } } @@ -460,12 +718,12 @@ "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-4.0.0.tgz", "integrity": "sha1-u8MaEjYPwzNhegZsMPhmRmJoOhA=", "requires": { - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "babel-runtime": "6.26.0", "prop-types": "15.6.0", "prop-types-extra": "1.0.1", "react-transition-group": "1.2.1", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } }, "@atlaskit/tabs": { @@ -473,14 +731,14 @@ "resolved": "https://registry.npmjs.org/@atlaskit/tabs/-/tabs-4.0.1.tgz", "integrity": "sha1-vM2WQ8nSO9kR+0GCK4U1oYJHHM8=", "requires": { - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "@atlaskit/util-shared-styles": "1.7.1", "classnames": "2.2.5", "css-element-queries": "0.3.2", "debounce": "1.1.0", "keycode": "2.1.9", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" }, "dependencies": { "@atlaskit/util-shared-styles": { @@ -571,13 +829,12 @@ } }, "@atlaskit/theme": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.2.0.tgz", - "integrity": "sha1-uHNsuA3U7TnizAkPLbFdz4eEgBo=", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.0.tgz", + "integrity": "sha512-JORaZ4/9Bm8V2qsSC4O8Zn6aTHM0MJA4nVJPzxlvFJlz0CX6GTQ+CJiPPssJGidBR8Y78j0LvNXASH5ijLBChw==", "requires": { - "@atlaskit/util-shared-styles": "2.10.6", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } }, "@atlaskit/tooltip": { @@ -586,11 +843,11 @@ "integrity": "sha1-rn3xMCmvO1iZqcuKNPPIT8K7mpc=", "requires": { "@atlaskit/layer": "2.7.2", - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "@atlaskit/util-shared-styles": "2.10.6", "babel-runtime": "6.26.0", "prop-types": "15.6.0", - "styled-components": "1.3.0" + "styled-components": "1.4.6" } }, "@atlaskit/util-common": { @@ -603,6 +860,19 @@ "keycode": "2.1.9" } }, + "@atlaskit/util-readme": { + "version": "3.6.5", + "resolved": "https://registry.npmjs.org/@atlaskit/util-readme/-/util-readme-3.6.5.tgz", + "integrity": "sha1-M6jgyQEI9liaYtiZdOH30J59zuc=", + "requires": { + "@atlaskit/util-shared-styles": "2.10.6", + "decamelize": "1.2.0", + "prop-types": "15.6.0", + "react-docgen": "2.20.1", + "react-syntax-highlighter": "3.0.2", + "styled-components": "1.4.6" + } + }, "@atlaskit/util-shared-styles": { "version": "2.10.6", "resolved": "https://registry.npmjs.org/@atlaskit/util-shared-styles/-/util-shared-styles-2.10.6.tgz", @@ -1107,6 +1377,11 @@ "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=" }, + "ast-types": { + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.10.1.tgz", + "integrity": "sha512-UY7+9DPzlJ9VM8eY0b2TUZcZvF+1pO0hzMtAyjBYKhOmnvRlqYNYnWdtsMj0V16CGaMlpL0G1jnLbLo4AyotuQ==" + }, "async": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz", @@ -2194,7 +2469,7 @@ "babylon": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", - "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==" + "integrity": "sha1-ry87iPpvXB5MY00aD46sT1WzleM=" }, "balanced-match": { "version": "1.0.0", @@ -3342,14 +3617,6 @@ "resolved": "https://registry.npmjs.org/css-element-queries/-/css-element-queries-0.3.2.tgz", "integrity": "sha1-U12AiRs68hOV0AXxmQX+UVS1zP8=" }, - "css-in-js-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz", - "integrity": "sha512-yuWmPMD9FLi50Xf3k8W8oO3WM1eVnxEGCldCLyfusQ+CgivFk0s23yst4ooW6tfxMuSa03S6uUEga9UhX6GRrA==", - "requires": { - "hyphenate-style-name": "1.0.2" - } - }, "css-loader": { "version": "0.28.7", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.7.tgz", @@ -3675,7 +3942,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", - "dev": true, "requires": { "esutils": "2.0.2" } @@ -4128,7 +4394,7 @@ "esprima": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", - "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==", + "integrity": "sha1-RJnt3NERDgshi6zy+n9/WfVcqAQ=", "dev": true }, "globals": { @@ -5017,6 +5283,11 @@ } } }, + "focusin": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/focusin/-/focusin-2.0.0.tgz", + "integrity": "sha1-WMARgN+xlJ8D493u4GNzn8M7b/w=" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -5995,29 +6266,6 @@ "integrity": "sha1-nMj/ABF3lXoRcmq1CNQVu4Cxi88=", "dev": true }, - "glamor": { - "version": "2.20.40", - "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.40.tgz", - "integrity": "sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==", - "requires": { - "fbjs": "0.8.16", - "inline-style-prefixer": "3.0.8", - "object-assign": "4.1.1", - "prop-types": "15.6.0", - "through": "2.3.8" - }, - "dependencies": { - "inline-style-prefixer": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz", - "integrity": "sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=", - "requires": { - "bowser": "1.9.2", - "css-in-js-utils": "2.0.0" - } - } - } - }, "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", @@ -6236,6 +6484,11 @@ "sntp": "2.1.0" } }, + "highlight.js": { + "version": "9.8.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.8.0.tgz", + "integrity": "sha1-OO7vQM1F6t2+yMnlI4+3p4OjtoU=" + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -6496,7 +6749,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", "dev": true }, "supports-color": { @@ -7467,6 +7720,21 @@ "signal-exit": "3.0.2" } }, + "lowlight": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.1.tgz", + "integrity": "sha512-CpDhyVhI+xHjruiGvH2F/Fr5q5aTn5A6Oyh7MI+4oI8G0A1E7p9a3Zqv9Hzx9WByK8gAiNifEueAXz+cA2xdEA==", + "requires": { + "highlight.js": "9.12.0" + }, + "dependencies": { + "highlight.js": { + "version": "9.12.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", + "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=" + } + } + }, "lru-cache": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz", @@ -7811,7 +8079,7 @@ "async": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz", - "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==", + "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=", "requires": { "lodash": "4.17.4" } @@ -8071,6 +8339,14 @@ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.5.3.tgz", "integrity": "sha1-Jp1cR2gQ7JLtvntsLygxY4T5p+g=" }, + "node-dir": { + "version": "0.1.17", + "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz", + "integrity": "sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=", + "requires": { + "minimatch": "3.0.4" + } + }, "node-fetch": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", @@ -9087,7 +9363,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", "dev": true }, "supports-color": { @@ -9151,7 +9427,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", "dev": true }, "supports-color": { @@ -9215,7 +9491,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", "dev": true }, "supports-color": { @@ -9279,7 +9555,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", "dev": true }, "supports-color": { @@ -9601,6 +9877,11 @@ "integrity": "sha1-DPf4T5Rj/wrlHExLFC2VvjdyTZw=", "dev": true }, + "raf-schd": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-2.1.0.tgz", + "integrity": "sha512-6OXM6ObuPnyqjiHVz/XaFTm/yEYC1PXYMt/UFCwMvLQK1Wqlc2f7eU4+8JbgjfZLiQNQU9miFEGPnFUEMEx2hA==" + }, "railroad-diagrams": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz", @@ -9754,6 +10035,35 @@ } } }, + "react-docgen": { + "version": "2.20.1", + "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-2.20.1.tgz", + "integrity": "sha512-NYmD8nDPMWpIpqWqhSZjQ3P5iQml55IMkDG0ZInyWP7JD2ljaNhrxNWZnXPrOezUu6bYlcZUCxjw19s7zhE2uw==", + "requires": { + "async": "2.6.0", + "babel-runtime": "6.26.0", + "babylon": "5.8.38", + "commander": "2.14.1", + "doctrine": "2.1.0", + "node-dir": "0.1.17", + "recast": "0.12.9" + }, + "dependencies": { + "async": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz", + "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==", + "requires": { + "lodash": "4.17.4" + } + }, + "babylon": { + "version": "5.8.38", + "resolved": "https://registry.npmjs.org/babylon/-/babylon-5.8.38.tgz", + "integrity": "sha1-7JsSCxG/bM1Bc6GL8hfmC3mFn/0=" + } + } + }, "react-dom": { "version": "16.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz", @@ -9984,6 +10294,16 @@ } } }, + "react-syntax-highlighter": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-3.0.2.tgz", + "integrity": "sha1-d8VWOFu/cdwul0upa/3Q7e9cMZI=", + "requires": { + "babel-runtime": "6.26.0", + "highlight.js": "9.8.0", + "lowlight": "1.9.1" + } + }, "react-timer-mixin": { "version": "0.13.3", "resolved": "https://registry.npmjs.org/react-timer-mixin/-/react-timer-mixin-0.13.3.tgz", @@ -10084,6 +10404,30 @@ } } }, + "recast": { + "version": "0.12.9", + "resolved": "https://registry.npmjs.org/recast/-/recast-0.12.9.tgz", + "integrity": "sha512-y7ANxCWmMW8xLOaiopiRDlyjQ9ajKRENBH+2wjntIbk3A6ZR1+BLQttkmSHMY7Arl+AAZFwJ10grg2T6f1WI8A==", + "requires": { + "ast-types": "0.10.1", + "core-js": "2.5.3", + "esprima": "4.0.0", + "private": "0.1.8", + "source-map": "0.6.1" + }, + "dependencies": { + "esprima": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", + "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==" + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + } + } + }, "redent": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz", @@ -11341,17 +11685,17 @@ } }, "styled-components": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-1.3.0.tgz", - "integrity": "sha1-BxG1qC/nhLRY/W5QVLhCdRxUOms=", + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-1.4.6.tgz", + "integrity": "sha1-WPMuimq1EPsUgekB6DjgR38UiwY=", "requires": { "buffer": "5.1.0", "css-to-react-native": "1.0.6", "fbjs": "0.8.16", - "glamor": "2.20.40", "inline-style-prefixer": "2.0.5", "is-function": "1.0.1", "is-plain-object": "2.0.4", + "prop-types": "15.6.0", "supports-color": "3.2.3" } }, @@ -11397,6 +11741,11 @@ "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" }, + "tabbable": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-1.1.2.tgz", + "integrity": "sha512-77oqsKEPrxIwgRcXUwipkj9W5ItO97L6eUT1Ar7vh+El16Zm4M6V+YU1cbipHEa6q0Yjw8O3Hoh8oRgatV5s7A==" + }, "table": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz", @@ -11668,7 +12017,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=" } } }, @@ -11682,7 +12031,7 @@ "uglifyjs-webpack-plugin": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.2.tgz", - "integrity": "sha512-CG/NvzXfemUAm5Y4Guh5eEaJYHtkG7kKNpXEJHp9QpxsFVB5/qKvYWoMaq4sa99ccZ0hM3MK8vQV9XPZB4357A==", + "integrity": "sha1-51FtQ2ev23FcOEeEHrRvlMRcork=", "dev": true, "requires": { "cacache": "10.0.4", @@ -11715,7 +12064,7 @@ "schema-utils": { "version": "0.4.5", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz", - "integrity": "sha512-yYrjb9TX2k/J1Y5UNy3KYdZq10xhYcF8nMpAW6o3hy6Q8WSIEf9lJHG/ePnOBfziPM3fvQwfOwa13U/Fh8qTfA==", + "integrity": "sha1-IYNvBgiqwXt4+ePiTa/xSlyhOj4=", "dev": true, "requires": { "ajv": "6.2.1", @@ -11725,7 +12074,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", "dev": true } } @@ -12011,7 +12360,7 @@ "async": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz", - "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==", + "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=", "dev": true, "requires": { "lodash": "4.17.4" @@ -12460,7 +12809,7 @@ "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=", "dev": true } } diff --git a/package.json b/package.json index ae3a01f2a..b16199844 100644 --- a/package.json +++ b/package.json @@ -20,16 +20,18 @@ "@atlaskit/dropdown-menu": "3.10.2", "@atlaskit/droplist": "4.11.1", "@atlaskit/field-text": "4.0.1", + "@atlaskit/field-text-area": "1.2.0", "@atlaskit/flag": "6.1.0", "@atlaskit/icon": "10.0.0", "@atlaskit/inline-dialog": "5.0.2", "@atlaskit/inline-message": "3.0.1", + "@atlaskit/layer-manager": "2.8.0", "@atlaskit/lozenge": "3.4.2", - "@atlaskit/modal-dialog": "2.6.0", + "@atlaskit/modal-dialog": "3.4.0", "@atlaskit/multi-select": "7.1.3", "@atlaskit/spinner": "4.0.0", "@atlaskit/tabs": "4.0.1", - "@atlaskit/theme": "2.2.0", + "@atlaskit/theme": "2.4.0", "@atlaskit/tooltip": "6.0.0", "autosize": "1.18.13", "es6-iterator": "2.0.3", @@ -71,7 +73,7 @@ "redux-thunk": "2.2.0", "strophe.js": "github:jitsi/strophejs#1.2.14-1", "strophejs-plugin-disco": "0.0.2", - "styled-components": "1.3.0", + "styled-components": "1.4.6", "url-polyfill": "github:github/url-polyfill#39734186de44612bc5a16eb25f5407adcc5b2e7c", "uuid": "3.1.0", "xmldom": "0.1.27" diff --git a/react/features/base/dialog/components/StatelessDialog.web.js b/react/features/base/dialog/components/StatelessDialog.web.js index 161df3744..49aa4790f 100644 --- a/react/features/base/dialog/components/StatelessDialog.web.js +++ b/react/features/base/dialog/components/StatelessDialog.web.js @@ -1,9 +1,10 @@ // @flow import Button, { ButtonGroup } from '@atlaskit/button'; -import ModalDialog from '@atlaskit/modal-dialog'; -import { AtlasKitThemeProvider } from '@atlaskit/theme'; +import { withContextFromProps } from '@atlaskit/layer-manager'; +import Modal, { ModalFooter } from '@atlaskit/modal-dialog'; import _ from 'lodash'; +import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../i18n'; @@ -30,6 +31,8 @@ const OK_BUTTON_ID = 'modal-dialog-ok-button'; type Props = { ...DialogProps, + i18n: Object, + /** * Disables dismissing the dialog when the blanket is clicked. Enabled * by default. @@ -57,10 +60,26 @@ type Props = { width: string }; +/** + * ContexTypes is used as a workaround for Atlaskit's modal being displayed + * outside of the normal App hierarchy, thereby losing context. ContextType + * is responsible for taking its props and passing them into children. + * + * @type {ReactElement} + */ +const ContextProvider = withContextFromProps({ + i18n: PropTypes.object +}); + /** * Web dialog that uses atlaskit modal-dialog to display dialogs. */ class StatelessDialog extends Component { + /** + * The functional component to be used for rendering the modal footer. + */ + _Footer: ?Function + _dialogElement: ?HTMLElement; /** @@ -78,30 +97,24 @@ class StatelessDialog extends Component { this._onKeyDown = this._onKeyDown.bind(this); this._onSubmit = this._onSubmit.bind(this); this._setDialogElement = this._setDialogElement.bind(this); + + this._Footer = this._createFooterConstructor(props); } /** - * React Component method that executes once component is mounted. + * React Component method that executes before the component is updated. * * @inheritdoc - */ - componentDidMount() { - this._updateButtonFocus(); - } - - /** - * React Component method that executes once component is updated. - * - * @param {Object} prevProps - The previous properties, before the update. + * @param {Object} nextProps - The next properties, before the update. * @returns {void} */ - componentDidUpdate(prevProps) { - // if there is an update in any of the buttons enable/disable props - // update the focus if needed - if (prevProps.okDisabled !== this.props.okDisabled - || prevProps.cancelDisabled !== this.props.cancelDisabled - || prevProps.submitDisabled !== this.props.submitDisabled) { - this._updateButtonFocus(); + componentWillUpdate(nextProps) { + // If button states have changed, update the Footer constructor function + // so buttons of the proper state are rendered. + if (nextProps.okDisabled !== this.props.okDisabled + || nextProps.cancelDisabled !== this.props.cancelDisabled + || nextProps.submitDisabled !== this.props.submitDisabled) { + this._Footer = this._createFooterConstructor(nextProps); } } @@ -112,36 +125,86 @@ class StatelessDialog extends Component { * @returns {ReactElement} */ render() { - return ( + const { + children, + t /* The following fixes a flow error: */ = _.identity, + titleString, + titleKey, + width + } = this.props; - /** - * Enabled light theme for dialogs until all in-dialog components - * support dark theme. - */ - -
- -
- -
- -
- + return ( + + { + + /** + * Wrapping the contents of {@link Modal} with + * {@link ContextProvider} is a workaround for the + * i18n context becoming undefined as modal gets rendered + * outside of the normal react app context. + */ + } + +
+ +
+ + ); } + _onCancel: () => Function; + + /** + * Returns a functional component to be used for the modal footer. + * + * @param {Object} options - The configuration for how the buttons in the + * footer should display. Essentially {@code StatelessDialog} props should + * be passed in. + * @private + * @returns {ReactElement} + */ + _createFooterConstructor(options) { + // Filter out falsy (null) values because {@code ButtonGroup} will error + // if passed in anything but buttons with valid type props. + const buttons = [ + this._renderOKButton(options), + this._renderCancelButton(options) + ].filter(Boolean); + + return function Footer(modalFooterProps) { + return ( + + { + + /** + * Atlaskit has this empty span (JustifySim) so... + */ + } + + + { buttons } + + + ); + }; + } + _onCancel: () => void; /** @@ -188,11 +251,19 @@ class StatelessDialog extends Component { /** * Renders Cancel button. * + * @param {Object} options - The configuration for the Cancel button. + * @param {boolean} options.cancelDisabled - True if the cancel button + * should not be rendered. + * @param {string} options.cancelTitleKey - The translation key to use as + * text on the button. + * @param {boolean} options.isModal - True if the cancel button should not + * be rendered. * @private - * @returns {*} The Cancel button if enabled and dialog is not modal. + * @returns {ReactElement|null} The Cancel button if enabled and dialog is + * not modal. */ - _renderCancelButton() { - if (this.props.cancelDisabled || this.props.isModal) { + _renderCancelButton(options = {}) { + if (options.cancelDisabled || options.isModal) { return null; } @@ -207,62 +278,26 @@ class StatelessDialog extends Component { key = 'cancel' onClick = { this._onCancel } type = 'button'> - { t(this.props.cancelTitleKey || 'dialog.Cancel') } + { t(options.cancelTitleKey || 'dialog.Cancel') } ); } - /** - * Renders component in dialog footer. - * - * @private - * @returns {ReactElement} - */ - _renderFooter() { - // Filter out falsy (null) values because {@code ButtonGroup} will error - // if passed in anything but buttons with valid type props. - const buttons = [ - this._renderCancelButton(), - this._renderOKButton() - ].filter(Boolean); - - return ( -
- - { buttons } - -
- ); - } - - /** - * Renders component in dialog header. - * - * @private - * @returns {ReactElement} - */ - _renderHeader() { - const { - t /* The following fixes a flow error: */ = _.identity - } = this.props; - - return ( -
-

- { this.props.titleString || t(this.props.titleKey) } -

-
- ); - } - /** * Renders OK button. * + * @param {Object} options - The configuration for the OK button. + * @param {boolean} options.okDisabled - True if the button should display + * as disabled and clicking should have no effect. + * @param {string} options.okTitleKey - The translation key to use as text + * on the button. + * @param {boolean} options.submitDisabled - True if the button should not + * be rendered. * @private - * @returns {*} The OK button if enabled. + * @returns {ReactElement|null} The OK button if enabled. */ - _renderOKButton() { - if (this.props.submitDisabled) { + _renderOKButton(options = {}) { + if (options.submitDisabled) { return null; } @@ -275,11 +310,11 @@ class StatelessDialog extends Component { appearance = 'primary' form = 'modal-dialog-form' id = { OK_BUTTON_ID } - isDisabled = { this.props.okDisabled } + isDisabled = { options.okDisabled } key = 'submit' onClick = { this._onSubmit } type = 'button'> - { t(this.props.okTitleKey || 'dialog.Ok') } + { t(options.okTitleKey || 'dialog.Ok') } ); } @@ -327,40 +362,6 @@ class StatelessDialog extends Component { } } } - - /** - * Updates focused button, if we have a reference to the dialog element. - * Focus on available button if there is no focus already. - * - * @private - * @returns {void} - */ - _updateButtonFocus() { - const dialogElement = this._dialogElement; - - if (dialogElement) { - - // if we have a focused element inside the dialog, skip changing - // the focus - if (dialogElement.contains(document.activeElement)) { - return; - } - - let buttonToFocus; - - if (this.props.submitDisabled) { - buttonToFocus - = dialogElement.querySelector(`[id=${CANCEL_BUTTON_ID}]`); - } else if (!this.props.okDisabled) { - buttonToFocus - = dialogElement.querySelector(`[id=${OK_BUTTON_ID}]`); - } - - if (buttonToFocus) { - buttonToFocus.focus(); - } - } - } } export default translate(StatelessDialog); diff --git a/react/features/device-selection/DeviceSelectionPopup.js b/react/features/device-selection/DeviceSelectionPopup.js index 98a5a0b2f..d6616b30f 100644 --- a/react/features/device-selection/DeviceSelectionPopup.js +++ b/react/features/device-selection/DeviceSelectionPopup.js @@ -1,5 +1,6 @@ /* global JitsiMeetJS */ +import { AtlasKitThemeProvider } from '@atlaskit/theme'; import Logger from 'jitsi-meet-logger'; import React from 'react'; import ReactDOM from 'react-dom'; @@ -234,7 +235,9 @@ export default class DeviceSelectionPopup { ReactDOM.render( - + + + , document.getElementById('react')); } diff --git a/react/features/feedback/components/FeedbackDialog.web.js b/react/features/feedback/components/FeedbackDialog.web.js index 5d6341b3f..e929dd0bd 100644 --- a/react/features/feedback/components/FeedbackDialog.web.js +++ b/react/features/feedback/components/FeedbackDialog.web.js @@ -1,5 +1,6 @@ /* global interfaceConfig */ +import { FieldTextAreaStateless } from '@atlaskit/field-text-area'; import StarIcon from '@atlaskit/icon/glyph/star'; import StarFilledIcon from '@atlaskit/icon/glyph/star-filled'; import PropTypes from 'prop-types'; @@ -219,12 +220,14 @@ class FeedbackDialog extends Component {
-