diff --git a/packages/datetime/package.json b/packages/datetime/package.json index 8b617321d9..61ec498328 100644 --- a/packages/datetime/package.json +++ b/packages/datetime/package.json @@ -46,6 +46,7 @@ "react-dom": "^15.3.0 || 16 || 17" }, "devDependencies": { + "@blueprintjs/colors": "^5.0.0-alpha.0", "@blueprintjs/karma-build-scripts": "^2.0.2", "@blueprintjs/node-build-scripts": "^1.6.0", "@blueprintjs/test-commons": "^0.10.13", diff --git a/packages/datetime/src/blueprint-datetime-modern.scss b/packages/datetime/src/blueprint-datetime-modern.scss new file mode 100644 index 0000000000..04e133f483 --- /dev/null +++ b/packages/datetime/src/blueprint-datetime-modern.scss @@ -0,0 +1,62 @@ +@import "~@blueprintjs/colors/lib/scss/colors"; + +$datepicker-day-background-color-hover: rgba($gray3, 0.15); +$datepicker-day-background-color-active: rgba($gray3, 0.3); +$dark-datepicker-day-background-color-hover: rgba($gray3, 0.15); +$dark-datepicker-day-background-color-active: rgba($gray3, 0.3); +$daterangepicker-range-background-color: rgba($blue3, 0.1); +$daterangepicker-range-background-color-selected: rgba($blue3, 0.1); +$daterangepicker-range-background-color-selected-hover: rgba($blue3, 0.2); +$dark-daterangepicker-range-background-color: rgba($blue3, 0.2); +$dark-daterangepicker-range-background-color-selected: rgba($blue3, 0.2); +$dark-daterangepicker-range-background-color-selected-hover: rgba($blue3, 0.4); + +@import "./blueprint-datetime"; + +/* stylelint-disable selector-class-pattern */ + +.#{$ns}-datepicker, .#{$ns}-daterangepicker { + .DayPicker-Day { + &.DayPicker-Day--selected { + &:active { + background-color: $blue1; + } + + .#{$ns}-dark & { + &:hover { + background-color: $blue2; + } + + &:active { + background-color: $blue1; + } + } + } + } +} + +.#{$ns}-daterangepicker { + .DayPicker-Day { + &--hovered-range { + color: $blue2; + } + + &--selected-range { + color: $blue2; + + &:hover { + color: $blue2; + } + } + + .#{$ns}-dark & { + &--hovered-range { + color: $light-gray5; + } + + &--selected-range { + color: $light-gray5; + } + } + } +} diff --git a/packages/demo-app/src/examples/DatePickerExample.tsx b/packages/demo-app/src/examples/DatePickerExample.tsx new file mode 100644 index 0000000000..b9e2502722 --- /dev/null +++ b/packages/demo-app/src/examples/DatePickerExample.tsx @@ -0,0 +1,30 @@ +/* Copyright 2020 Palantir Technologies, Inc. All rights reserved. + +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.*/ + +import * as React from "react"; + +import { Classes } from "@blueprintjs/core"; +import { DatePicker } from "@blueprintjs/datetime"; + +import { ExampleCard } from "./ExampleCard"; + +const WIDTH = 300; +export const DatePickerExample = React.memo(() => { + return ( + + + + ); +}); +DatePickerExample.displayName = "DatePickerExample"; diff --git a/packages/demo-app/src/examples/DateRangePickerExample.tsx b/packages/demo-app/src/examples/DateRangePickerExample.tsx new file mode 100644 index 0000000000..1c6bc66744 --- /dev/null +++ b/packages/demo-app/src/examples/DateRangePickerExample.tsx @@ -0,0 +1,29 @@ +/* Copyright 2020 Palantir Technologies, Inc. All rights reserved. + +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.*/ + +import * as React from "react"; + +import { Classes } from "@blueprintjs/core"; +import { DateRangePicker } from "@blueprintjs/datetime"; + +import { ExampleCard } from "./ExampleCard"; + +export const DateRangePickerExample = React.memo(() => { + return ( + + + + ); +}); +DateRangePickerExample.displayName = "DateRangerPickerExample"; diff --git a/packages/demo-app/src/examples/Examples.tsx b/packages/demo-app/src/examples/Examples.tsx index 8f655fa8ac..4aa34019b5 100644 --- a/packages/demo-app/src/examples/Examples.tsx +++ b/packages/demo-app/src/examples/Examples.tsx @@ -21,6 +21,8 @@ import { BreadcrumbExample } from "./BreadcrumbExample"; import { ButtonExample } from "./ButtonExample"; import { CalloutExample } from "./CalloutExample"; import { CheckboxRadioExample } from "./CheckboxRadioExample"; +import { DatePickerExample } from "./DatePickerExample"; +import { DateRangePickerExample } from "./DateRangePickerExample"; import { DialogExample } from "./DialogExample"; import { EditableTextExample } from "./EditableTextExample"; import { HtmlCodeExample } from "./HtmlCodeExample"; @@ -30,6 +32,7 @@ import { InputExample } from "./InputExample"; import { MenuExample } from "./MenuExample"; import { SliderExample } from "./SliderExample"; import { SwitchExample } from "./SwitchExample"; +import { TableExample } from "./TableExample"; import { TabsExample } from "./TabsExample"; import { TagExample } from "./TagExample"; import { TextExample } from "./TextExample"; @@ -45,7 +48,8 @@ export class Examples extends React.PureComponent { - {/* Add DatePickerExample */} + + @@ -55,7 +59,7 @@ export class Examples extends React.PureComponent { - {/* Add TableExample */} + diff --git a/packages/demo-app/src/examples/TableExample.tsx b/packages/demo-app/src/examples/TableExample.tsx new file mode 100644 index 0000000000..ec19cf130a --- /dev/null +++ b/packages/demo-app/src/examples/TableExample.tsx @@ -0,0 +1,53 @@ +/* Copyright 2020 Palantir Technologies, Inc. All rights reserved. + +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.*/ + +import * as React from "react"; + +import { Cell, Column, ColumnHeaderCell, Table2 } from "@blueprintjs/table"; + +import { ExampleCard } from "./ExampleCard"; + +const WIDTH = 600; +export const TableExample = React.memo(() => { + const cellRenderer = React.useCallback( + (rowIndex: number, columnIndex: number) => {`${rowIndex}, ${columnIndex}`}, + [], + ); + const columnHeaderCellRenderer = React.useCallback( + (index: number) => , + [], + ); + return ( + + + + + + + + ); +}); +TableExample.displayName = "TableExample"; diff --git a/packages/demo-app/src/index.scss b/packages/demo-app/src/index.scss index 180f5e730d..97118393e4 100644 --- a/packages/demo-app/src/index.scss +++ b/packages/demo-app/src/index.scss @@ -1,4 +1,6 @@ @import "~@blueprintjs/core/lib/css/blueprint-modern.css"; +@import "~@blueprintjs/datetime/lib/css/blueprint-datetime-modern.css"; +@import "~@blueprintjs/table/lib/css/table-modern.css"; @import "~@blueprintjs/popover2/lib/css/blueprint-popover2.css"; @import "./styles/examples"; diff --git a/packages/table/package.json b/packages/table/package.json index 0f9a335561..9ec44862c8 100644 --- a/packages/table/package.json +++ b/packages/table/package.json @@ -46,6 +46,7 @@ "react-dom": "^15.3.0 || 16 || 17" }, "devDependencies": { + "@blueprintjs/colors": "^5.0.0-alpha.0", "@blueprintjs/node-build-scripts": "^1.6.0", "@blueprintjs/test-commons": "^0.10.13", "enzyme": "^3.11.0", diff --git a/packages/table/src/table-modern.scss b/packages/table/src/table-modern.scss new file mode 100644 index 0000000000..789f2cce25 --- /dev/null +++ b/packages/table/src/table-modern.scss @@ -0,0 +1,7 @@ +@import "~@blueprintjs/colors/lib/scss/colors"; +@import "./table"; + +.#{$ns}-dark & .#{$ns}-table-selection-region { + background-color: rgba($blue4, 0.1); + border: $cell-border-width solid $blue4; +}