Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

feat(menu): color prop #712

Closed
wants to merge 2 commits into from
Closed

feat(menu): color prop #712

wants to merge 2 commits into from

Conversation

bmdalex
Copy link
Collaborator

@bmdalex bmdalex commented Jan 14, 2019

feat(menu): color prop

Description

This PR:

  • adds color prop to Menu component
  • creates Menu color examples

API

<Menu color={COLOR} .../>

where COLOR can be:

  • a string: 'primary' | 'secondary' | 'blue' | 'green' | 'grey' | 'orange' | 'pink' | 'purple' | 'teal' | 'red' | 'yellow' | string
  • an object with:
    • key: one of 'foreground' | 'background' | 'border' to identify the target area of the component
    • value: one of the strings above to describe the color of the area
      e.g.:
<Menu color={ foreground: 'pink', background: 'yellow', border: 'green' }} .../>

renders:
screenshot 2019-01-14 at 02 47 47

List of colored menu examples:

screenshot 2019-01-14 at 02 52 10

import { getSideArrow } from '../../utils'
import { pxToRem } from '../../../../lib'
import { ComponentSlotStyleFunction, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
import { pxToRem, getColorFromScheme } from '../../../../lib'
Copy link
Contributor

Choose a reason for hiding this comment

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

I remember I used getColorFromScheme in the renderComponent, so that the user will receive colors object in the styles containing the merged colors. Please take a look on that. If that is not sufficient, we may rework the mechanism there and try to avoid this method in the styles.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

not relevant anymore, see #756

/>
)

export default MenuExampleColor
Copy link
Member

Choose a reason for hiding this comment

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

This example looks overcomplicated to me, may be we can:

  • introduce a new Select knob
  • use it to get select an active color

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@layershifter can you show me an example of that? I would give it a shot

@bmdalex
Copy link
Collaborator Author

bmdalex commented Jan 22, 2019

closing in favor of #756

@bmdalex bmdalex closed this Jan 22, 2019
@bmdalex bmdalex deleted the feat/menu-color-prop branch February 22, 2019 19:16
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants