Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add theming capability #487

Merged
merged 32 commits into from
May 3, 2019
Merged

Add theming capability #487

merged 32 commits into from
May 3, 2019

Conversation

kaytcat
Copy link
Member

@kaytcat kaytcat commented Apr 8, 2019

To be able to completely customize nukleus and change styling completely we need a way to add our own theme. This pr adds a new ThemeProvider component which relies on the react context api to pass the theme to nukleus components which then replace their normal css modules with the ones you pass to it.

Todo:

  • Update all components with theme consumer
  • Add tests for ThemeProvider and themable function
  • Add comp tests

@kaytcat kaytcat added the blocked label Apr 8, 2019
animation: pulse .8s cubic-bezier(.215, .61, .355, 1);
}

&:hover {

Choose a reason for hiding this comment

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

MAJOR Refactor this code to not nest more than 3 rulesets. rule

cursor: not-allowed;
opacity: .65;

&:hover {

Choose a reason for hiding this comment

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

MAJOR Refactor this code to not nest more than 3 rulesets. rule

@import '~@kununu/kununu-theme-v2/scss/base/variables';

.select {
appearance: none; // NOSONAR

Choose a reason for hiding this comment

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

INFO Is NOSONAR used to exclude false positive or to hide real quality flaw? rule

padding: 0;
background: transparent;
border: 0;
appearance: none; // NOSONAR

Choose a reason for hiding this comment

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

INFO Is NOSONAR used to exclude false positive or to hide real quality flaw? rule

background-color: $green;
color: $white;
}

Choose a reason for hiding this comment

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

MINOR Remove the useless trailing whitespaces at the end of this line. rule

Copy link
Contributor

@wolfib wolfib left a comment

Choose a reason for hiding this comment

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

Is the RangeSlider component omitted on purpose?

Great to have nukleus themeable!

src/components/Combobox/index.scss Show resolved Hide resolved
src/components/Combobox/index.scss Outdated Show resolved Hide resolved
src/components/Label/index.jsx Outdated Show resolved Hide resolved
src/components/Notification/index.scss Show resolved Hide resolved
src/components/Notification/index.jsx Show resolved Hide resolved
src/components/Select/index.jsx Show resolved Hide resolved
src/components/Autocomplete/index.jsx Show resolved Hide resolved
src/components/TextField/index.jsx Show resolved Hide resolved
display: flex;

Choose a reason for hiding this comment

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

MINOR Remove the useless trailing whitespaces at the end of this line. rule

@kununu-bot
Copy link

SonarQube analysis reported 21 issues

  • MAJOR 3 major
  • MINOR 16 minor
  • INFO 2 info

Watch the comments in this conversation to review them.

Top 10 extra issues

Note: The following issues were found on lines that were not modified in the pull request. Because these issues can't be reported as line comments, they are summarized here:

  1. MAJOR customTheme.scss#: Remove this empty stylesheet. rule
  2. MINOR customTheme.scss#: Add an empty new line at the end of this file. rule
  3. MINOR index.scss#: Add an empty new line at the end of this file. rule
  4. MINOR customTheme.scss#: Add an empty new line at the end of this file. rule
  5. MINOR customTheme.scss#: Add an empty new line at the end of this file. rule
  6. MINOR index.scss#: Add an empty new line at the end of this file. rule
  7. MINOR customTheme.scss#: Add an empty new line at the end of this file. rule
  8. MINOR index.scss#: Add an empty new line at the end of this file. rule
  9. MINOR storyStyles.scss#: Add an empty new line at the end of this file. rule
  10. MINOR customTheme.scss#: Add an empty new line at the end of this file. rule

@kaytcat kaytcat merged commit 59092af into master May 3, 2019
@kaytcat kaytcat deleted the add-theming branch May 3, 2019 13:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants