Skip to content

Commit

Permalink
update dialog component to use new spacing grid
Browse files Browse the repository at this point in the history
  • Loading branch information
Ana Belciug committed Oct 4, 2021
1 parent 1e4b8a0 commit f044f5b
Show file tree
Hide file tree
Showing 40 changed files with 55 additions and 45 deletions.
4 changes: 4 additions & 0 deletions UNRELEASED.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
**Breaking:**

- bpk-component-dialog:
- Updating the dialog component to use the new spacing grid. This component will now appear larger so should be checked this does not alter layout.
2 changes: 1 addition & 1 deletion packages/bpk-animate-height/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-button": "^5.0.11"
}
}
2 changes: 1 addition & 1 deletion packages/bpk-component-accordion/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-checkbox": "^3.0.14"
}
}
2 changes: 1 addition & 1 deletion packages/bpk-component-badge/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-icon": "^9.0.14",
"bpk-storybook-utils": "^1.0.12"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-banner-alert/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-animate-height": "^4.0.12",
"bpk-component-close-button": "^3.0.14",
"bpk-component-icon": "^9.0.14",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-barchart/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-mobile-scroll-container": "^3.0.13",
"bpk-mixins": "^24.0.0",
"bpk-react-utils": "^4.0.1",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-breakpoint/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0"
"@skyscanner/bpk-foundations-web": "^4.0.0"
}
}
2 changes: 1 addition & 1 deletion packages/bpk-component-calendar/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-aria-live": "^2.0.22",
"bpk-component-icon": "^9.0.14",
"bpk-component-select": "^5.0.7",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-checkbox/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-storybook-utils": "^1.0.12"
}
}
2 changes: 1 addition & 1 deletion packages/bpk-component-datatable/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,6 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0"
"@skyscanner/bpk-foundations-web": "^4.0.0"
}
}
2 changes: 1 addition & 1 deletion packages/bpk-component-datepicker/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-storybook-utils": "^1.0.12"
}
}
2 changes: 1 addition & 1 deletion packages/bpk-component-dialog/examples.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-paragraph{margin-bottom:.375rem}
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-paragraph{margin-bottom:0.5rem}
4 changes: 3 additions & 1 deletion packages/bpk-component-dialog/examples.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@

@import '~bpk-mixins';

$bpk-spacing-v2: true;

.bpk-dialog-paragraph {
margin-bottom: $bpk-spacing-xs;
margin-bottom: bpk-spacing-md();
}
2 changes: 1 addition & 1 deletion packages/bpk-component-dialog/src/BpkDialog.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog__container{display:flex;padding:1.5rem}@media screen\0 {.bpk-dialog__container{display:block}}.bpk-dialog__close-button{float:right;margin:0 0 .75rem .75rem}html[dir='rtl'] .bpk-dialog__close-button{float:left;margin:0 .75rem .75rem 0}.bpk-dialog--with-icon{margin-top:1.875rem}.bpk-dialog__icon{position:absolute;top:0;left:50%;display:flex;width:3.75rem;height:3.75rem;margin-top:-1.875rem;margin-left:-1.875rem;justify-content:center;align-items:center;border:2px #fff solid;border-radius:50%}.bpk-dialog__icon--primary{background-color:#00a698}.bpk-dialog__icon--warning{background-color:#ff9400}.bpk-dialog__icon--destructive{background-color:#d1435b}.bpk-dialog__icon>svg{fill:#fff}
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog__container{display:flex;padding:1.5rem}@media screen\0 {.bpk-dialog__container{display:block}}.bpk-dialog__close-button{float:right;margin:0 0 1rem 1rem}html[dir='rtl'] .bpk-dialog__close-button{float:left;margin:0 1rem 1rem 0}.bpk-dialog--with-icon{margin-top:2rem}.bpk-dialog__icon{position:absolute;top:0;left:50%;display:flex;width:4rem;height:4rem;margin-top:-2rem;margin-left:-2rem;justify-content:center;align-items:center;border:2px #fff solid;border-radius:50%}.bpk-dialog__icon--primary{background-color:#00a698}.bpk-dialog__icon--warning{background-color:#ff9400}.bpk-dialog__icon--destructive{background-color:#d1435b}.bpk-dialog__icon>svg{fill:#fff}
12 changes: 7 additions & 5 deletions packages/bpk-component-dialog/src/BpkDialog.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@

@import '~bpk-mixins/index';

$bpk-spacing-v2: true;

.bpk-dialog {
&__container {
display: flex;
padding: $bpk-spacing-base;
padding: bpk-spacing-lg();

// IE11 and below hack for buggy flexbox support
@media screen\0 {
Expand All @@ -31,20 +33,20 @@

&__close-button {
float: right;
margin: 0 0 $bpk-spacing-sm $bpk-spacing-sm;
margin: 0 0 bpk-spacing-base() bpk-spacing-base();

@include bpk-rtl {
float: left;
margin: 0 $bpk-spacing-sm $bpk-spacing-sm 0;
margin: 0 bpk-spacing-base() bpk-spacing-base() 0;
}
}

&--with-icon {
margin-top: $bpk-spacing-lg;
margin-top: bpk-spacing-xl();
}

&__icon {
$size: $bpk-spacing-lg * 2;
$size: bpk-spacing-xl() * 2;

position: absolute;
top: 0;
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-dialog/src/BpkDialogInner.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-inner{z-index:1100;width:100%;max-width:32.25rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.375rem}.bpk-dialog-inner--appear{transform:scale(0.9);opacity:0}.bpk-dialog-inner--appear-active{transform:scale(1);opacity:1}.bpk-dialog-inner__content{padding:.75rem;flex:1;overflow-y:auto}.bpk-dialog-inner__flare{height:15rem;border-radius:inherit;background-color:#0770e3}
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-dialog-inner{z-index:1100;width:100%;max-width:32.25rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;-webkit-tap-highlight-color:transparent;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25);border-radius:.375rem}.bpk-dialog-inner--appear{transform:scale(0.9);opacity:0}.bpk-dialog-inner--appear-active{transform:scale(1);opacity:1}.bpk-dialog-inner__content{padding:1rem;flex:1;overflow-y:auto}.bpk-dialog-inner__flare{height:15rem;border-radius:inherit;background-color:#0770e3}
4 changes: 3 additions & 1 deletion packages/bpk-component-dialog/src/BpkDialogInner.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@

@import '~bpk-mixins/index';

$bpk-spacing-v2: true;

.bpk-dialog-inner {
z-index: $bpk-zindex-modal;
width: 100%;
Expand Down Expand Up @@ -52,7 +54,7 @@
}

&__flare {
height: $bpk-spacing-base * 10;
height: bpk-spacing-lg() * 10;
// We inherit radius from the outer modal so they match and align correctly to the container.
border-radius: inherit;
background-color: $bpk-color-sky-blue;
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-drawer/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-close-button": "^3.0.14",
"bpk-component-icon": "^9.0.14",
"bpk-component-link": "^3.0.12",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-form-validation/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-button": "^5.0.11",
"bpk-component-checkbox": "^3.0.14",
"bpk-component-icon": "^9.0.14",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-horizontal-nav/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-text": "^4.0.14",
"bpk-storybook-utils": "^1.0.12"
}
Expand Down
4 changes: 2 additions & 2 deletions packages/bpk-component-icon/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
},
"gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-svgs": "^14.0.6",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"@skyscanner/bpk-svgs": "^14.0.8",
"bpk-mixins": "^24.0.0",
"bpk-react-utils": "^4.0.1",
"prop-types": "^15.7.2"
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-image/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-mobile-scroll-container": "^3.0.13",
"bpk-component-text": "^4.0.14"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-link/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-storybook-utils": "^1.0.12"
}
}
2 changes: 1 addition & 1 deletion packages/bpk-component-mobile-scroll-container/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0"
"@skyscanner/bpk-foundations-web": "^4.0.0"
}
}
2 changes: 1 addition & 1 deletion packages/bpk-component-navigation-bar/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-icon": "^9.0.14",
"bpk-storybook-utils": "^1.0.12"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-navigation-stack/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-mixins": "^24.0.0",
"bpk-react-utils": "^4.0.1",
"prop-types": "^15.7.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-nudger/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-button": "^5.0.11",
"bpk-component-icon": "^9.0.14",
"bpk-mixins": "^24.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-phone-input/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-input": "^6.0.21",
"bpk-component-label": "^5.0.12",
"bpk-component-select": "^5.0.7",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-progress/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-mixins": "^24.0.0",
"bpk-react-utils": "^4.0.1",
"lodash.clamp": "^4.0.3",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-radio/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-storybook-utils": "^1.0.12"
}
}
2 changes: 1 addition & 1 deletion packages/bpk-component-rating/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-text": "^4.0.14"
}
}
2 changes: 1 addition & 1 deletion packages/bpk-component-scrollable-calendar/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-calendar": "^9.0.20",
"bpk-component-text": "^4.0.14",
"bpk-mixins": "^24.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-section-list/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-icon": "^9.0.14",
"bpk-component-text": "^4.0.14",
"bpk-mixins": "^24.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-slider/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-mixins": "^24.0.0",
"bpk-react-utils": "^4.0.1",
"prop-types": "^15.7.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-spinner/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
"dependencies": {
"@skyscanner/bpk-svgs": "^14.0.6",
"@skyscanner/bpk-svgs": "^14.0.8",
"bpk-mixins": "^24.0.0",
"bpk-react-utils": "^4.0.1",
"prop-types": "^15.7.2"
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-theme-toggle/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-label": "^5.0.12",
"bpk-component-select": "^5.0.7",
"bpk-mixins": "^24.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-component-tooltip/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"react": "^16.3.0"
},
"devDependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-component-text": "^4.0.14"
}
}
4 changes: 2 additions & 2 deletions packages/bpk-mixins/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@
},
"gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-svgs": "^14.0.6"
"@skyscanner/bpk-foundations-web": "^4.0.0",
"@skyscanner/bpk-svgs": "^14.0.8"
},
"peerDependencies": {
"node-sass": "^4.12.0"
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-stylesheets/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
},
"gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"bpk-mixins": "^24.0.0",
"normalize.css": "4.2.0"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/bpk-theming/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501",
"dependencies": {
"@skyscanner/bpk-foundations-web": "^3.0.0",
"@skyscanner/bpk-foundations-web": "^4.0.0",
"prop-types": "^15.7.2"
},
"peerDependencies": {
Expand Down

0 comments on commit f044f5b

Please sign in to comment.