Merge pull request #139 from jamesplease/0.9.0

0.9.0
jamesplease · Jun 7, 2018 · d38d838 · d38d838
2 parents 1d3e11b + 26a6de2
commit d38d838
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 42 deletions.
diff --git 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/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",

diff --git 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
@@ -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
@@ -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/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",

diff --git 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
@@ -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
@@ -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
@@ -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;