@hig/surface - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

build/index.es.js

@@ -20,9 +20,2 @@ import React, { Component } from 'react';
 function stylesheet(props, themeData) {
-  var borderRadius = props.borderRadius,
-      horizontalPadding = props.horizontalPadding,
-      verticalPadding = props.verticalPadding,
-      level = props.level,
-      shadow = props.shadow;
-
-
   function sizeKey(size) {
@@ -36,3 +29,10 @@ return size ? SIZES[size] : "none";
 
-  return {
+  var borderRadius = props.borderRadius,
+      horizontalPadding = props.horizontalPadding,
+      verticalPadding = props.verticalPadding,
+      level = props.level,
+      shadow = props.shadow,
+      customStylesheet = props.stylesheet;
+
+  var styles = {
     surface: _extends({
@@ -47,2 +47,4 @@ backgroundColor: themeData["colorScheme.surface.level" + level],
   };
+
+  return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
@@ -79,4 +81,5 @@
           shadow = _props.shadow,
+          customStylesheet = _props.stylesheet,
           tagName = _props.tagName,
-          otherProps = _objectWithoutProperties(_props, ["borderRadius", "children", "horizontalPadding", "verticalPadding", "level", "shadow", "tagName"]);
+          otherProps = _objectWithoutProperties(_props, ["borderRadius", "children", "horizontalPadding", "verticalPadding", "level", "shadow", "stylesheet", "tagName"]);
 
@@ -93,2 +96,3 @@ var className = otherProps.className;
             borderRadius: borderRadius,
+            stylesheet: customStylesheet,
             horizontalPadding: horizontalPadding,
@@ -141,2 +145,6 @@ verticalPadding: verticalPadding,
   /**
+   * Adds custom/overriding styles
+   */
+  stylesheet: PropTypes.func,
+  /**
    * Enables specifying the semantic element to be rendered by the component
@@ -211,2 +219,9 @@ * The default is "div"
     },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
+    },
     "tagName": {
@@ -213,0 +228,0 @@ "type": {

build/index.js

@@ -27,9 +27,2 @@ 'use strict';
 function stylesheet(props, themeData) {
-  var borderRadius = props.borderRadius,
-      horizontalPadding = props.horizontalPadding,
-      verticalPadding = props.verticalPadding,
-      level = props.level,
-      shadow = props.shadow;
-
-
   function sizeKey(size) {
@@ -43,3 +36,10 @@ return size ? SIZES[size] : "none";
 
-  return {
+  var borderRadius = props.borderRadius,
+      horizontalPadding = props.horizontalPadding,
+      verticalPadding = props.verticalPadding,
+      level = props.level,
+      shadow = props.shadow,
+      customStylesheet = props.stylesheet;
+
+  var styles = {
     surface: _extends({
@@ -54,2 +54,4 @@ backgroundColor: themeData["colorScheme.surface.level" + level],
   };
+
+  return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
@@ -86,4 +88,5 @@
           shadow = _props.shadow,
+          customStylesheet = _props.stylesheet,
           tagName = _props.tagName,
-          otherProps = _objectWithoutProperties(_props, ["borderRadius", "children", "horizontalPadding", "verticalPadding", "level", "shadow", "tagName"]);
+          otherProps = _objectWithoutProperties(_props, ["borderRadius", "children", "horizontalPadding", "verticalPadding", "level", "shadow", "stylesheet", "tagName"]);
 
@@ -100,2 +103,3 @@ var className = otherProps.className;
             borderRadius: borderRadius,
+            stylesheet: customStylesheet,
             horizontalPadding: horizontalPadding,
@@ -148,2 +152,6 @@ verticalPadding: verticalPadding,
   /**
+   * Adds custom/overriding styles
+   */
+  stylesheet: PropTypes.func,
+  /**
    * Enables specifying the semantic element to be rendered by the component
@@ -218,2 +226,9 @@ * The default is "div"
     },
+    "stylesheet": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Adds custom/overriding styles"
+    },
     "tagName": {
@@ -220,0 +235,0 @@ "type": {

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/surface-v1.2.0](https://github.com/Autodesk/hig/compare/@hig/surface@1.1.1...@hig/surface@1.2.0) (2021-02-24)
+
+
+### Features
+
+* add stylesheet prop ([acf4b95](https://github.com/Autodesk/hig/commit/acf4b95))
+
 # [@hig/surface-v1.1.1](https://github.com/Autodesk/hig/compare/@hig/surface@1.1.0...@hig/surface@1.1.1) (2020-05-12)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/surface",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "HIG Surface component",
@@ -29,7 +29,7 @@ "author": "Autodesk Inc.",
     "@hig/semantic-release-config": "^0.1.0",
-    "@hig/typography": "^1.0.4"
+    "@hig/typography": "^1.2.0"
   },
   "peerDependencies": {
-    "@hig/theme-context": "^3.0.0",
-    "@hig/theme-data": "^2.16.0",
+    "@hig/theme-context": "^3.0.1",
+    "@hig/theme-data": "^2.19.3",
     "react": "^15.4.1 || ^16.3.2"
@@ -36,0 +36,0 @@ },

README.md

@@ -31,1 +31,22 @@ # Surface
 Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.
+
+Surface also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance
+
+```jsx
+import Surface from '@hig/surface';
+
+function YourComponent() {
+  // ...
+  const customStylesheet = (styles, props, themeData) => ({
+    ...styles,
+    surface: {
+      ...styles.surface,
+      color: themeData["colorScheme.status.error"]
+    }
+  });
+
+  return (
+    <Surface stylesheet={customStylesheet} />
+  );
+}
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21010

increased by8.15%

Lines of code

429

increased by7.52%

Number of lines in readme file

52

increased by67.74%

No dependency changes