Merge pull request #751 from materialsproject/styling_components

add custom CSS and prop-based theming for data entry components

Author: minhsueh

.github/workflows/publish-npm.yml

@@ -1,9 +1,8 @@
 name: publish-npm
 on:
-  workflow_dispatch:
-  push:
-    tags:
-      - 'v*'
+  release:
+    types: [published]
+
 jobs:
   publish:
     runs-on: ubuntu-latest
@@ -29,6 +28,9 @@ jobs:
       - name: Build project
         run: |
           npm run build-publish
+      - name: Sync version from Git Tag
+        run: |
+          npm version ${{ github.ref_name }} --no-git-tag-version
       - name: Publish to NPM
         run: |
           echo Publishing to test repo $NODE_AUTH_TOKEN

src/components/data-entry/DualRangeSlider/DualRangeSlider.tsx

@@ -75,6 +75,14 @@ export interface DualRangeSliderProps {
    * This can be used to lift the new "nice" domain upwards.
    */
   onPropsChange?: (props: any) => void;
+  /**
+   * styles for input
+   */
+  styleInput?: object;
+  /**
+   * styles for slider
+   */
+  styleSlider?: object;
 }
 
 /**
@@ -343,6 +351,7 @@ export const DualRangeSlider: React.FC<DualRangeSliderProps> = ({
           <input
             data-testid="lower-bound-input"
             className="input is-small"
+            style={props.styleInput}
             type="number"
             value={lowerBound}
             min={scale.domain()[0]}
@@ -355,6 +364,7 @@ export const DualRangeSlider: React.FC<DualRangeSliderProps> = ({
           <input
             data-testid="upper-bound-input"
             className="input is-small"
+            style={props.styleInput}
             type="number"
             value={upperBound}
             min={scale.domain()[0]}
@@ -364,7 +374,7 @@ export const DualRangeSlider: React.FC<DualRangeSliderProps> = ({
           />
         </div>
       </div>
-      <div className="slider">
+      <div className="slider" style={props.styleSlider}>
         <Range
           values={values}
           step={step}

src/components/data-entry/FilterField/FilterField.tsx

@@ -30,6 +30,10 @@ interface FilterFieldProps {
    */
   active?: boolean;
   resetFilter?: (id: any) => any;
+  /**
+   * styles for label
+   */
+  styleLabel?: object;
 }
 
 /**
@@ -74,7 +78,7 @@ export const FilterField: React.FC<FilterFieldProps> = ({ dois = [], ...otherPro
   return (
     <div id={props.id} className={classNames('mpc-filter-field', props.className)}>
       {props.label && (
-        <div className="mpc-filter-label">
+        <div className="mpc-filter-label" style={props.styleLabel}>
           {renderFilterLabel()}
           {props.dois.map((doi, i) => (
             <PublicationButton key={`${i}-${doi}`} doi={doi} compact className="tag ml-2" />

src/components/data-entry/RangeSlider/RangeSlider.tsx

@@ -158,6 +158,14 @@ export interface RangeSliderProps {
    * Function to call when slider values change.
    */
   onChange?: (values: number[]) => void;
+  /**
+   * styles for input
+   */
+  styleInput?: object;
+  /**
+   * styles for slider
+   */
+  styleSlider?: object;
 }
 
 /**
@@ -258,14 +266,15 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
       <input
         data-testid="lower-bound-input"
         className="input is-small"
+        style={props.styleInput}
         type="number"
         value={inputValue}
         min={scale.domain()[0]}
         max={scale.domain()[1]}
         step={props.step}
         onChange={handleInputChange}
       />
-      <div className="slider">
+      <div className="slider" style={props.styleSlider}>
         <Range
           values={values}
           step={props.step}