From 995bcbe36509019748988d633f40331d4595ef98 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Fri, 11 Jan 2019 19:50:42 +0100 Subject: [PATCH 1/4] feat(menu): color prop and complex scheme --- docs/src/components/Knobs/KnobsSelect.tsx | 62 +++++ .../Variations/MenuExampleColor.shorthand.tsx | 61 +++++ .../components/Menu/Variations/index.tsx | 5 + src/components/Label/Label.tsx | 2 +- src/components/Menu/Menu.tsx | 10 +- src/components/Menu/MenuItem.tsx | 9 +- src/lib/colorUtils.ts | 31 ++- src/lib/commonPropInterfaces.ts | 7 +- src/themes/base/colors.ts | 76 ++++-- src/themes/teams-dark/componentVariables.ts | 1 + .../components/Button/buttonVariables.ts | 1 - .../components/Chat/chatMessageVariables.ts | 1 - .../components/Chat/chatVariables.ts | 1 - .../components/Divider/dividerVariables.ts | 1 - .../components/Header/headerVariables.ts | 1 - .../components/Menu/menuVariables.ts | 10 + .../components/Text/textVariables.ts | 1 - .../components/Avatar/avatarVariables.ts | 1 - .../components/Button/buttonVariables.ts | 1 - .../components/Chat/chatMessageVariables.ts | 1 - .../components/Chat/chatVariables.ts | 1 - .../components/Divider/dividerVariables.ts | 1 - .../components/Header/headerVariables.ts | 1 - .../components/Menu/menuItemStyles.ts | 10 +- .../components/Menu/menuVariables.ts | 69 +++++- .../components/Text/textVariables.ts | 1 - src/themes/teams/colors.ts | 96 ++++++-- .../teams/components/Label/labelStyles.ts | 4 +- .../teams/components/Label/labelVariables.ts | 4 +- .../teams/components/Menu/menuItemStyles.ts | 232 +++++++----------- .../teams/components/Menu/menuStyles.ts | 14 +- .../teams/components/Menu/menuVariables.ts | 80 ++++-- src/themes/teams/siteVariables.ts | 22 +- src/themes/types.ts | 15 +- types/utils.d.ts | 2 - 35 files changed, 560 insertions(+), 275 deletions(-) create mode 100644 docs/src/components/Knobs/KnobsSelect.tsx create mode 100644 docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx diff --git a/docs/src/components/Knobs/KnobsSelect.tsx b/docs/src/components/Knobs/KnobsSelect.tsx new file mode 100644 index 0000000000..d61b5bbc3d --- /dev/null +++ b/docs/src/components/Knobs/KnobsSelect.tsx @@ -0,0 +1,62 @@ +import * as PropTypes from 'prop-types' +import * as React from 'react' +import * as _ from 'lodash' + +import KnobsField from './KnobsField' +import KnobsLabel from './KnobsLabel' +import KnobsControl from './KnobsControl' +import { ObjectOf } from 'types/utils' + +export type KnobsSelectItem = { name: string; value: string } + +export interface KnobsSelectProps { + onChange?: (data: KnobsSelectProps) => void + name?: string + items?: KnobsSelectItem[] + selectedItem?: KnobsSelectItem +} + +class KnobsSelect extends React.Component { + private itemsMap: ObjectOf = {} + + public static propTypes = { + onChange: PropTypes.func, + name: PropTypes.string.isRequired, + items: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string, value: PropTypes.string })), + selectedItem: PropTypes.shape({ name: PropTypes.string, value: PropTypes.string }), + } + + componentDidMount() { + this.props.items.forEach(item => { + this.itemsMap[item.value] = item + }) + } + + render() { + const { name, items } = this.props + if (!items || !items.length) { + return null + } + + const selectedItem = this.props.selectedItem || this.props.items[0] + + return ( + + + + + + + ) + } + + private handleChange = (e: React.SyntheticEvent) => { + this.props.onChange({ selectedItem: this.itemsMap[_.get(e, 'target.value')] }) + } +} + +export default KnobsSelect diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx new file mode 100644 index 0000000000..6cdf17a784 --- /dev/null +++ b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx @@ -0,0 +1,61 @@ +import * as React from 'react' +import * as _ from 'lodash' +import { Menu, ProviderConsumer, Grid, Text } from '@stardust-ui/react' + +const items = [ + { key: 'editorials', content: 'Editorials' }, + { key: 'review', content: 'Reviews' }, + { key: 'events', content: 'Upcoming Events' }, +] + +const iconItems = [ + { key: 'home', content: 'Home', icon: 'home' }, + { key: 'users', content: 'Users', icon: 'users' }, + { key: 'search', icon: 'search' }, +] + +const MenuExampleColor = () => ( + { + const colorsArr = _.keys(colorScheme) + const colors = _.times(7, num => colorsArr[num % colorsArr.length]) + + return ( + + + + + + + + + + + + + + + _.pick(item, ['key', 'icon']))} + /> + + + + ) + }} + /> +) + +export default MenuExampleColor diff --git a/docs/src/examples/components/Menu/Variations/index.tsx b/docs/src/examples/components/Menu/Variations/index.tsx index 46f662e57b..401697ac51 100644 --- a/docs/src/examples/components/Menu/Variations/index.tsx +++ b/docs/src/examples/components/Menu/Variations/index.tsx @@ -19,6 +19,11 @@ const Variations = () => ( description="A vertical menu can be fluid which takes up the full space of its container. A horizontal menu does this by default." examplePath="components/Menu/Variations/MenuExampleFluid" /> + ) diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 4c9b928304..e6c66e9876 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -13,6 +13,7 @@ import { commonPropTypes, ColorComponentProps, rtlTextContainer, + ComplexColorPropType, } from '../../lib' import Icon from '../Icon/Icon' @@ -20,7 +21,6 @@ import Image from '../Image/Image' import Layout from '../Layout/Layout' import { Accessibility } from '../../lib/accessibility/types' import { ReactProps, ShorthandValue } from '../../../types/utils' -import { ComplexColorPropType } from '../../lib/commonPropInterfaces' export interface LabelProps extends UIComponentProps, diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index bd6475a49b..9f9e5b5163 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -12,6 +12,8 @@ import { commonPropTypes, getKindProp, rtlTextContainer, + ColorComponentProps, + ComplexColorPropType, } from '../../lib' import MenuItem from './MenuItem' import { menuBehavior } from '../../lib/accessibility' @@ -23,7 +25,10 @@ import MenuDivider from './MenuDivider' export type MenuShorthandKinds = 'divider' | 'item' -export interface MenuProps extends UIComponentProps, ChildrenComponentProps { +export interface MenuProps + extends UIComponentProps, + ChildrenComponentProps, + ColorComponentProps { /** * Accessibility behavior if overridden by the user. * @default menuBehavior @@ -93,6 +98,7 @@ class Menu extends AutoControlledComponent, MenuState> { static propTypes = { ...commonPropTypes.createCommon({ content: false, + color: 'complex', }), accessibility: PropTypes.func, activeIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), @@ -141,6 +147,7 @@ class Menu extends AutoControlledComponent, MenuState> { renderItems = (variables: ComponentVariablesObject) => { const { + color, iconOnly, items, pills, @@ -172,6 +179,7 @@ class Menu extends AutoControlledComponent, MenuState> { return MenuItem.create(item, { defaultProps: { + color, iconOnly, pills, pointing, diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 2d66275b5b..30ebd5f43d 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -16,6 +16,8 @@ import { isFromKeyboard, EventStack, rtlTextContainer, + ColorComponentProps, + ComplexColorPropType, } from '../../lib' import Icon from '../Icon/Icon' import Menu from '../Menu/Menu' @@ -30,7 +32,8 @@ import Indicator from '../Indicator/Indicator' export interface MenuItemProps extends UIComponentProps, ChildrenComponentProps, - ContentComponentProps { + ContentComponentProps, + ColorComponentProps { /** * Accessibility behavior if overridden by the user. * @default menuItemBehavior @@ -128,7 +131,7 @@ class MenuItem extends AutoControlledComponent, MenuIt static create: Function static propTypes = { - ...commonPropTypes.createCommon(), + ...commonPropTypes.createCommon({ color: 'complex' }), accessibility: PropTypes.func, active: PropTypes.bool, disabled: PropTypes.bool, @@ -180,6 +183,7 @@ class MenuItem extends AutoControlledComponent, MenuIt renderComponent({ ElementType, classes, accessibility, unhandledProps, styles }) { const { children, + color, content, icon, wrapper, @@ -230,6 +234,7 @@ class MenuItem extends AutoControlledComponent, MenuIt {Menu.create(menu, { defaultProps: { accessibility: submenuBehavior, + color, vertical: true, primary, secondary, diff --git a/src/lib/colorUtils.ts b/src/lib/colorUtils.ts index 3530cb2980..350e16db2b 100644 --- a/src/lib/colorUtils.ts +++ b/src/lib/colorUtils.ts @@ -5,10 +5,12 @@ import { ColorValues, ColorSchemeMapping, ColorScheme, + ColorSchemeStates, } from '../themes/types' -import { Partial } from '../../types/utils' import { ComplexColorPropType } from './commonPropInterfaces' +const mapColorToInitialScheme = (color: string): ColorSchemeStates => ({ initial: color }) + export const mapColorsToScheme = ( siteVars: SiteVariablesInput, mapper: keyof ColorVariants | ((color: ColorVariants) => T), @@ -18,24 +20,27 @@ export const mapColorsToScheme = ( typeof mapper === 'number' ? String(mapper) : (mapper as any), ) as ColorValues -export const getColorSchemeFn = (colorProp: string, colorScheme: ColorValues) => { - const colors = _.get(colorScheme, colorProp) - return (area: keyof T, defaultColor: string) => (colors ? colors[area] : defaultColor) -} +export const getColorFromScheme = ( + colorScheme: T, + area: keyof T, + defaultColor: string, +): ColorSchemeStates => _.get(colorScheme, area, mapColorToInitialScheme(defaultColor)) export const getColorSchemeFromObject = ( - colorScheme: ColorValues>, + colorScheme: ColorValues, colors: ComplexColorPropType, -): Partial => +): ColorScheme => _.mapValues(colors, (color, colorName) => { // if the color scheme contains the color, then get the value from it, otherwise return the color provided const colorSchemeValue = _.get(colorScheme, color, colorScheme.default[color]) - return colorSchemeValue ? colorSchemeValue[colorName] : colors[colorName] + return colorSchemeValue + ? colorSchemeValue[colorName] + : mapColorToInitialScheme(colors[colorName]) }) export const getColorSchemeWithCustomDefaults = ( colorScheme: ColorSchemeMapping, - customDefaultValues: Partial, + customDefaultValues: ColorScheme, ) => { const mergedDefaultValues = { ...colorScheme.default, @@ -49,8 +54,8 @@ export const getColorSchemeWithCustomDefaults = ( export const generateColorScheme = ( colorProp: ComplexColorPropType, - colorScheme: ColorValues>, -): Partial => { + colorScheme: ColorValues, +): ColorScheme => { // if both color prop and color scheme are defined, we are merging them if (colorProp && colorScheme) { return typeof colorProp === 'string' @@ -61,14 +66,14 @@ export const generateColorScheme = ( // if the color prop is not defined, but the the color scheme is defined, then we are returning // the defaults from the color scheme if they exists if (colorScheme) { - return colorScheme && colorScheme.default ? colorScheme.default : {} + return colorScheme.default || {} } // if the color scheme is not defined, then if the color prop is a scheme object we are // returning it, otherwise we return an empty object, as it means that the component is // implementing the simple color prop if (colorProp) { - return typeof colorProp === 'string' ? {} : colorProp + return typeof colorProp === 'string' ? {} : _.mapValues(colorProp, mapColorToInitialScheme) } // if neither the color prop, nor the color scheme are defined, we are returning empty object diff --git a/src/lib/commonPropInterfaces.ts b/src/lib/commonPropInterfaces.ts index 8dbeb7776f..b4541e4103 100644 --- a/src/lib/commonPropInterfaces.ts +++ b/src/lib/commonPropInterfaces.ts @@ -40,13 +40,8 @@ export type ColorValue = | string export type ComplexColorPropType = - | { - foreground?: ColorValue - background?: ColorValue - border?: ColorValue - shadow?: ColorValue - } | ColorValue + | Partial> export interface ColorComponentProps { /** A component can have a color. */ diff --git a/src/themes/base/colors.ts b/src/themes/base/colors.ts index e49ca7af62..13b0bdc9d1 100644 --- a/src/themes/base/colors.ts +++ b/src/themes/base/colors.ts @@ -159,22 +159,70 @@ export const colors: ColorPalette = { white: '#fff', } -export const colorScheme: ColorSchemeMapping = _.mapValues( - emphasisAndNaturalColors, - (colorVariants, colorName) => { - const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50] +const defaultGrey = colors.grey[600] +export const colorScheme: ColorSchemeMapping = { + ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => { + const foreground = isLightBackground(colorName) ? colors.black : colors.white return { - foreground, - border: foreground, - shadow: foreground, - background: colorVariants[500], - default: { - foreground: colors.grey[600], - border: colors.grey[600], - shadow: colors.grey[600], - background: colors.grey[100], + foreground: { + initial: foreground, + active: foreground, + disabled: foreground, + focused: foreground, + hovered: foreground, + }, + background: { + initial: colorVariants[500], + active: colorVariants[500], + disabled: colorVariants[100], + focused: colorVariants[200], + hovered: colorVariants[200], + }, + border: { + initial: colorVariants[500], + active: colorVariants[500], + disabled: colorVariants[100], + focused: colorVariants[200], + hovered: colorVariants[200], + }, + shadow: { + initial: foreground, + active: foreground, + disabled: foreground, + focused: foreground, + hovered: foreground, }, } + }), + default: { + foreground: { + initial: defaultGrey, + active: defaultGrey, + hovered: defaultGrey, + focused: defaultGrey, + disabled: defaultGrey, + }, + background: { + initial: colors.grey[100], + active: colors.grey[100], + focused: colors.grey[300], + hovered: colors.grey[300], + disabled: colors.grey[300], + }, + border: { + initial: colors.grey[100], + active: colors.grey[100], + focused: colors.grey[300], + hovered: colors.grey[300], + disabled: colors.grey[300], + }, + shadow: { + initial: defaultGrey, + active: defaultGrey, + hovered: defaultGrey, + focused: defaultGrey, + disabled: defaultGrey, + }, }, -) +} diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts index ce9d65749a..759e7779ce 100644 --- a/src/themes/teams-dark/componentVariables.ts +++ b/src/themes/teams-dark/componentVariables.ts @@ -4,5 +4,6 @@ export { default as ChatMessage } from './components/Chat/chatMessageVariables' export { default as Divider } from './components/Divider/dividerVariables' export { default as Header } from './components/Header/headerVariables' export { default as Input } from './components/Input/inputVariables' +export { default as Menu } from './components/Menu/menuVariables' export { default as Text } from './components/Text/textVariables' export { default as TreeTitle } from './components/Tree/treeTitleVariables' diff --git a/src/themes/teams-dark/components/Button/buttonVariables.ts b/src/themes/teams-dark/components/Button/buttonVariables.ts index b9c535e054..2b0294b56c 100644 --- a/src/themes/teams-dark/components/Button/buttonVariables.ts +++ b/src/themes/teams-dark/components/Button/buttonVariables.ts @@ -1,5 +1,4 @@ import { ButtonVariables } from '../../../teams/components/Button/buttonVariables' -import { Partial } from 'types/utils' export default (siteVars: any): Partial => { return { diff --git a/src/themes/teams-dark/components/Chat/chatMessageVariables.ts b/src/themes/teams-dark/components/Chat/chatMessageVariables.ts index b79e641334..d074170e5d 100644 --- a/src/themes/teams-dark/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams-dark/components/Chat/chatMessageVariables.ts @@ -1,5 +1,4 @@ import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessageVariables' -import { Partial } from 'types/utils' export default (siteVars: any): Partial => { return { diff --git a/src/themes/teams-dark/components/Chat/chatVariables.ts b/src/themes/teams-dark/components/Chat/chatVariables.ts index 1a5f78499c..2257d1d60a 100644 --- a/src/themes/teams-dark/components/Chat/chatVariables.ts +++ b/src/themes/teams-dark/components/Chat/chatVariables.ts @@ -1,5 +1,4 @@ import { ChatVariables } from '../../../teams/components/Chat/chatVariables' -import { Partial } from 'types/utils' export default (siteVars: any): Partial => { return { diff --git a/src/themes/teams-dark/components/Divider/dividerVariables.ts b/src/themes/teams-dark/components/Divider/dividerVariables.ts index 12e49bb143..218bc7bdb9 100644 --- a/src/themes/teams-dark/components/Divider/dividerVariables.ts +++ b/src/themes/teams-dark/components/Divider/dividerVariables.ts @@ -1,5 +1,4 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVariables' -import { Partial } from 'types/utils' export default (siteVars: any): Partial => ({ colors: { diff --git a/src/themes/teams-dark/components/Header/headerVariables.ts b/src/themes/teams-dark/components/Header/headerVariables.ts index 2f207a7c01..373b17f90f 100644 --- a/src/themes/teams-dark/components/Header/headerVariables.ts +++ b/src/themes/teams-dark/components/Header/headerVariables.ts @@ -1,5 +1,4 @@ import { HeaderVariables } from '../../../teams/components/Header/headerVariables' -import { Partial } from 'types/utils' export default (siteVars: any): Partial => { return { diff --git a/src/themes/teams-dark/components/Menu/menuVariables.ts b/src/themes/teams-dark/components/Menu/menuVariables.ts index eb6e5c4a3b..f1aa271b4c 100644 --- a/src/themes/teams-dark/components/Menu/menuVariables.ts +++ b/src/themes/teams-dark/components/Menu/menuVariables.ts @@ -1,9 +1,19 @@ export interface MenuVariables { color: string + + primaryActiveColor: string + primaryFocusedColor: string + + backgroundColor: string } export default (siteVars: any): MenuVariables => { return { color: siteVars.white, + + primaryActiveColor: siteVars.black, + primaryFocusedColor: siteVars.black, + + backgroundColor: siteVars.black, } } diff --git a/src/themes/teams-dark/components/Text/textVariables.ts b/src/themes/teams-dark/components/Text/textVariables.ts index adca1eb3f9..bcd36687e8 100644 --- a/src/themes/teams-dark/components/Text/textVariables.ts +++ b/src/themes/teams-dark/components/Text/textVariables.ts @@ -1,5 +1,4 @@ import { TeamsTextVariables } from '../../../teams/components/Text/textVariables' -import { Partial } from 'types/utils' export default (siteVariables): Partial => ({ atMentionMeColor: siteVariables.orange04, diff --git a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts index 4780286ced..d684f583ea 100644 --- a/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts +++ b/src/themes/teams-high-contrast/components/Avatar/avatarVariables.ts @@ -1,5 +1,4 @@ import { AvatarVariables } from '../../../teams/components/Avatar/avatarVariables' -import { Partial } from 'types/utils' export default (siteVariables: any): Partial => ({ statusBorderColor: siteVariables.black, diff --git a/src/themes/teams-high-contrast/components/Button/buttonVariables.ts b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts index 684c4faa3f..90d8371008 100644 --- a/src/themes/teams-high-contrast/components/Button/buttonVariables.ts +++ b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts @@ -1,5 +1,4 @@ import { ButtonVariables } from '../../../teams/components/Button/buttonVariables' -import { Partial } from 'types/utils' export default (siteVars: any): Partial => { return { diff --git a/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts b/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts index 8d0c47c986..09082266c6 100644 --- a/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts +++ b/src/themes/teams-high-contrast/components/Chat/chatMessageVariables.ts @@ -1,5 +1,4 @@ import { ChatMessageVariables } from '../../../teams/components/Chat/chatMessageVariables' -import { Partial } from 'types/utils' export default (siteVars: any): Partial => { return { diff --git a/src/themes/teams-high-contrast/components/Chat/chatVariables.ts b/src/themes/teams-high-contrast/components/Chat/chatVariables.ts index 1a5f78499c..2257d1d60a 100644 --- a/src/themes/teams-high-contrast/components/Chat/chatVariables.ts +++ b/src/themes/teams-high-contrast/components/Chat/chatVariables.ts @@ -1,5 +1,4 @@ import { ChatVariables } from '../../../teams/components/Chat/chatVariables' -import { Partial } from 'types/utils' export default (siteVars: any): Partial => { return { diff --git a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts index 7d3217de75..d3cf54f78c 100644 --- a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts +++ b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts @@ -1,5 +1,4 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVariables' -import { Partial } from 'types/utils' export default (siteVars: any): Partial => ({ colors: { diff --git a/src/themes/teams-high-contrast/components/Header/headerVariables.ts b/src/themes/teams-high-contrast/components/Header/headerVariables.ts index 7a9deccdc7..724a6116e2 100644 --- a/src/themes/teams-high-contrast/components/Header/headerVariables.ts +++ b/src/themes/teams-high-contrast/components/Header/headerVariables.ts @@ -1,5 +1,4 @@ import { HeaderVariables } from '../../../teams/components/Header/headerVariables' -import { Partial } from 'types/utils' export default (siteVars: any): Partial => { return { diff --git a/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts b/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts index 89bb4bc300..eee9d72538 100644 --- a/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts +++ b/src/themes/teams-high-contrast/components/Menu/menuItemStyles.ts @@ -5,21 +5,21 @@ import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuIt type MenuItemPropsAndState = MenuItemProps & MenuItemState const menuItemStyles: ComponentSlotStylesInput = { - wrapper: ({ props, variables }): ICSSInJSStyle => { + wrapper: ({ props, variables: v }): ICSSInJSStyle => { const { iconOnly, isFromKeyboard } = props return { ...(iconOnly && { // focus styles ...(isFromKeyboard && { - color: variables.activeColor, - background: variables.activeBackgroundColor, + color: v.activeColor, + background: v.activeBackgroundColor, }), // hover styles ':hover': { - color: variables.activeColor, - background: variables.activeBackgroundColor, + color: v.activeColor, + background: v.activeBackgroundColor, }, }), } diff --git a/src/themes/teams-high-contrast/components/Menu/menuVariables.ts b/src/themes/teams-high-contrast/components/Menu/menuVariables.ts index 5ca3949a01..d7a581bc29 100644 --- a/src/themes/teams-high-contrast/components/Menu/menuVariables.ts +++ b/src/themes/teams-high-contrast/components/Menu/menuVariables.ts @@ -1,13 +1,80 @@ +import { getColorSchemeWithCustomDefaults } from '../../../../lib' +import { ColorValues, ColorScheme } from '../../../types' + +export type MenuColorScheme = Pick + export interface MenuVariables { + colorScheme: ColorValues + color: string activeColor: string + focusedColor: string + disabledColor: string + primaryActiveColor: string + primaryFocusedColor: string + + backgroundColor: string activeBackgroundColor: string + focusedBackgroundColor: string + primaryActiveBackgroundColor: string + primaryFocusedBackgroundColor: string + + borderColor: string + primaryBorderColor: string + primaryActiveBorderColor: string + + lineHeightBase: string } export default (siteVars: any): MenuVariables => { - return { + const v: MenuVariables = { color: siteVars.white, activeColor: siteVars.black, + focusedColor: siteVars.black, + disabledColor: siteVars.gray06, + primaryActiveColor: siteVars.white, + primaryFocusedColor: siteVars.white, + + backgroundColor: siteVars.black, activeBackgroundColor: siteVars.accessibleYellow, + focusedBackgroundColor: siteVars.accessibleYellow, + primaryActiveBackgroundColor: siteVars.accessibleYellow, + primaryFocusedBackgroundColor: siteVars.accessibleYellow, + + borderColor: siteVars.white, + primaryBorderColor: siteVars.white, + primaryActiveBorderColor: siteVars.white, + + lineHeightBase: siteVars.lineHeightBase, + colorScheme: null, + } + + const primary: ColorScheme = { + foreground: { + initial: v.color, + active: v.primaryActiveColor, + disabled: v.disabledColor, + focused: v.primaryFocusedColor, + hovered: v.primaryFocusedColor, + }, + background: { + initial: v.backgroundColor, + active: v.primaryActiveBackgroundColor, + disabled: v.disabledColor, + focused: v.primaryFocusedBackgroundColor, + hovered: v.primaryFocusedBackgroundColor, + }, + border: { + initial: v.primaryBorderColor, + active: v.primaryActiveBorderColor, + disabled: v.disabledColor, + focused: v.primaryActiveBorderColor, + hovered: v.primaryActiveBorderColor, + }, } + + v.colorScheme = getColorSchemeWithCustomDefaults(siteVars.colorScheme, primary) + v.colorScheme.primary = primary + + return v } diff --git a/src/themes/teams-high-contrast/components/Text/textVariables.ts b/src/themes/teams-high-contrast/components/Text/textVariables.ts index 935d7bc2f6..22f96cb969 100644 --- a/src/themes/teams-high-contrast/components/Text/textVariables.ts +++ b/src/themes/teams-high-contrast/components/Text/textVariables.ts @@ -1,5 +1,4 @@ import { TeamsTextVariables } from '../../../teams/components/Text/textVariables' -import { Partial } from 'types/utils' export default (siteVariables): Partial => ({ atMentionMeColor: siteVariables.accessibleYellow, diff --git a/src/themes/teams/colors.ts b/src/themes/teams/colors.ts index 199794c570..2354ce79d7 100644 --- a/src/themes/teams/colors.ts +++ b/src/themes/teams/colors.ts @@ -13,11 +13,11 @@ export const emphasisColors: EmphasisColors = { 50: '#F4F4FC', 100: '#E2E2F6', 200: '#BDBDE6', - 300: '#8F90C1', + 300: '#8B8CC7', 400: '#6E70AE', 500: '#6264A7', 600: '#55578D', - 700: '#4A4C78', + 700: '#464775', 800: '#414265', 900: '#33344A', }, @@ -38,14 +38,14 @@ export const naturalColors: NaturalColors = { }, grey: { 50: '#FFFFFF', - 100: '#E6E6E6', - 200: '#CDCCCC', - 300: '#B8B8B8', - 400: '#A2A2A2', - 500: '#8C8C8C', - 600: '#747373', - 700: '#5F5E5E', - 800: '#404040', + 100: '#FAF9F8', + 200: '#F3F2F1', + 300: '#EDEBE9', + 400: '#E1DFDD', + 500: '#C8C6C4', + 600: '#979593', + 700: '#605E5C', + 800: '#484644', 900: '#252424', }, orange: { @@ -167,22 +167,70 @@ export const colors: ColorPalette = { white: naturalColors.grey[50], } -export const colorScheme: ColorSchemeMapping = _.mapValues( - emphasisAndNaturalColors, - (colorVariants, colorName) => { - const foreground = isLightBackground(colorName) ? colors.black : colorVariants[50] +const defaultGrey = colors.grey[600] +export const colorScheme: ColorSchemeMapping = { + ..._.mapValues(emphasisAndNaturalColors, (colorVariants, colorName) => { + const foreground = isLightBackground(colorName) ? colors.black : colors.white return { - foreground, - border: foreground, - shadow: foreground, - background: colorVariants[500], - default: { - foreground: colors.grey[600], - border: colors.grey[600], - shadow: colors.grey[600], - background: colors.grey[100], + foreground: { + initial: foreground, + active: foreground, + disabled: foreground, + focused: foreground, + hovered: foreground, + }, + background: { + initial: colorVariants[500], + active: colorVariants[500], + disabled: colorVariants[100], + focused: colorVariants[200], + hovered: colorVariants[200], + }, + border: { + initial: colorVariants[500], + active: colorVariants[500], + disabled: colorVariants[100], + focused: colorVariants[200], + hovered: colorVariants[200], + }, + shadow: { + initial: foreground, + active: foreground, + disabled: foreground, + focused: foreground, + hovered: foreground, }, } + }), + default: { + foreground: { + initial: defaultGrey, + active: defaultGrey, + hovered: defaultGrey, + focused: defaultGrey, + disabled: defaultGrey, + }, + background: { + initial: colors.grey[100], + active: colors.grey[100], + focused: colors.grey[300], + hovered: colors.grey[300], + disabled: colors.grey[300], + }, + border: { + initial: colors.grey[100], + active: colors.grey[100], + focused: colors.grey[300], + hovered: colors.grey[300], + disabled: colors.grey[300], + }, + shadow: { + initial: defaultGrey, + active: defaultGrey, + hovered: defaultGrey, + focused: defaultGrey, + disabled: defaultGrey, + }, }, -) +} diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts index a188c2dd21..99088bdd85 100644 --- a/src/themes/teams/components/Label/labelStyles.ts +++ b/src/themes/teams/components/Label/labelStyles.ts @@ -13,8 +13,8 @@ const labelStyles: ComponentSlotStylesInput = { overflow: 'hidden', height: v.height, lineHeight: v.height, - color: colors.foreground, - backgroundColor: colors.background, + color: colors.foreground.initial, + backgroundColor: colors.background.initial, fontSize: pxToRem(14), borderRadius: pxToRem(3), padding: v.padding, diff --git a/src/themes/teams/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts index 8f9256fc05..39c02cb83a 100644 --- a/src/themes/teams/components/Label/labelVariables.ts +++ b/src/themes/teams/components/Label/labelVariables.ts @@ -18,8 +18,8 @@ export default (siteVars: SiteVariablesPrepared): LabelVariables => { return { colorScheme: getColorSchemeWithCustomDefaults(siteVars.colorScheme, { - foreground: color, - background: 'rgb(232, 232, 232)', + foreground: { initial: color }, + background: { initial: 'rgb(232, 232, 232)' }, }), circularRadius: pxToRem(9999), padding: `0 ${pxToRem(4)} 0 ${pxToRem(4)}`, diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index d559fe1e5a..3e5a22b3ab 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -1,5 +1,12 @@ +import * as _ from 'lodash' + import { pxToRem } from '../../../../lib' -import { ComponentSlotStyleFunction, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' +import { + ComponentSlotStyleFunction, + ComponentSlotStylesInput, + ICSSInJSStyle, + ColorScheme, +} from '../../../types' import { MenuVariables } from './menuVariables' import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem' @@ -12,61 +19,65 @@ const underlinedItem = (color: string): ICSSInJSStyle => ({ }) const getActionStyles = ({ - props: { primary, underlined, iconOnly, isFromKeyboard }, + props: { underlined, iconOnly, pointing, vertical }, variables: v, - color, + colors, }: { props: MenuItemPropsAndState variables: MenuVariables - color: string -}): ICSSInJSStyle => - underlined || iconOnly - ? { - color, - } - : primary - ? { - color: v.primaryActiveColor, - background: v.primaryActiveBackgroundColor, - } - : { - color, - background: v.activeBackgroundColor, - } + colors: ColorScheme +}): ICSSInJSStyle => { + if (underlined || iconOnly) { + return { color: v.color } + } + + if (pointing && vertical) { + return { background: v.activeBackgroundColor } + } + + return { + color: colors.foreground.active, + background: colors.background.active, + } +} const getFocusedStyles = ({ props, variables: v, - color, + colors, }: { props: MenuItemPropsAndState variables: MenuVariables - color: string + colors: ColorScheme }): ICSSInJSStyle => { - const { primary, underlined, isFromKeyboard, active } = props + const { iconOnly, underlined, isFromKeyboard, active, pointing, vertical } = props + + if (iconOnly) { + return { color: colors.border.focused } + } + if (active && !underlined) return {} + + if (underlined && !isFromKeyboard) { + return { color: v.focusedColor } + } + + if (pointing && vertical) { + return { background: v.focusedBackgroundColor } + } + return { - ...(underlined && !isFromKeyboard - ? { - color, - } - : primary - ? { - color: v.primaryFocusedColor, - background: v.primaryFocusedBackgroundColor, - } - : { - color, - background: v.focusedBackgroundColor, - }), + color: colors.foreground.focused, + background: colors.background.focused, } } const itemSeparator: ComponentSlotStyleFunction = ({ props, variables: v, + colors, }): ICSSInJSStyle => { - const { iconOnly, pointing, pills, primary, underlined, vertical } = props + const { iconOnly, pointing, pills, underlined, vertical } = props return ( !pills && @@ -78,8 +89,8 @@ const itemSeparator: ComponentSlotStyleFunction = ({ props, variables: v, + colors, }): ICSSInJSStyle => { - const { pointing, primary } = props - - let backgroundColor: string - let borderColor: string - let top: string - let borders: ICSSInJSStyle - - if (primary) { - backgroundColor = v.primaryActiveBackgroundColor - borderColor = v.primaryBorderColor - } else { - backgroundColor = v.activeBackgroundColor - borderColor = v.borderColor - } + const { pointing } = props + const borderValue = `1px solid ${colors.border.initial}` - if (pointing === 'start') { - borders = { - borderTop: `1px solid ${borderColor}`, - borderLeft: `1px solid ${borderColor}`, - } - top = '-1px' // 1px for the border - } else { - borders = { - borderBottom: `1px solid ${borderColor}`, - borderRight: `1px solid ${borderColor}`, - } - top = '100%' - } + const { top, borders }: { top: string; borders: ICSSInJSStyle } = + pointing === 'start' + ? { + top: '-1px', // 1px for the border + borders: { + borderTop: borderValue, + borderLeft: borderValue, + }, + } + : { + top: '100%', + borders: { + borderBottom: borderValue, + borderRight: borderValue, + }, + } return { '::after': { visibility: 'visible', - background: backgroundColor, + background: colors.background.active, position: 'absolute', content: '""', top, @@ -154,6 +157,7 @@ const menuItemStyles: ComponentSlotStylesInput { - const { - active, - iconOnly, - isFromKeyboard, - pointing, - primary, - underlined, - vertical, - disabled, - } = props + root: ({ props, variables: v, colors }): ICSSInJSStyle => { + const { active, iconOnly, isFromKeyboard, pointing, underlined, vertical, disabled } = props return { color: 'inherit', @@ -308,27 +289,19 @@ const menuItemStyles: ComponentSlotStylesInput ({ }) export default { - root: ({ props, variables }): ICSSInJSStyle => { - const { iconOnly, fluid, pointing, pills, primary, underlined, vertical } = props + root: ({ props, variables: v, colors }): ICSSInJSStyle => { + const { iconOnly, fluid, pointing, pills, underlined, vertical } = props + return { display: 'flex', ...(iconOnly && { alignItems: 'center' }), @@ -27,14 +30,11 @@ export default { !iconOnly && !(pointing && vertical) && !underlined && { - ...solidBorder(variables.borderColor), - ...(primary && { - ...solidBorder(variables.primaryBorderColor), - }), + ...solidBorder(colors.border.initial), borderRadius: pxToRem(4), }), ...(underlined && { - borderBottom: `2px solid ${variables.primaryUnderlinedBorderColor}`, + borderBottom: `2px solid ${v.borderColor}`, }), minHeight: pxToRem(24), margin: 0, diff --git a/src/themes/teams/components/Menu/menuVariables.ts b/src/themes/teams/components/Menu/menuVariables.ts index 2dd05e123f..ea598b0bf5 100644 --- a/src/themes/teams/components/Menu/menuVariables.ts +++ b/src/themes/teams/components/Menu/menuVariables.ts @@ -1,52 +1,78 @@ +import { getColorSchemeWithCustomDefaults } from '../../../../lib' +import { ColorValues, ColorScheme, SiteVariablesPrepared } from '../../../types' + +export type MenuColorScheme = Pick + export interface MenuVariables { + colorScheme: ColorValues + color: string + focusedColor: string + disabledColor: string + primaryActiveColor: string + primaryFocusedColor: string - activeColor: string + backgroundColor: string activeBackgroundColor: string focusedBackgroundColor: string - borderColor: string - - iconOnlyActiveColor: string - primaryActiveColor: string primaryActiveBackgroundColor: string - primaryActiveBorderColor: string - - primaryFocusedColor: string primaryFocusedBackgroundColor: string + borderColor: string primaryBorderColor: string - primaryHoverBorderColor: string - primaryUnderlinedBorderColor: string - - disabledColor: string + primaryActiveBorderColor: string lineHeightBase: string } -export default (siteVars: any): MenuVariables => { - return { +export default (siteVars: SiteVariablesPrepared): MenuVariables => { + const v: MenuVariables = { color: siteVars.gray02, + focusedColor: siteVars.black, + disabledColor: siteVars.gray06, + primaryActiveColor: siteVars.white, + primaryFocusedColor: siteVars.white, - iconOnlyActiveColor: siteVars.brand06, - - activeColor: siteVars.black, + backgroundColor: siteVars.white, activeBackgroundColor: siteVars.gray10, focusedBackgroundColor: siteVars.gray14, - borderColor: siteVars.gray08, - - primaryActiveColor: siteVars.white, primaryActiveBackgroundColor: siteVars.brand08, - primaryActiveBorderColor: siteVars.brand, - - primaryFocusedColor: siteVars.white, primaryFocusedBackgroundColor: siteVars.brand12, + borderColor: siteVars.gray08, primaryBorderColor: siteVars.brand08, - primaryHoverBorderColor: siteVars.gray08, - primaryUnderlinedBorderColor: siteVars.gray08, - - disabledColor: siteVars.gray06, + primaryActiveBorderColor: siteVars.brand, lineHeightBase: siteVars.lineHeightMedium, + colorScheme: null, } + + const primary: ColorScheme = { + foreground: { + initial: v.color, + active: v.primaryActiveColor, + disabled: v.disabledColor, + focused: v.primaryFocusedColor, + hovered: v.primaryFocusedColor, + }, + background: { + initial: v.backgroundColor, + active: v.primaryActiveBackgroundColor, + disabled: v.disabledColor, + focused: v.primaryFocusedBackgroundColor, + hovered: v.primaryFocusedBackgroundColor, + }, + border: { + initial: v.primaryBorderColor, + active: v.primaryActiveBorderColor, + disabled: v.disabledColor, + focused: v.primaryActiveBorderColor, + hovered: v.primaryActiveBorderColor, + }, + } + + v.colorScheme = getColorSchemeWithCustomDefaults(siteVars.colorScheme, primary) + v.colorScheme.primary = primary + + return v } diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts index f7cf0aac2f..442bca512a 100644 --- a/src/themes/teams/siteVariables.ts +++ b/src/themes/teams/siteVariables.ts @@ -11,23 +11,23 @@ export const htmlFontSize = '10px' // what 1rem represents // export { colors, contextualColors, emphasisColors, naturalColors, colorScheme } from './colors' +export const white = colors.white export const black = colors.black -export const gray02 = '#484644' -export const gray03 = '#605E5C' -export const gray04 = '#979593' -export const gray06 = '#C8C6C4' -export const gray08 = '#E1DFDD' -export const gray09 = '#EDEBE9' -export const gray10 = '#F3F2F1' -export const gray14 = '#FAF9F8' -export const white = colors.white +export const gray02 = colors.grey[800] +export const gray03 = colors.grey[700] +export const gray04 = colors.grey[600] +export const gray06 = colors.grey[500] +export const gray08 = colors.grey[400] +export const gray09 = colors.grey[300] +export const gray10 = colors.grey[200] +export const gray14 = colors.grey[100] export const brand = colors.primary[500] export const brand02 = colors.primary[900] -export const brand04 = '#464775' +export const brand04 = colors.primary[700] export const brand06 = colors.primary[500] -export const brand08 = '#8B8CC7' +export const brand08 = colors.primary[300] export const brand12 = colors.primary[200] export const brand14 = colors.primary[100] export const brand16 = colors.primary[50] diff --git a/src/themes/types.ts b/src/themes/types.ts index 3882596ce5..e2a55de4d1 100644 --- a/src/themes/types.ts +++ b/src/themes/types.ts @@ -96,15 +96,16 @@ export type ColorPalette = ExtendablePalette< EmphasisColorsStrict & ContextualColorsStrict & NaturalColorsStrict & PrimitiveColors > +export type ColorSchemeStates = Partial< + Record<'initial' | 'active' | 'hovered' | 'focused' | 'disabled', string> +> + /** * A type for the generic color scheme of a component based on CSS property names */ -export type ColorScheme = { - foreground: string - background: string - border: string - shadow: string -} +export type ColorScheme = Partial< + Record<'foreground' | 'background' | 'border' | 'shadow', ColorSchemeStates> +> export type ColorSchemeMapping = ColorValues & { default?: ColorScheme } @@ -197,7 +198,7 @@ export interface ComponentStyleFunctionParam< props: State & TProps variables: TVars theme: ThemePrepared - colors: Partial + colors: ColorScheme } export type ComponentSlotStyleFunction = (( diff --git a/types/utils.d.ts b/types/utils.d.ts index 73f4577490..27dd0e3f3b 100644 --- a/types/utils.d.ts +++ b/types/utils.d.ts @@ -11,8 +11,6 @@ export type Extendable = T & { export type Nullable = T | null export type NullableIfUndefined = T extends undefined ? Nullable : T -export type Partial = { [Key in keyof T]?: T[Key] } - export type ArgOf = T extends (arg: infer TArg) => any ? TArg : never export type ResultOf = T extends (...arg: any[]) => infer TResult ? TResult : never From 7d08a74c0d11c4cba29e5d080bcce2d026ac9503 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 22 Jan 2019 12:30:31 +0100 Subject: [PATCH 2/4] changelog --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d203f6c6f9..6b9de456f9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### BREAKING CHANGES +- Add `color` prop to `Menu` component, change variable names for `Menu` @Bugaa92 ([#756](https://github.com/stardust-ui/react/pull/756)) + ### Features - Export `triangle-down` and `triangle-right` icons in Teams theme @codepretty ([#785](https://github.com/stardust-ui/react/pull/785)) - Add rtl examples for `Button` and `Divider` components @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792)) @@ -52,7 +55,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Make `headerMedia` visible for screen readers in `ListItem` @layershifter ([#772](https://github.com/stardust-ui/react/pull/772)) - Cleanup for `Dropdown` examples' accessibility and added localisation example. @silviuavram ([#771](https://github.com/stardust-ui/react/pull/771)) -- Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726)) +- Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726)) ## [v0.18.0](https://github.com/stardust-ui/react/tree/v0.18.0) (2019-01-24) From 11465156b29a37d10708e44e1f8faad4d24ecedd Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 22 Jan 2019 19:16:55 +0100 Subject: [PATCH 3/4] implemented knobs for the examples --- docs/src/components/Knobs/Knobs.tsx | 3 + .../Variations/MenuExampleColor.knobs.tsx | 36 ++++++++ .../Variations/MenuExampleColor.shorthand.tsx | 83 +++++++++---------- 3 files changed, 79 insertions(+), 43 deletions(-) create mode 100644 docs/src/examples/components/Menu/Variations/MenuExampleColor.knobs.tsx diff --git a/docs/src/components/Knobs/Knobs.tsx b/docs/src/components/Knobs/Knobs.tsx index e3e2b36b8a..1ae5de957b 100644 --- a/docs/src/components/Knobs/Knobs.tsx +++ b/docs/src/components/Knobs/Knobs.tsx @@ -8,6 +8,7 @@ import KnobsValue from './KnobsValue' import KnobsBoolean from './KnobsBoolean' import KnobsScalar from './KnobsScalar' +import KnobsSelect from './KnobsSelect' const Knobs: any = createComponent( () => ({ @@ -31,6 +32,7 @@ const Knobs: any = createComponent( }), 'div', ) + Knobs.Field = KnobsField Knobs.Control = KnobsControl Knobs.Label = KnobsLabel @@ -38,5 +40,6 @@ Knobs.Value = KnobsValue Knobs.Boolean = KnobsBoolean Knobs.Scalar = KnobsScalar +Knobs.Select = KnobsSelect export default Knobs diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.knobs.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.knobs.tsx new file mode 100644 index 0000000000..d739031784 --- /dev/null +++ b/docs/src/examples/components/Menu/Variations/MenuExampleColor.knobs.tsx @@ -0,0 +1,36 @@ +import * as React from 'react' +import * as PropTypes from 'prop-types' +import * as _ from 'lodash' +import Knobs from 'docs/src/components/Knobs/Knobs' +import { ProviderConsumer } from '@stardust-ui/react' + +type MenuExampleColorKnobsProps = { + onKnobChange: () => void +} + +const MenuExampleColorKnobs = (props: MenuExampleColorKnobsProps) => { + const { onKnobChange } = props + + return ( + { + const colorsArr = _.keys(colorScheme).map(color => ({ + name: _.upperCase(color), + value: color, + })) + + return ( + + + + ) + }} + /> + ) +} + +MenuExampleColorKnobs.propTypes = { + onKnobChange: PropTypes.func.isRequired, +} + +export default MenuExampleColorKnobs diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx index 6cdf17a784..e98188771a 100644 --- a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx +++ b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import * as _ from 'lodash' -import { Menu, ProviderConsumer, Grid, Text } from '@stardust-ui/react' +import { Menu, Grid, Text } from '@stardust-ui/react' const items = [ { key: 'editorials', content: 'Editorials' }, @@ -14,48 +14,45 @@ const iconItems = [ { key: 'search', icon: 'search' }, ] -const MenuExampleColor = () => ( - { - const colorsArr = _.keys(colorScheme) - const colors = _.times(7, num => colorsArr[num % colorsArr.length]) - - return ( - - - - - - - - - - - - - - - _.pick(item, ['key', 'icon']))} - /> - - - - ) - }} - /> +const MenuExampleColor = ({ + knobs: { + selectedItem: { name, value }, + }, +}: { + knobs: { selectedItem: { name: string; value: string } } +}) => ( + + + + + + + + + + + + + + + _.pick(item, ['key', 'icon']))} + /> + + {/* */} + ) export default MenuExampleColor From c44991694ad84415c2872cfe02af26313eba9711 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 23 Jan 2019 16:59:15 +0100 Subject: [PATCH 4/4] improved examples and select knob --- docs/src/components/Knobs/KnobsBoolean.tsx | 2 +- docs/src/components/Knobs/KnobsControl.tsx | 5 ++-- docs/src/components/Knobs/KnobsField.tsx | 5 ++-- docs/src/components/Knobs/KnobsSelect.tsx | 15 +++++++--- .../Variations/MenuExampleColor.knobs.tsx | 26 +++++++++++++---- .../Variations/MenuExampleColor.shorthand.tsx | 21 +++++--------- .../MenuExampleColorComplex.shorthand.tsx | 28 +++++++++++++++++++ .../components/Menu/Variations/index.tsx | 5 ++++ 8 files changed, 78 insertions(+), 29 deletions(-) create mode 100644 docs/src/examples/components/Menu/Variations/MenuExampleColorComplex.shorthand.tsx diff --git a/docs/src/components/Knobs/KnobsBoolean.tsx b/docs/src/components/Knobs/KnobsBoolean.tsx index 20c1704729..28e8d5ff10 100644 --- a/docs/src/components/Knobs/KnobsBoolean.tsx +++ b/docs/src/components/Knobs/KnobsBoolean.tsx @@ -24,7 +24,7 @@ class KnobsBoolean extends React.Component { return ( - + diff --git a/docs/src/components/Knobs/KnobsControl.tsx b/docs/src/components/Knobs/KnobsControl.tsx index 41d5265672..5f0197a9bc 100644 --- a/docs/src/components/Knobs/KnobsControl.tsx +++ b/docs/src/components/Knobs/KnobsControl.tsx @@ -1,11 +1,12 @@ import { createComponent } from 'react-fela' +import { TextAlignProperty } from 'csstype' import { pxToRem } from 'src/lib' const KnobsControl = createComponent( - () => ({ + ({ textAlign = 'initial' }: { textAlign?: TextAlignProperty }) => ({ marginRight: pxToRem(5), verticalAlign: 'middle', - textAlign: 'center', + textAlign, }), 'span', ) diff --git a/docs/src/components/Knobs/KnobsField.tsx b/docs/src/components/Knobs/KnobsField.tsx index 2d3cf1d233..b3803838bf 100644 --- a/docs/src/components/Knobs/KnobsField.tsx +++ b/docs/src/components/Knobs/KnobsField.tsx @@ -1,9 +1,10 @@ import { createComponent } from 'react-fela' import { pxToRem } from 'src/lib' -const KnobsField = createComponent(() => ({ +const KnobsField = createComponent(({ width = 60 }: { width?: number }) => ({ display: 'grid', - gridTemplateColumns: `${pxToRem(60)} auto`, + alignItems: 'center', + gridTemplateColumns: `${pxToRem(width)} auto`, })) export default KnobsField diff --git a/docs/src/components/Knobs/KnobsSelect.tsx b/docs/src/components/Knobs/KnobsSelect.tsx index d61b5bbc3d..8c7b56c4b6 100644 --- a/docs/src/components/Knobs/KnobsSelect.tsx +++ b/docs/src/components/Knobs/KnobsSelect.tsx @@ -17,7 +17,7 @@ export interface KnobsSelectProps { } class KnobsSelect extends React.Component { - private itemsMap: ObjectOf = {} + private itemsMap: ObjectOf public static propTypes = { onChange: PropTypes.func, @@ -27,11 +27,16 @@ class KnobsSelect extends React.Component { } componentDidMount() { + this.itemsMap = {} this.props.items.forEach(item => { this.itemsMap[item.value] = item }) } + componentWillUnmount() { + this.itemsMap = {} + } + render() { const { name, items } = this.props if (!items || !items.length) { @@ -41,15 +46,17 @@ class KnobsSelect extends React.Component { const selectedItem = this.props.selectedItem || this.props.items[0] return ( - + - + ) } diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.knobs.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.knobs.tsx index d739031784..c6cf98cdec 100644 --- a/docs/src/examples/components/Menu/Variations/MenuExampleColor.knobs.tsx +++ b/docs/src/examples/components/Menu/Variations/MenuExampleColor.knobs.tsx @@ -1,27 +1,36 @@ import * as React from 'react' import * as PropTypes from 'prop-types' import * as _ from 'lodash' -import Knobs from 'docs/src/components/Knobs/Knobs' import { ProviderConsumer } from '@stardust-ui/react' +import Knobs from 'docs/src/components/Knobs/Knobs' +import { KnobsSelectItem } from 'docs/src/components/Knobs/KnobsSelect' + type MenuExampleColorKnobsProps = { onKnobChange: () => void + overrides: { selectedItem?: KnobsSelectItem } } -const MenuExampleColorKnobs = (props: MenuExampleColorKnobsProps) => { - const { onKnobChange } = props - +const MenuExampleColorKnobs = ({ + onKnobChange, + overrides: { selectedItem }, +}: MenuExampleColorKnobsProps) => { return ( { const colorsArr = _.keys(colorScheme).map(color => ({ - name: _.upperCase(color), + name: _.startCase(color), value: color, })) return ( - + ) }} @@ -31,6 +40,11 @@ const MenuExampleColorKnobs = (props: MenuExampleColorKnobsProps) => { MenuExampleColorKnobs.propTypes = { onKnobChange: PropTypes.func.isRequired, + selectedItem: PropTypes.shape({ name: PropTypes.string, value: PropTypes.string }), +} + +MenuExampleColorKnobs.defaultProps = { + selectedItem: { name: 'Primary', value: 'primary' }, } export default MenuExampleColorKnobs diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx index e98188771a..f2d0b71164 100644 --- a/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx +++ b/docs/src/examples/components/Menu/Variations/MenuExampleColor.shorthand.tsx @@ -26,32 +26,25 @@ const MenuExampleColor = ({ styles={{ justifyContent: 'left', justifyItems: 'left', alignItems: 'center' }} variables={{ gridGap: '10px' }} > - + - + - + - + - + - + - + _.pick(item, ['key', 'icon']))} /> - - {/* */} ) diff --git a/docs/src/examples/components/Menu/Variations/MenuExampleColorComplex.shorthand.tsx b/docs/src/examples/components/Menu/Variations/MenuExampleColorComplex.shorthand.tsx new file mode 100644 index 0000000000..581f675c7a --- /dev/null +++ b/docs/src/examples/components/Menu/Variations/MenuExampleColorComplex.shorthand.tsx @@ -0,0 +1,28 @@ +import * as React from 'react' +import * as _ from 'lodash' +import { Menu, ProviderConsumer } from '@stardust-ui/react' + +const items = [ + { key: 'editorials', content: 'Editorials' }, + { key: 'review', content: 'Reviews' }, + { key: 'events', content: 'Upcoming Events' }, +] + +const MenuExampleColorComplex = () => ( + { + const colors = _.keys(colorScheme) + + return ( + + ) + }} + /> +) + +export default MenuExampleColorComplex diff --git a/docs/src/examples/components/Menu/Variations/index.tsx b/docs/src/examples/components/Menu/Variations/index.tsx index 401697ac51..f6e411b961 100644 --- a/docs/src/examples/components/Menu/Variations/index.tsx +++ b/docs/src/examples/components/Menu/Variations/index.tsx @@ -24,6 +24,11 @@ const Variations = () => ( description="A Menu can have different colors." examplePath="components/Menu/Variations/MenuExampleColor" /> + )