Skip to content
This repository has been archived by the owner on Nov 6, 2020. It is now read-only.

fix(css-variables): improve robustness and developer warnings #449

Merged
merged 6 commits into from
Sep 24, 2019
Merged

fix(css-variables): improve robustness and developer warnings #449

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2de7790
fix(css-variables): improve robustness and developer warnings
HendrikThePendric Sep 23, 2019
3b60782
chore(eslint): remove unneeded env setting
HendrikThePendric Sep 23, 2019
eb1e865
chore(css-variables): fix typo
HendrikThePendric Sep 23, 2019
00924ba
fix(css-variables): adjusted prop validator name
HendrikThePendric Sep 23, 2019
38af6c5
fix(css-variables): stop using whitelistProps because it's overkill
HendrikThePendric Sep 23, 2019
b439c09
chore(eslint): remove redundant `propWrapperFunctions` config
HendrikThePendric Sep 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,9 @@ module.exports = {
react: {
version: '16.3',
},
propWrapperFunctions: [
'whitelistProps',
{ property: 'whitelistProps', object: 'propTypes' },
],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this necessary and will it be required everywhere we want to use the function?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on the last commit this should also be removed.

},
}
9 changes: 5 additions & 4 deletions src/CssVariables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import propTypes from 'prop-types'
import propTypes from '@dhis2/prop-types'
import * as theme from './theme.js'

const toPrefixedThemeSection = themeSectionKey =>
Expand All @@ -22,10 +22,11 @@ const toCustomPropertyString = themeSection =>
* @example import { CssVariables } from @dhis2/ui-core
* @see Live demo: {@link /demo/?path=/story/cssvariables--default|Storybook}
*/
const CssVariables = props => {
const variables = Object.keys(props)
const CssVariables = ({ colors, theme, layers, spacers, elevations }) => {
const allowedProps = { colors, theme, layers, spacers, elevations }
const variables = Object.keys(allowedProps)
// Filter all props that are false
.filter(prop => props[prop])
.filter(prop => allowedProps[prop])
// Map props to corresponding theme section and prefixes keys with section name
.map(toPrefixedThemeSection)
// Map each section to a single string of css custom property declarations
Expand Down