From bfee520d298d230dfba8d6c44c2bb3f282077b21 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Mon, 4 Feb 2019 10:12:09 -0800 Subject: [PATCH 1/4] adding more descriptive text for accordion --- docs/src/examples/components/Accordion/Types/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/examples/components/Accordion/Types/index.tsx b/docs/src/examples/components/Accordion/Types/index.tsx index 2f197ca1c1..ef06be53c5 100644 --- a/docs/src/examples/components/Accordion/Types/index.tsx +++ b/docs/src/examples/components/Accordion/Types/index.tsx @@ -11,7 +11,7 @@ const Types = () => ( /> From 9211da6d50571b6d76a61a03f6b4732d16978517 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Fri, 15 Feb 2019 15:37:56 -0800 Subject: [PATCH 2/4] small check-ins for changing icon and hover behavior. --- .../react/src/components/Accordion/AccordionTitle.tsx | 1 + .../teams/components/Accordion/accordionTitleStyles.ts | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/packages/react/src/components/Accordion/AccordionTitle.tsx b/packages/react/src/components/Accordion/AccordionTitle.tsx index ed9f8c5e95..edd917d73a 100644 --- a/packages/react/src/components/Accordion/AccordionTitle.tsx +++ b/packages/react/src/components/Accordion/AccordionTitle.tsx @@ -71,6 +71,7 @@ class AccordionTitle extends UIComponent, any> { defaultProps: { direction: active ? 'bottom' : 'end', styles: styles.indicator, + icon: 'triangle-down', }, })} main={rtlTextContainer.createFor({ element: content })} diff --git a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts index d368fb80d5..81613c6742 100644 --- a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts +++ b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts @@ -4,9 +4,17 @@ const accordionTitleStyles = { verticalAlign: 'middle', padding: '.5rem 0', cursor: 'pointer', + + ':hover': { + [`.ui-indicator`]: { + opacity: 1, + }, + }, }), indicator: () => ({ + marginTop: '-.4rem', userSelect: 'none', + opacity: 0.5, }), } From 8033e7c7dd3b6da1bdeb71635650f94ec31774f0 Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Wed, 20 Feb 2019 14:25:39 -0800 Subject: [PATCH 3/4] changes to add icon to accordion --- ...rdionPanelCustomTitleExample.shorthand.tsx | 23 ++++++++++++++++ .../src/components/Accordion/Accordion.tsx | 6 ++++- .../components/Accordion/AccordionContent.tsx | 4 +++ .../components/Accordion/AccordionTitle.tsx | 26 +++++++++++++------ .../src/components/Indicator/Indicator.tsx | 1 + .../Accordion/accordionContentStyles.ts | 5 ++++ .../Accordion/accordionTitleStyles.ts | 9 ++++--- .../svg/ProcessedIcons/icons-indicator.tsx | 11 -------- .../Icon/svg/ProcessedIcons/index-new.ts | 2 -- .../Icon/svg/ProcessedIcons/index.ts | 2 -- 10 files changed, 62 insertions(+), 27 deletions(-) delete mode 100644 packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-indicator.tsx diff --git a/docs/src/examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand.tsx b/docs/src/examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand.tsx index 53b4e02850..8d7054ab2b 100644 --- a/docs/src/examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand.tsx +++ b/docs/src/examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand.tsx @@ -19,6 +19,29 @@ class AccordionPanelCustomTitleExample extends React.Component { content: 'Here is a list of warnings discovered.', }, }, + { + title: { + content: ( +
+ Someone has added Someone Else to the team +
+ ), + icon: { name: 'participant-add', variables: { outline: true } }, + }, + content: { + key: 'peopleadded', + content: ( +
+
+ Someone has added Someone Else to the team +
+
+ Someone has added Someone Else to the team +
+
+ ), + }, + }, ] return diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx index fc3a9667ff..78418c7488 100644 --- a/packages/react/src/components/Accordion/Accordion.tsx +++ b/packages/react/src/components/Accordion/Accordion.tsx @@ -158,6 +158,7 @@ class Accordion extends AutoControlledComponent, any> _.each(panels, (panel, index) => { const { content, title } = panel const active = this.isIndexActive(index) + const indented = title.hasOwnProperty('icon') children.push( AccordionTitle.create(title, { @@ -168,7 +169,10 @@ class Accordion extends AutoControlledComponent, any> ) children.push( AccordionContent.create(content, { - defaultProps: { active }, + defaultProps: { + active, + indented, + }, render: renderPanelContent, }), ) diff --git a/packages/react/src/components/Accordion/AccordionContent.tsx b/packages/react/src/components/Accordion/AccordionContent.tsx index a26507028f..edf429aa38 100644 --- a/packages/react/src/components/Accordion/AccordionContent.tsx +++ b/packages/react/src/components/Accordion/AccordionContent.tsx @@ -20,6 +20,9 @@ export interface AccordionContentProps /** Whether or not the content is visible. */ active?: boolean + /** Whether or not content should be indented */ + indented?: boolean + /** * Called on click. * @@ -43,6 +46,7 @@ class AccordionContent extends UIComponent, an ...commonPropTypes.createCommon(), active: PropTypes.bool, onClick: PropTypes.func, + indented: PropTypes.bool, } renderComponent({ ElementType, classes, unhandledProps }) { diff --git a/packages/react/src/components/Accordion/AccordionTitle.tsx b/packages/react/src/components/Accordion/AccordionTitle.tsx index edd917d73a..62fd75f8da 100644 --- a/packages/react/src/components/Accordion/AccordionTitle.tsx +++ b/packages/react/src/components/Accordion/AccordionTitle.tsx @@ -14,6 +14,7 @@ import { rtlTextContainer, } from '../../lib' import { ReactProps, ComponentEventHandler, ShorthandValue } from '../../types' +import Icon from '../Icon/Icon' import Indicator from '../Indicator/Indicator' import Layout from '../Layout/Layout' @@ -37,6 +38,9 @@ export interface AccordionTitleProps /** Shorthand for the active indicator. */ indicator?: ShorthandValue + + /** Shorthand for the icon. */ + icon?: ShorthandValue } /** @@ -55,6 +59,7 @@ class AccordionTitle extends UIComponent, any> { index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), onClick: PropTypes.func, indicator: customPropTypes.itemShorthand, + icon: customPropTypes.itemShorthand, } handleClick = e => { @@ -62,18 +67,23 @@ class AccordionTitle extends UIComponent, any> { } renderComponent({ ElementType, classes, unhandledProps, styles }) { - const { children, content, indicator, active } = this.props + const { children, content, icon, indicator, active } = this.props const indicatorWithDefaults = indicator === undefined ? {} : indicator + const indicatorIcon = icon === undefined ? {} : icon const contentElement = ( + } main={rtlTextContainer.createFor({ element: content })} /> ) diff --git a/packages/react/src/components/Indicator/Indicator.tsx b/packages/react/src/components/Indicator/Indicator.tsx index 63c184547b..4380b43177 100644 --- a/packages/react/src/components/Indicator/Indicator.tsx +++ b/packages/react/src/components/Indicator/Indicator.tsx @@ -45,6 +45,7 @@ class Indicator extends UIComponent, any> { static defaultProps = { as: 'span', direction: 'bottom', + icon: 'triangle-down', } renderComponent({ ElementType, classes, unhandledProps, rtl }) { diff --git a/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts b/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts index 679d66c498..aee92a8271 100644 --- a/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts +++ b/packages/react/src/themes/teams/components/Accordion/accordionContentStyles.ts @@ -4,7 +4,12 @@ const accordionContentStyles = { root: ({ props }): ICSSInJSStyle => ({ display: 'none', verticalAlign: 'middle', + marginLeft: '24px', ...(props.active && { display: 'block' }), + ...(props.indented && { + // marginLeft should be IndicatorWidth + IconWidth + marginLeft: '48px', + }), }), } diff --git a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts index 81613c6742..1282fece91 100644 --- a/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts +++ b/packages/react/src/themes/teams/components/Accordion/accordionTitleStyles.ts @@ -1,17 +1,20 @@ +import { ICSSInJSStyle } from '../../../types' +import Indicator from '../../../../components/Indicator/Indicator' + const accordionTitleStyles = { - root: () => ({ + root: (): ICSSInJSStyle => ({ display: 'inline-block', verticalAlign: 'middle', padding: '.5rem 0', cursor: 'pointer', ':hover': { - [`.ui-indicator`]: { + [`& .${Indicator.className}`]: { opacity: 1, }, }, }), - indicator: () => ({ + indicator: (): ICSSInJSStyle => ({ marginTop: '-.4rem', userSelect: 'none', opacity: 0.5, diff --git a/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-indicator.tsx b/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-indicator.tsx deleted file mode 100644 index 6a9ad5e9b7..0000000000 --- a/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/icons-indicator.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react' -import { TeamsProcessedSvgIconSpec } from '../types' - -export default { - icon: ({ classes }) => ( - - - - ), - styles: {}, -} as TeamsProcessedSvgIconSpec diff --git a/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/index-new.ts b/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/index-new.ts index 4bdc1490f4..9b2ce0fa7a 100644 --- a/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/index-new.ts +++ b/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/index-new.ts @@ -157,7 +157,6 @@ import processedIcons_inputvalid from './icons-input-valid' import processedIcons_inputinvalid from './icons-input-invalid' import processedIcons_info from './icons-info' import processedIcons_inferred from './icons-inferred' -import processedIcons_indicator from './icons-indicator' import processedIcons_indent from './icons-indent' import processedIcons_image from './icons-image' import processedIcons_horizontalrule from './icons-horizontal-rule' @@ -460,7 +459,6 @@ export default { processedIcons_inputinvalid, processedIcons_info, processedIcons_inferred, - processedIcons_indicator, processedIcons_indent, processedIcons_image, processedIcons_horizontalrule, diff --git a/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/index.ts b/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/index.ts index 7520f0a28b..b97e1d1a88 100644 --- a/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/index.ts +++ b/packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/index.ts @@ -158,7 +158,6 @@ import processedIcons_inputvalid from './icons-input-valid' import processedIcons_inputinvalid from './icons-input-invalid' import processedIcons_info from './icons-info' import processedIcons_inferred from './icons-inferred' -import processedIcons_indicator from './icons-indicator' import processedIcons_indent from './icons-indent' import processedIcons_image from './icons-image' import processedIcons_horizontalrule from './icons-horizontal-rule' @@ -461,7 +460,6 @@ export default { processedIcons_inputinvalid, processedIcons_info, processedIcons_inferred, - processedIcons_indicator, processedIcons_indent, processedIcons_image, processedIcons_horizontalrule, From 274f70edf8a8dbfe5cc0db1ce7350c454ffde91f Mon Sep 17 00:00:00 2001 From: Brian Calvery Date: Wed, 20 Feb 2019 15:22:34 -0800 Subject: [PATCH 4/4] add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c5d1afa49..a76015256e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Display correctly images in portrait mode inside `Avatar` @layershifter ([#899](https://github.com/stardust-ui/react/pull/899)) - Expose `Popup`'s content Ref @sophieH29 ([#913](https://github.com/stardust-ui/react/pull/913)) - Fix `Button` Teams theme styles to use semibold weight @notandrew ([#829](https://github.com/stardust-ui/react/pull/829)) +- Fix `Accordion` and `Indicator` Themeing update @bcalvery ([#939](https://github.com/stardust-ui/react/pull/939)) ## [v0.21.1](https://github.com/stardust-ui/react/tree/v0.21.1) (2019-02-14)