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
Alex B (bmdalex) wants to merge 2 commits into
masterfrom
feat/menu-color-prop
Closed

Alex B (bmdalex) wants to merge 2 commits into
masterfrom
feat/menu-color-prop

Conversation

@bmdalex

Copy link
Copy Markdown
Collaborator

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

Comment thread src/themes/types.ts
import { getSideArrow } from '../../utils'
import { pxToRem } from '../../../../lib'
import { ComponentSlotStyleFunction, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
import { pxToRem, getColorFromScheme } from '../../../../lib'

Copy link
Copy Markdown
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
Copy Markdown
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

Comment thread src/lib/colorUtils.ts
/>
)

export default MenuExampleColor

Copy link
Copy Markdown
Contributor

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
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

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

Comment thread src/themes/teams/components/Menu/menuItemStyles.ts
Comment thread src/themes/base/colors.ts
@bmdalex

Copy link
Copy Markdown
Collaborator Author

closing in favor of #756

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.

5 participants