From 0a96772ef16351914449020fa629eb9688bbf1c4 Mon Sep 17 00:00:00 2001 From: Chris Lewis Date: Tue, 22 Aug 2017 18:01:49 -0700 Subject: [PATCH] Prepare release 1.25.2 (#1489) * [Table] Fix Table sizing when shown in flex parent (#1479) * Style fixes when table is within a display: flex container * Remove unnecessary rules * Clearer comment * Try to fix lint * Fix tests * Little CSS polishes * Prepare Release 1.25.2 * fix normalize.css version on docs site (#1478) * fix normalize.css version in site-docs * rebuild site-docs.css * Rebuild * [Table] Fix for user-land sass compilation (#1483) --- docs/blueprint-landing.js | 81 ++++--- docs/docs/site-docs.css | 224 +++++++++--------- docs/docs/site-docs.js | 79 +++--- package.json | 2 +- packages/site-docs/package.json | 6 +- packages/site-docs/yarn.lock | 6 +- packages/table/package.json | 2 +- packages/table/src/common/classes.ts | 1 + packages/table/src/quadrants/_quadrants.scss | 32 ++- .../src/quadrants/tableQuadrantStack.tsx | 2 +- packages/table/test/tableTests.tsx | 20 +- 11 files changed, 249 insertions(+), 206 deletions(-) diff --git a/docs/blueprint-landing.js b/docs/blueprint-landing.js index 9d5b149902..7c17860b76 100644 --- a/docs/blueprint-landing.js +++ b/docs/blueprint-landing.js @@ -1806,43 +1806,45 @@ var warning = emptyFunction; if (process.env.NODE_ENV !== 'production') { - var printWarning = function printWarning(format) { - for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } - - var argIndex = 0; - var message = 'Warning: ' + format.replace(/%s/g, function () { - return args[argIndex++]; - }); - if (typeof console !== 'undefined') { - console.error(message); - } - try { - // --- Welcome to debugging React --- - // This error was thrown as a convenience so that you can use this stack - // to find the callsite that caused this warning to fire. - throw new Error(message); - } catch (x) {} - }; + (function () { + var printWarning = function printWarning(format) { + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } - warning = function warning(condition, format) { - if (format === undefined) { - throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); - } + var argIndex = 0; + var message = 'Warning: ' + format.replace(/%s/g, function () { + return args[argIndex++]; + }); + if (typeof console !== 'undefined') { + console.error(message); + } + try { + // --- Welcome to debugging React --- + // This error was thrown as a convenience so that you can use this stack + // to find the callsite that caused this warning to fire. + throw new Error(message); + } catch (x) {} + }; - if (format.indexOf('Failed Composite propType: ') === 0) { - return; // Ignore CompositeComponent proptype check. - } + warning = function warning(condition, format) { + if (format === undefined) { + throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); + } - if (!condition) { - for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { - args[_key2 - 2] = arguments[_key2]; + if (format.indexOf('Failed Composite propType: ') === 0) { + return; // Ignore CompositeComponent proptype check. } - printWarning.apply(undefined, [format].concat(args)); - } - }; + if (!condition) { + for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { + args[_key2 - 2] = arguments[_key2]; + } + + printWarning.apply(undefined, [format].concat(args)); + } + }; + })(); } module.exports = warning; @@ -21757,11 +21759,18 @@ /** * Copyright (c) 2013-present, Facebook, Inc. - * All rights reserved. * - * This source code is licensed under the BSD-style license found in the - * LICENSE file in the root directory of this source tree. An additional grant - * of patent rights can be found in the PATENTS file in the same directory. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. * * @typechecks */ diff --git a/docs/docs/site-docs.css b/docs/docs/site-docs.css index 10dd51f601..29b3eaa950 100644 --- a/docs/docs/site-docs.css +++ b/docs/docs/site-docs.css @@ -7,76 +7,67 @@ and https://github.com/palantir/blueprint/blob/master/PATENTS */ /** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { - line-height: 1.15; + font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } - /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } + /** * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. */ article, aside, +details, +figcaption, +figure, footer, header, +main, +menu, nav, -section { +section, +summary { + display: block; } -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ -h1 { - font-size: 2em; - margin: 0.67em 0; } - /** * Add the correct display in IE 9-. - * 1. Add the correct display in IE. */ -figcaption, -figure, -main { - - display: block; } +audio, +canvas, +progress, +video { + display: inline-block; } /** - * Add the correct margin in IE 8. + * Add the correct display in iOS 4-7. */ -figure { - margin: 1em 40px; } +audio:not([controls]) { + display: none; + height: 0; } /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - - height: 0; - - overflow: visible; - } +progress { + vertical-align: baseline; } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. */ -pre { - font-family: monospace, monospace; - - font-size: 1em; - } +template, +[hidden] { + display: none; } /** * 1. Remove the gray background on active links in IE 10. @@ -88,7 +79,15 @@ a { -webkit-text-decoration-skip: objects; } /** - * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ +a:active, +a:hover { + outline-width: 0; } + +/** + * 1. Remove the bottom border in Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { @@ -112,22 +111,18 @@ strong { b, strong { font-weight: bolder; } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ -code, -kbd, -samp { - font-family: monospace, monospace; - - font-size: 1em; - } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; } /** * Add the correct background and color in IE 9-. */ @@ -154,18 +149,6 @@ sub { sup { top: -0.5em; } -/** - * Add the correct display in IE 9-. - */ -audio, -video { - display: inline-block; } -/** - * Add the correct display in iOS 4-7. - */ -audio:not([controls]) { - display: none; - height: 0; } /** * Remove the border on images inside links in IE 10-. */ @@ -178,22 +161,52 @@ svg:not(:root) { overflow: hidden; } /** - * 1. Change the font styles in all browsers (opinionated). + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + + font-size: 1em; + } +/** + * Add the correct margin in IE 8. + */ +figure { + margin: 1em 40px; } +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + + height: 0; + + overflow: visible; + } + +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, -optgroup, select, textarea { - font-family: sans-serif; - - font-size: 100%; - - line-height: 1.15; + font: inherit; margin: 0; } +/** + * Restore the font weight unset by the previous rule. + */ +optgroup { + font-weight: bold; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. @@ -239,10 +252,12 @@ button:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** - * Correct the padding in Firefox. + * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { - padding: 0.35em 0.75em 0.625em; } + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. @@ -263,15 +278,6 @@ legend { white-space: normal; } -/** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ -progress { - display: inline-block; - - vertical-align: baseline; - } /** * Remove the default vertical scrollbar in IE. */ @@ -304,11 +310,17 @@ textarea { outline-offset: -2px; } /** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. @@ -318,30 +330,6 @@ textarea { font: inherit; } - -details, -menu { - display: block; } - -summary { - display: list-item; } - -/** - * Add the correct display in IE 9-. - */ -canvas { - display: inline-block; } -/** - * Add the correct display in IE. - */ -template { - display: none; } - -/** - * Add the correct display in IE 10-. - */ -[hidden] { - display: none; } /** * Copyright 2015 Palantir Technologies, Inc. All rights reserved. * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy @@ -7493,6 +7481,10 @@ table.pt-table.pt-interactive tbody tr:hover td { cursor: grabbing; } .bp-table-reordering .bp-table-reordering-cursor-overlay { pointer-events: all; } +.bp-table-quadrant-stack { + display: -webkit-flex; + display: flex; + height: 100%; } .bp-table-quadrant { position: absolute; top: 0; @@ -7504,7 +7496,7 @@ table.pt-table.pt-interactive tbody tr:hover td { .bp-table-quadrant-scroll-container { -webkit-transform: translateZ(0); transform: translateZ(0); - position: absolute; + position: relative; top: 0; right: 0; bottom: 0; @@ -7521,9 +7513,15 @@ table.pt-table.pt-interactive tbody tr:hover td { .bp-table-quadrant-body-container { position: relative; } .bp-table-quadrant-main { - right: 0; - bottom: 0; - z-index: 0; } + position: relative; + top: auto; + left: auto; + z-index: 0; + width: 100%; + height: 100%; } +.bp-table-quadrant-main .bp-table-quadrant-scroll-container { + width: 100%; + height: 100%; } .bp-table-quadrant-main .bp-table-cell-client { background: #ffffff; } .bp-table-quadrant-top { @@ -7536,7 +7534,11 @@ table.pt-table.pt-interactive tbody tr:hover td { bottom: 0; z-index: 2; } .bp-table-quadrant-left .bp-table-quadrant-scroll-container { + position: absolute; + top: 0; right: -20px; + bottom: 0; + height: auto; overflow-x: hidden; } .bp-table-quadrant-top-left { z-index: 3; } diff --git a/docs/docs/site-docs.js b/docs/docs/site-docs.js index 325609a6e7..9d8444efba 100644 --- a/docs/docs/site-docs.js +++ b/docs/docs/site-docs.js @@ -25438,43 +25438,45 @@ var warning = emptyFunction; if (false) { - var printWarning = function printWarning(format) { - for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } - - var argIndex = 0; - var message = 'Warning: ' + format.replace(/%s/g, function () { - return args[argIndex++]; - }); - if (typeof console !== 'undefined') { - console.error(message); - } - try { - // --- Welcome to debugging React --- - // This error was thrown as a convenience so that you can use this stack - // to find the callsite that caused this warning to fire. - throw new Error(message); - } catch (x) {} - }; + (function () { + var printWarning = function printWarning(format) { + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } - warning = function warning(condition, format) { - if (format === undefined) { - throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); - } + var argIndex = 0; + var message = 'Warning: ' + format.replace(/%s/g, function () { + return args[argIndex++]; + }); + if (typeof console !== 'undefined') { + console.error(message); + } + try { + // --- Welcome to debugging React --- + // This error was thrown as a convenience so that you can use this stack + // to find the callsite that caused this warning to fire. + throw new Error(message); + } catch (x) {} + }; - if (format.indexOf('Failed Composite propType: ') === 0) { - return; // Ignore CompositeComponent proptype check. - } + warning = function warning(condition, format) { + if (format === undefined) { + throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument'); + } - if (!condition) { - for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { - args[_key2 - 2] = arguments[_key2]; + if (format.indexOf('Failed Composite propType: ') === 0) { + return; // Ignore CompositeComponent proptype check. } - printWarning.apply(undefined, [format].concat(args)); - } - }; + if (!condition) { + for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) { + args[_key2 - 2] = arguments[_key2]; + } + + printWarning.apply(undefined, [format].concat(args)); + } + }; + })(); } module.exports = warning; @@ -76605,6 +76607,7 @@ exports.TABLE_QUADRANT_LEFT = "bp-table-quadrant-left"; exports.TABLE_QUADRANT_MAIN = "bp-table-quadrant-main"; exports.TABLE_QUADRANT_SCROLL_CONTAINER = "bp-table-quadrant-scroll-container"; + exports.TABLE_QUADRANT_STACK = "bp-table-quadrant-stack"; exports.TABLE_QUADRANT_TOP = "bp-table-quadrant-top"; exports.TABLE_QUADRANT_TOP_LEFT = "bp-table-quadrant-top-left"; exports.TABLE_REGION = "bp-table-region"; @@ -81502,7 +81505,7 @@ }; TableQuadrantStack.prototype.render = function () { var _a = this.props, grid = _a.grid, isRowHeaderShown = _a.isRowHeaderShown, renderBody = _a.renderBody; - return (React.createElement("div", null, + return (React.createElement("div", { className: Classes.TABLE_QUADRANT_STACK }, React.createElement(tableQuadrant_1.TableQuadrant, { bodyRef: this.props.bodyRef, grid: grid, isRowHeaderShown: isRowHeaderShown, onScroll: this.throttledHandleMainQuadrantScroll, onWheel: this.throttledHandleWheel, quadrantRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.MAIN].quadrant, quadrantType: tableQuadrant_1.QuadrantType.MAIN, renderBody: renderBody, renderColumnHeader: this.renderMainQuadrantColumnHeader, renderMenu: this.renderMainQuadrantMenu, renderRowHeader: this.renderMainQuadrantRowHeader, scrollContainerRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.MAIN].scrollContainer }), React.createElement(tableQuadrant_1.TableQuadrant, { grid: grid, isRowHeaderShown: isRowHeaderShown, onWheel: this.throttledHandleWheel, quadrantRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.TOP].quadrant, quadrantType: tableQuadrant_1.QuadrantType.TOP, renderBody: renderBody, renderColumnHeader: this.renderTopQuadrantColumnHeader, renderMenu: this.renderTopQuadrantMenu, renderRowHeader: this.renderTopQuadrantRowHeader, scrollContainerRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.TOP].scrollContainer }), React.createElement(tableQuadrant_1.TableQuadrant, { grid: grid, isRowHeaderShown: isRowHeaderShown, onWheel: this.throttledHandleWheel, quadrantRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.LEFT].quadrant, quadrantType: tableQuadrant_1.QuadrantType.LEFT, renderBody: renderBody, renderColumnHeader: this.renderLeftQuadrantColumnHeader, renderMenu: this.renderLeftQuadrantMenu, renderRowHeader: this.renderLeftQuadrantRowHeader, scrollContainerRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.LEFT].scrollContainer }), @@ -100655,7 +100658,7 @@ "fileName": "packages/labs/dist/common/index.d.ts", "name": "Classes", "tags": {}, - "type": "typeof \"/Volumes/git/oss/blueprint/packages/labs/dist/common/classes\"", + "type": "typeof \"/Users/clewis/Developer/blueprint-external/packages/labs/dist/common/classes\"", "properties": [ { "documentation": { @@ -100767,7 +100770,7 @@ "fileName": "packages/core/dist/common/index.d.ts", "name": "Keys", "tags": {}, - "type": "typeof \"/Volumes/git/oss/blueprint/packages/core/dist/common/keys\"", + "type": "typeof \"/Users/clewis/Developer/blueprint-external/packages/core/dist/common/keys\"", "properties": [ { "documentation": { @@ -106098,7 +106101,7 @@ "fileName": "packages/core/dist/components/index.d.ts", "name": "ContextMenu", "tags": {}, - "type": "typeof \"/Volumes/git/oss/blueprint/packages/core/dist/components/context-menu/contextMenu\"", + "type": "typeof \"/Users/clewis/Developer/blueprint-external/packages/core/dist/components/context-menu/con...", "properties": [ { "documentation": { @@ -114115,7 +114118,7 @@ }, { "name": "@blueprintjs/table", - "version": "1.22.0" + "version": "1.22.1" } ]; @@ -114124,7 +114127,7 @@ /***/ (function(module, exports) { module.exports = [ - "1.25.1" + "1.25.2" ]; /***/ }) diff --git a/package.json b/package.json index c96bae9752..94e5fc3b63 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "blueprint-monorepo", - "version": "1.25.1", + "version": "1.25.2", "private": true, "description": "A React UI toolkit for the web.", "scripts": { diff --git a/packages/site-docs/package.json b/packages/site-docs/package.json index 7358de983c..9ecd370dfb 100644 --- a/packages/site-docs/package.json +++ b/packages/site-docs/package.json @@ -1,6 +1,6 @@ { "name": "blueprintjs.com/docs", - "version": "1.25.1", + "version": "1.25.2", "description": "Blueprint Docs", "private": true, "dependencies": { @@ -8,13 +8,13 @@ "@blueprintjs/datetime": "^1.20.0", "@blueprintjs/docs": "^1.1.1", "@blueprintjs/labs": "^0.6.0", - "@blueprintjs/table": "^1.22.0", + "@blueprintjs/table": "^1.22.1", "bourbon": "^4.2.2", "chroma-js": "^1.3.4", "classnames": "^2.2.5", "dom4": "^1.8.3", "moment": "^2.18.1", - "normalize.css": "^7.0.0", + "normalize.css": "~4.1.1", "react": "^15.6.1", "react-addons-css-transition-group": "^15.6.0", "react-dom": "^15.6.1", diff --git a/packages/site-docs/yarn.lock b/packages/site-docs/yarn.lock index 2969752cfd..b5421c6fe8 100644 --- a/packages/site-docs/yarn.lock +++ b/packages/site-docs/yarn.lock @@ -96,9 +96,9 @@ node-fetch@^1.0.1: encoding "^0.1.11" is-stream "^1.0.1" -normalize.css@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf" +normalize.css@~4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-4.1.1.tgz#4f0b1d5a235383252b04d8566b866cc5fcad9f0c" object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" diff --git a/packages/table/package.json b/packages/table/package.json index 5e5665ff66..be77feccde 100644 --- a/packages/table/package.json +++ b/packages/table/package.json @@ -1,6 +1,6 @@ { "name": "@blueprintjs/table", - "version": "1.22.0", + "version": "1.22.1", "description": "Scalable interactive table component", "main": "dist/index.js", "typings": "dist/index.d.ts", diff --git a/packages/table/src/common/classes.ts b/packages/table/src/common/classes.ts index 9c81c563f8..7b0a58994c 100644 --- a/packages/table/src/common/classes.ts +++ b/packages/table/src/common/classes.ts @@ -49,6 +49,7 @@ export const TABLE_QUADRANT_BODY_CONTAINER = "bp-table-quadrant-body-container"; export const TABLE_QUADRANT_LEFT = "bp-table-quadrant-left"; export const TABLE_QUADRANT_MAIN = "bp-table-quadrant-main"; export const TABLE_QUADRANT_SCROLL_CONTAINER = "bp-table-quadrant-scroll-container"; +export const TABLE_QUADRANT_STACK = "bp-table-quadrant-stack"; export const TABLE_QUADRANT_TOP = "bp-table-quadrant-top"; export const TABLE_QUADRANT_TOP_LEFT = "bp-table-quadrant-top-left"; export const TABLE_REGION = "bp-table-region"; diff --git a/packages/table/src/quadrants/_quadrants.scss b/packages/table/src/quadrants/_quadrants.scss index 238f30b29f..85fcf943a1 100644 --- a/packages/table/src/quadrants/_quadrants.scss +++ b/packages/table/src/quadrants/_quadrants.scss @@ -1,6 +1,6 @@ -@import "../../core/src/common/mixins"; -@import "./common/variables"; +@import "~@blueprintjs/core/src/common/mixins"; +@import "../common/variables"; $table-quadrant-z-index-main: 0; $table-quadrant-z-index-top: $table-quadrant-z-index-main + 1; @@ -12,6 +12,11 @@ $table-quadrant-z-index-top-left: $table-quadrant-z-index-left + 1; // overflow within their parents; it should be large enough to hide a scrollbar of typical width. $table-quadrant-scroll-container-overflow: 20px; +.bp-table-quadrant-stack { + display: flex; + height: 100%; +} + .bp-table-quadrant { position: absolute; top: 0; @@ -26,7 +31,7 @@ $table-quadrant-scroll-container-overflow: 20px; .bp-table-quadrant-scroll-container { @include force-hardware-acceleration(); - position: absolute; + position: relative; top: 0; right: 0; bottom: 0; @@ -51,9 +56,22 @@ $table-quadrant-scroll-container-overflow: 20px; } .bp-table-quadrant-main { - right: 0; - bottom: 0; + // use `relative` to ensure the table can size itself according to the MAIN quadrant's contents alone. + // other quadrants should remain `absolute` to ensure they're taken out of the document flow. + position: relative; + top: auto; + left: auto; z-index: $table-quadrant-z-index-main; + // the MAIN quadrant should fill the whole table so that ghost cells will be visible if enabled + width: 100%; + height: 100%; + + .bp-table-quadrant-scroll-container { + // the MAIN quadrant's scroll bars should be visible and should be flush with the right and + // bottom edges of the table. + width: 100%; + height: 100%; + } .bp-table-cell-client { background: $white; @@ -75,7 +93,11 @@ $table-quadrant-scroll-container-overflow: 20px; z-index: $table-quadrant-z-index-left; .bp-table-quadrant-scroll-container { + position: absolute; + top: 0; right: -$table-quadrant-scroll-container-overflow; + bottom: 0; + height: auto; overflow-x: hidden; } } diff --git a/packages/table/src/quadrants/tableQuadrantStack.tsx b/packages/table/src/quadrants/tableQuadrantStack.tsx index 07360019a8..fcd61c1629 100644 --- a/packages/table/src/quadrants/tableQuadrantStack.tsx +++ b/packages/table/src/quadrants/tableQuadrantStack.tsx @@ -212,7 +212,7 @@ export class TableQuadrantStack extends AbstractComponent +
", () => { }); describe("Quadrants", () => { + // constrain the container to a smaller size to force scrolling + const CONTAINER_HEIGHT = 500; + const CONTAINER_WIDTH = 500; + const NUM_ROWS = 5; const NUM_COLUMNS = 5; const NUM_FROZEN_ROWS = 1; @@ -562,13 +566,15 @@ describe("", () => { document.body.appendChild(containerElement); const tableComponent = ReactDOM.render( -
- {renderColumns({}, LARGE_NUM_COLUMNS)} -
, +
+ + {renderColumns({}, LARGE_NUM_COLUMNS)} +
+
, containerElement, ) as Table;