From 30bbb586dbff0cf24212d87b3c524a7ff4987372 Mon Sep 17 00:00:00 2001 From: James Smith Date: Thu, 7 Jun 2018 08:20:38 -0700 Subject: [PATCH 1/3] Update docs and source for next release --- docs/readmes/action-chip.md | 22 +++++++++--------- docs/readmes/elevation.md | 10 ++++---- docs/readmes/filter-chip.md | 13 ++++++----- src/action-chip/action-chip.js | 1 - src/action-chip/chip.css | 42 ++++++++++++++++++++++------------ src/choice-chip/choice-chip.js | 1 - src/elevation/elevation.js | 2 +- 7 files changed, 51 insertions(+), 40 deletions(-) diff --git a/docs/readmes/action-chip.md b/docs/readmes/action-chip.md index 228f3939..ee1aa894 100644 --- a/docs/readmes/action-chip.md +++ b/docs/readmes/action-chip.md @@ -17,14 +17,14 @@ import 'materialish/ripple.css'; ## CSS Variables -| Variable | Default Value | Description | -| ------------------------------------ | ------------------- | -------------------------------------------------------------------- | -| --mt-baseFontSize | 1rem | The text size and dimensions of the chip are based off of this value | -| --mt-fontFamily | 'Roboto' | The font family to use for the chip text | -| --mt-mainColor | #2196f3 | The colors of the chip will be based off of this value | -| --mt-chip-backgroundColor | #e0dfe0 | The background color of the chip | -| --mt-chip-backgroundColorFocus | #333 | The background color of the chip when it is focused | -| --mt-chip-backgroundColorActive | #d9edff | The background color of the chip when is active | -| --mt-chip-backgroundColorActiveFocus | --mt-mainColor | The background color of the chip when it active and focused | -| --mt-chip-textColor | rgba(0, 0, 0, 0.87) | The text color for the chip | -| --mt-chip-textColorActive | --mt-mainColor | The text color for the active chip | +| Variable | Default Value | Description | +| ------------------------------------ | ---------------------- | -------------------------------------------------------------------- | +| --mt-baseFontSize | 1rem | The text size and dimensions of the chip are based off of this value | +| --mt-fontFamily | 'Roboto' | The font family to use for the chip text | +| --mt-mainColor | #2196f3 | The colors of the chip will be based off of this value | +| --mt-chip-backgroundColor | #e0dfe0 | The background color of the chip | +| --mt-chip-backgroundColorFocus | rgb(51, 51, 51, 0.2) | The background color of the chip when it is focused | +| --mt-chip-backgroundColorActive | rgb(33, 150, 243, 0.2) | The background color of the chip when is active | +| --mt-chip-backgroundColorActiveFocus | --mt-mainColor | The background color of the chip when it active and focused | +| --mt-chip-textColor | #212121 | The text color for the chip | +| --mt-chip-textColorActive | --mt-mainColor | The text color for the active chip | diff --git a/docs/readmes/elevation.md b/docs/readmes/elevation.md index d6ad69d9..0696c0a6 100644 --- a/docs/readmes/elevation.md +++ b/docs/readmes/elevation.md @@ -7,11 +7,11 @@ import 'materialish/elevation.css'; ## Props -| Prop Name | Default Value | Required | Description | -| --------- | ------------- | -------- | ----------------------------------------------------------------------------- | -| className | | No | Additional class name(s) to add to the Elevation | -| depth | 1 | No | A value between 0 and 5 that determines the magnitude of the visual elevation | -| ...rest | | No | Other props are placed on the root element of the Avatar | +| Prop Name | Default Value | Required | Description | +| --------- | ------------- | -------- | --------------------------------------------------------------------------------------- | +| className | | No | Additional class name(s) to add to the elevation | +| depth | 1 | No | A value between 0 and 5 that represents how far from the page the element should appear | +| ...rest | | No | Other props are placed on the root element of the elevation | ## CSS Variables diff --git a/docs/readmes/filter-chip.md b/docs/readmes/filter-chip.md index cc796728..28a533ed 100644 --- a/docs/readmes/filter-chip.md +++ b/docs/readmes/filter-chip.md @@ -8,12 +8,13 @@ import 'materialish/ripple.css'; ## Props -| Prop Name | Default Value | Required | Description | -| --------- | ------------- | -------- | -------------------------------------------------------- | -| children | | No | The contents that are rendered within the chip | -| className | | No | Additional class name(s) to add to the chip | -| ripple | true | No | Whether or not to display the "ripple" effect | -| ...rest | | No | Other props are placed on the underlying `input` element | +| Prop Name | Default Value | Required | Description | +| --------- | ------------- | -------- | ---------------------------------------------------------- | +| children | | No | The contents that are rendered within the chip | +| className | | No | Additional class name(s) to add to the chip | +| ripple | true | No | Whether or not to display the "ripple" effect | +| icon | | No | A [Materialish icon](/icons) element to render in the chip | +| ...rest | | No | Other props are placed on the underlying `input` element | ## CSS Variables diff --git a/src/action-chip/action-chip.js b/src/action-chip/action-chip.js index b49d3de2..b630cd7f 100644 --- a/src/action-chip/action-chip.js +++ b/src/action-chip/action-chip.js @@ -39,7 +39,6 @@ class ActionChip extends Component { ActionChip.propTypes = { className: PropTypes.string, ripple: PropTypes.bool, - icon: PropTypes.element, onClick: PropTypes.func, }; diff --git a/src/action-chip/chip.css b/src/action-chip/chip.css index 236fae7f..faf53125 100644 --- a/src/action-chip/chip.css +++ b/src/action-chip/chip.css @@ -1,11 +1,23 @@ .mt-chip { --_mt-chip-mainColor: var(--mt-mainColor, #2196f3); --_mt-chip-backgroundColor: var(--mt-chip-backgroundColor, #e0dfe0); - --_mt-chip-backgroundColorFocus: var( --mt-chip-backgroundColorFocus, rgb(51, 51, 51, 0.2)); - --_mt-chip-backgroundColorActive: var( --mt-chip-backgroundColorActive, #d9edff); - --_mt-chip-backgroundColorActiveFocus: var( --mt-chip-backgroundColorActiveFocus, rgb(33, 150, 243, 0.2)); - --_mt-chip-textColor: var(--mt-chip-textColor, rgba(0, 0, 0, 0.87)); - --_mt-chip-textColorActive: var( --mt-chip-textColorActive, var(--_mt-chip-mainColor)); + --_mt-chip-backgroundColorFocus: var( + --mt-chip-backgroundColorFocus, + rgb(51, 51, 51, 0.2) + ); + --_mt-chip-backgroundColorActive: var( + --mt-chip-backgroundColorActive, + #d9edff + ); + --_mt-chip-backgroundColorActiveFocus: var( + --mt-chip-backgroundColorActiveFocus, + rgb(33, 150, 243, 0.2) + ); + --_mt-chip-textColor: var(--mt-chip-textColor, #212121); + --_mt-chip-textColorActive: var( + --mt-chip-textColorActive, + var(--_mt-chip-mainColor) + ); --mt-ripple-color: rgba(0, 0, 0, 0.5); font-size: calc(var(--mt-baseFontSize, 1rem) * 0.875); font-family: var(--mt-fontFamily, 'Roboto'); @@ -76,21 +88,21 @@ background-color: var(--_mt-chip-backgroundColorFocus); } -.mt-chip_input:checked~.mt-chip_chip:before { +.mt-chip_input:checked ~ .mt-chip_chip:before { opacity: 1; } .mt-chip:focus .mt-chip_chip:after, -.mt-chip_input:focus~.mt-chip_chip:after { +.mt-chip_input:focus ~ .mt-chip_chip:after { opacity: 1; } -.mt-chip_input:focus:checked~.mt-chip_chip:after { +.mt-chip_input:focus:checked ~ .mt-chip_chip:after { background-color: var(--_mt-chip-backgroundColorActiveFocus); opacity: 1; } -.mt-chip_input:checked~.mt-chip_chip { +.mt-chip_input:checked ~ .mt-chip_chip { color: var(--_mt-chip-textColorActive); } @@ -104,14 +116,14 @@ fill: #606060; } -.mt-chip_icon+.mt-chip_checkmark { +.mt-chip_icon + .mt-chip_checkmark { position: absolute; left: 1em; top: calc(50% - 0.45em); width: 1.5em; } -.mt-chip_checkmark~.mt-chip_chip { +.mt-chip_checkmark ~ .mt-chip_chip { padding-left: 0.4em; } @@ -124,12 +136,12 @@ transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1); } -.mt-chip_input:checked~.mt-chip_icon { +.mt-chip_input:checked ~ .mt-chip_icon { opacity: 0; transition: opacity 0.01s linear; } -.mt-chip_input:checked~.mt-chip_checkmark { +.mt-chip_input:checked ~ .mt-chip_checkmark { width: 1.5em; } @@ -139,11 +151,11 @@ transition: stroke-dashoffset 0.15s cubic-bezier(0.4, 0, 0.6, 1) 50ms; } -.mt-chip_input:checked~.mt-chip_checkmark .mt-chip_checkmarkPath { +.mt-chip_input:checked ~ .mt-chip_checkmark .mt-chip_checkmarkPath { stroke: var(--_mt-chip-textColorActive); stroke-dashoffset: 0; } -.mt-chip_input:checked~.mt-ripple { +.mt-chip_input:checked ~ .mt-ripple { --mt-ripple-color: var(--_mt-chip_mainColor, #2196f3); } diff --git a/src/choice-chip/choice-chip.js b/src/choice-chip/choice-chip.js index d4858c42..d9d16f5d 100644 --- a/src/choice-chip/choice-chip.js +++ b/src/choice-chip/choice-chip.js @@ -35,7 +35,6 @@ class ChoiceChip extends Component { ChoiceChip.propTypes = { className: PropTypes.string, ripple: PropTypes.bool, - icon: PropTypes.element, onClick: PropTypes.func, }; diff --git a/src/elevation/elevation.js b/src/elevation/elevation.js index 23ed62b3..b14e3cf6 100644 --- a/src/elevation/elevation.js +++ b/src/elevation/elevation.js @@ -23,7 +23,7 @@ class Elevation extends Component { Elevation.propTypes = { className: PropTypes.string, - depth: PropTypes.oneOf([1, 2, 3, 4, 5]), + depth: PropTypes.oneOf([0, 1, 2, 3, 4, 5]), }; export default Elevation; From 6f4a3ac99b2adfd2ee821a9bfa2e66d84911d0b6 Mon Sep 17 00:00:00 2001 From: James Smith Date: Thu, 7 Jun 2018 08:22:03 -0700 Subject: [PATCH 2/3] 0.9.0 --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e716503..3997a01a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +### v0.9.0 (2018/6/7) + +* Adds Dialog component +* Adds Elevation component +* Adds three Chip components + ### v0.8.0 (2018/6/6) * Adds Radio component diff --git a/package.json b/package.json index b520760a..b0f159e0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "materialish", - "version": "0.8.0", + "version": "0.9.0", "description": "React components that loosely follow Material Design", "main": "lib/index.js", "module": "es/index.js", From 26a6de20445439c71e679fb05a3ad8f41e8ca52d Mon Sep 17 00:00:00 2001 From: James Smith Date: Thu, 7 Jun 2018 08:32:25 -0700 Subject: [PATCH 3/3] Update docs to 0.9.0 --- docs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/package.json b/docs/package.json index 062929c0..552d3b6b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -21,7 +21,7 @@ "codemirror": "^5.36.0", "fetch-dedupe": "^3.0.0", "highlight.js": "^9.12.0", - "materialish": "0.8.0", + "materialish": "0.9.0", "no-scroll": "^2.1.1", "prop-types": "^15.6.1", "react": "^16.0.0",