Rename bp-table -> pt-table. Upgrade script updates (#1906)

* Add more renames to script * Add warning for common strings * Only rename full pt-file-upload classname * Run script over packages * Add features page back to dev preview dist * Fix features preview * Just kidding -- include CSS * Rename pt-table -> pt-html-table * renderName -> nameRenderer. Review docs, fix old references * PR comments * pt-striped -> pt-html-table-striped. pt-borderer -> pt-html-table-bordered. script comment * renderMenu -> menuRenderer * lint * Add other prefixes to rename script for protected abstract members * Extract const
palantir · Dec 14, 2017 · eb09739 · eb09739 · blueprint-bot · Dec 14, 2017
1 parent 503b7c5
commit eb09739
Show file tree

Hide file tree

Showing 37 changed files with 481 additions and 416 deletions.
diff --git a/packages/core/src/common/_color-aliases.scss b/packages/core/src/common/_color-aliases.scss
@@ -7,7 +7,7 @@ Color aliases
 These variables are semantic aliases of our [colors](#colors). They are used throughout Blueprint
 itself to ensure consistent color usage across components.
 
-<table class=pt-table>
+<table class="pt-html-table">
   <thead>
     <tr>
       <th></th>

diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts
@@ -74,8 +74,13 @@ export const ELEVATION_2 = "pt-elevation-2";
 export const ELEVATION_3 = "pt-elevation-3";
 export const ELEVATION_4 = "pt-elevation-4";
 
+export const HTML_TABLE = "pt-html-table";
+export const HTML_TABLE_STRIPED = "pt-html-table-striped";
+export const HTML_TABLE_BORDERED = "pt-html-table-bordered";
+
 export const INPUT = "pt-input";
 export const INPUT_GROUP = "pt-input-group";
+
 export const CHECKBOX = "pt-checkbox";
 export const RADIO = "pt-radio";
 export const SWITCH = "pt-switch";
@@ -156,10 +161,6 @@ export const TAB_LIST = "pt-tab-list";
 export const TAB_PANEL = "pt-tab-panel";
 export const TABS = "pt-tabs";
 
-export const TABLE = "pt-table";
-export const TABLE_STRIPED = "pt-striped";
-export const TABLE_BORDERED = "pt-bordered";
-
 export const TAG = "pt-tag";
 export const TAG_REMOVABLE = "pt-tag-removable";
 export const TAG_REMOVE = "pt-tag-remove";

diff --git a/packages/core/src/components/table/_table.scss b/packages/core/src/components/table/_table.scss
@@ -7,7 +7,7 @@
 Tables
 
 Markup:
-<table class="pt-table {{.modifier}}">
+<table class="pt-html-table {{.modifier}}">
   <thead>
     <tr>
       <th>Project</th>
@@ -35,11 +35,11 @@ Markup:
 </table>
 
 .pt-small - Small, condensed appearance
-.pt-striped   - Striped appearance
-.pt-bordered  - Bordered appearance
+.pt-html-table-striped   - Striped appearance
+.pt-html-table-bordered  - Bordered appearance
 .pt-interactive  - Enables hover styles on rows
 
-Styleguide pt-table
+Styleguide pt-html-table
 */
 
 $table-row-height: $pt-grid-size * 4 !default;
@@ -48,7 +48,7 @@ $table-border-width: 1px !default;
 $table-border-color: $pt-divider-black !default;
 $dark-table-border-color: $pt-dark-divider-white !default;
 
-table.pt-table {
+table.pt-html-table {
   border-spacing: 0;
   font-size: $pt-font-size;
 
@@ -82,14 +82,14 @@ table.pt-table {
     }
   }
 
-  &.pt-striped {
+  &.pt-html-table-striped {
     tbody tr:nth-child(odd) td {
       background: rgba($gray5, 0.2);
     }
   }
 
   // Borders are applied as box-shadows (at the top and left borders of a cell) for better color control.
-  &.pt-bordered {
+  &.pt-html-table-bordered {
     th:not(:first-child) {
       box-shadow: inset $table-border-width 0 0 0 $table-border-color;
     }
@@ -102,7 +102,7 @@ table.pt-table {
       }
     }
 
-    &.pt-striped {
+    &.pt-html-table-striped {
       tbody tr:not(:first-child) td {
         box-shadow: none;
 
@@ -136,14 +136,14 @@ table.pt-table {
       box-shadow: inset 0 $table-border-width 0 0 $dark-table-border-color;
     }
 
-    &.pt-striped {
+    &.pt-html-table-striped {
       tbody tr:nth-child(odd) td {
         background: rgba($gray1, 0.15);
       }
     }
 
     // Borders are applied as box-shadows (at the top and left borders of a cell) for better color control.
-    &.pt-bordered {
+    &.pt-html-table-bordered {
       th:not(:first-child) {
         box-shadow: inset $table-border-width 0 0 0 $dark-table-border-color;
       }
@@ -156,7 +156,7 @@ table.pt-table {
         }
       }
 
-      &.pt-striped {
+      &.pt-html-table-striped {
         tbody tr:not(:first-child) td {
           box-shadow: inset $table-border-width 0 0 0 $dark-table-border-color;
 

diff --git a/packages/core/src/components/table/table.md b/packages/core/src/components/table/table.md
@@ -11,6 +11,6 @@ This component adds Blueprint styling to native HTML tables.
 
 @## CSS API
 
-Apply the `pt-table` class to a `<table>` element. You can apply modifiers as additional classes.
+Apply the `pt-html-table` class to a `<table>` element. You can apply modifiers as additional classes.
 
-@css pt-table
+@css pt-html-table
diff --git a/packages/docs-app/src/examples/table-examples/tableEditableExample.tsx b/packages/docs-app/src/examples/table-examples/tableEditableExample.tsx
@@ -62,7 +62,7 @@ export class TableEditableExample extends BaseExample<ITableEditableExampleState
     };
 
     public renderColumnHeader = (columnIndex: number) => {
-        const renderName = (name: string) => {
+        const nameRenderer = (name: string) => {
             return (
                 <EditableName
                     name={name}
@@ -73,7 +73,7 @@ export class TableEditableExample extends BaseExample<ITableEditableExampleState
                 />
             );
         };
-        return <ColumnHeaderCell name={this.state.columnNames[columnIndex]} renderName={renderName} />;
+        return <ColumnHeaderCell name={this.state.columnNames[columnIndex]} nameRenderer={nameRenderer} />;
     };
 
     private isValidValue(value: string) {

diff --git a/packages/docs-app/src/examples/table-examples/tableSortableExample.tsx b/packages/docs-app/src/examples/table-examples/tableSortableExample.tsx
@@ -38,8 +38,8 @@ abstract class AbstractSortableColumn implements ISortableColumn {
         const cellRenderer = (rowIndex: number, columnIndex: number) => (
             <Cell>{getCellData(rowIndex, columnIndex)}</Cell>
         );
-        const renderMenu = this.renderMenu.bind(this, sortColumn);
-        const columnHeaderCellRenderer = () => <ColumnHeaderCell name={this.name} renderMenu={renderMenu} />;
+        const menuRenderer = this.renderMenu.bind(this, sortColumn);
+        const columnHeaderCellRenderer = () => <ColumnHeaderCell name={this.name} menuRenderer={menuRenderer} />;
         return (
             <Column
                 cellRenderer={cellRenderer}

diff --git a/packages/docs-app/src/styles/_sections.scss b/packages/docs-app/src/styles/_sections.scss
@@ -35,7 +35,7 @@
 
 // CSS examples
 
-#{reference("pt-file-upload")},
+#{reference("pt-file-input")},
 #{reference("pt-label")},
 #{reference("pt-menu")},
 #{reference("pt-select.pt-inline")},
@@ -258,7 +258,7 @@
 
 // give all Table examples a fixed height
 [data-page-id="table-js"] {
-  .bp-table-container,
+  .pt-table-container,
   .docs-react-example {
     width: 100%;
     height: $pt-grid-size * 30;

diff --git a/packages/docs/src/components/interfaceTable.tsx b/packages/docs/src/components/interfaceTable.tsx
@@ -96,7 +96,7 @@ export const InterfaceTable: React.SFC<IInterfaceTableProps> = ({ iface, props,
         <div className="docs-modifiers">
             <div className="docs-interface-name">{iface.name}</div>
             {renderContentsBlock(iface.documentation.contents, tagRenderers)}
-            <table className="pt-table">
+            <table className="pt-html-table">
                 <thead>
                     <tr>
                         <th>Prop</th>

diff --git a/packages/docs/src/components/modifierTable.tsx b/packages/docs/src/components/modifierTable.tsx
@@ -21,7 +21,7 @@ function renderModifier(modifier: IKssModifier, index: number) {
 
 export const ModifierTable: React.SFC<{ modifiers: IKssModifier[] }> = ({ modifiers }) => (
     <div className="docs-modifiers">
-        <table className="pt-table">
+        <table className="pt-html-table">
             <thead>
                 <tr>
                     <th>Modifier</th>

diff --git a/packages/docs/src/styles/_overrides.scss b/packages/docs/src/styles/_overrides.scss
@@ -1,7 +1,7 @@
 // Copyright 2017 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the terms of the LICENSE file distributed with this project.
 
-.pt-table {
+.pt-html-table {
   width: 100%;
 }
 

diff --git a/packages/table-dev-app/src/features.html b/packages/table-dev-app/src/features.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Blueprint Table - Features (Legacy)</title>
-  <link rel="stylesheet" type="text/css" href="dist/features.css">
+  <link rel="stylesheet" type="text/css" href="features.css">
   <style>
     body {
       padding: 80px 20px 20px 20px;
@@ -32,11 +32,11 @@
       height: 300px;
     }
 
-    #table-6 .bp-table-header-content h4 {
+    #table-6 .pt-table-header-content h4 {
       margin: 10px 0 0 10px;
     }
 
-    #table-6 .bp-table-header-content p {
+    #table-6 .pt-table-header-content p {
       padding: 10px 10px 0;
     }
 
@@ -144,6 +144,6 @@ <h4>Reorderable Rows and Columns</h4>
   <div id="table-10"></div>
   <br /><br />
 
-  <script src="dist/features.bundle.js"></script>
+  <script src="features.bundle.js"></script>
 </body>
 </html>
diff --git a/packages/table-dev-app/src/features.tsx b/packages/table-dev-app/src/features.tsx
@@ -206,7 +206,7 @@ class EditableTable extends React.Component<{}, IEditableTableState> {
     };
 
     public renderColumnHeader = (columnIndex: number) => {
-        const renderName = (name: string) => {
+        const nameRenderer = (name: string) => {
             return (
                 <EditableName
                     name={name}
@@ -219,9 +219,9 @@ class EditableTable extends React.Component<{}, IEditableTableState> {
         };
         return (
             <ColumnHeaderCell
-                renderMenu={renderTestMenu}
+                menuRenderer={renderTestMenu}
                 name={this.state.names[columnIndex]}
-                renderName={renderName}
+                nameRenderer={nameRenderer}
             />
         );
     };
@@ -367,7 +367,7 @@ class RowSelectableTable extends React.Component<{}, {}> {
 
 ReactDOM.render(<RowSelectableTable />, document.getElementById("table-select-rows"));
 
-document.getElementById("table-ledger").classList.add("bp-table-striped");
+document.getElementById("table-ledger").classList.add("pt-table-striped");
 
 ReactDOM.render(getTableComponent(3, 7, {}, { className: "" }), document.getElementById("table-ledger"));
 
@@ -523,7 +523,7 @@ ReactDOM.render(
                 return (
                     <ColumnHeaderCell
                         name={`${alpha} Column with a substantially long header name`}
-                        renderMenu={renderTestMenu}
+                        menuRenderer={renderTestMenu}
                     >
                         <h4>Header {alpha}</h4>
                         <p>Whatever interactive header content goes here lorem ipsum.</p>
@@ -533,7 +533,7 @@ ReactDOM.render(
         },
         {
             renderRowHeaderCell: (rowIndex: number) => {
-                return <RowHeaderCell name={`${rowIndex + 1}`} renderMenu={renderTestMenu} />;
+                return <RowHeaderCell name={`${rowIndex + 1}`} menuRenderer={renderTestMenu} />;
             },
         },
     ),

diff --git a/packages/table-dev-app/src/mutableTable.tsx b/packages/table-dev-app/src/mutableTable.tsx
@@ -399,8 +399,8 @@ export class MutableTable extends React.Component<{}, IMutableTableState> {
             <ColumnHeaderCell
                 index={columnIndex}
                 name={this.store.getColumnName(columnIndex)}
-                renderMenu={this.state.showColumnMenus ? this.renderColumnMenu : undefined}
-                renderName={this.getColumnNameRenderer()}
+                menuRenderer={this.state.showColumnMenus ? this.renderColumnMenu : undefined}
+                nameRenderer={this.getColumnNameRenderer()}
             />
         );
     };
@@ -468,7 +468,7 @@ export class MutableTable extends React.Component<{}, IMutableTableState> {
     };
 
     private renderRowHeader = (rowIndex: number) => {
-        return <RowHeaderCell index={rowIndex} name={`${rowIndex + 1}`} renderMenu={this.renderRowMenu} />;
+        return <RowHeaderCell index={rowIndex} name={`${rowIndex + 1}`} menuRenderer={this.renderRowMenu} />;
     };
 
     private renderRowMenu = (rowIndex: number) => {

diff --git a/packages/table-dev-app/webpack.config.js b/packages/table-dev-app/webpack.config.js
@@ -29,6 +29,7 @@ module.exports = Object.assign({}, baseConfig, {
         new CopyWebpackPlugin([
             // to: is relative to dist/
             { from: "src/index.html", to: "." },
+            { from: "src/features.html", to: "." },
         ])
     ]),
 });