From 99cfc93368a998cb533e61e3ba661095278fbb01 Mon Sep 17 00:00:00 2001 From: abene Date: Mon, 29 Aug 2016 22:20:45 -0700 Subject: [PATCH 01/13] adding an optional control property to the Persona control, to support edit spuser site permissions --- src/components/Persona/Persona.Props.ts | 5 +++++ src/components/Persona/Persona.scss | 19 +++++++++++++++++-- src/components/Persona/Persona.tsx | 8 ++++---- 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/components/Persona/Persona.Props.ts b/src/components/Persona/Persona.Props.ts index da3ffd528b6a7b..e8bd99228399e5 100644 --- a/src/components/Persona/Persona.Props.ts +++ b/src/components/Persona/Persona.Props.ts @@ -40,6 +40,11 @@ export interface IPersonaProps extends React.HTMLProps { */ secondaryText?: string; + /** + * Optional control to display/update, usually the role of the user. + */ + secondaryControl?: JSX.Element; + /** * Tertiary text to display, usually the status of the user. */ diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss index 2c1c9530766efc..cd8727f9440f94 100644 --- a/src/components/Persona/Persona.scss +++ b/src/components/Persona/Persona.scss @@ -148,7 +148,13 @@ $ms-color-initials-darkRed: #b91d47; display: table-cell; padding: 0 12px; vertical-align: middle; - overflow: hidden; + overflow-x: hidden; +} + +.ms-Persona-details-controls { + display: table-cell; + padding: 0 12px; + vertical-align: middle; } .ms-Persona-primaryText, @@ -171,7 +177,8 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-secondaryText, .ms-Persona-tertiaryText, -.ms-Persona-optionalText { +.ms-Persona-optionalText, +.ms-Persona-secondaryControl { color: $ms-color-neutralSecondary; font-family: $ms-font-family-regular; font-size: $ms-font-size-s; @@ -183,6 +190,10 @@ $ms-color-initials-darkRed: #b91d47; padding-top: 3px; } +.ms-Persona-secondaryControl { + padding-top: 3px; +} + .ms-Persona-tertiaryText, .ms-Persona-optionalText { padding-top: 5px; @@ -413,6 +424,10 @@ $ms-color-initials-darkRed: #b91d47; padding-top: 3px; } + .ms-Persona-secondaryControl { + padding-top: 3px; +} + .ms-Persona-tertiaryText { padding-top: 5px; } diff --git a/src/components/Persona/Persona.tsx b/src/components/Persona/Persona.tsx index b4fda7fbb44af0..2564b6461a2585 100644 --- a/src/components/Persona/Persona.tsx +++ b/src/components/Persona/Persona.tsx @@ -23,7 +23,8 @@ export class Persona extends React.Component { }; public render() { - let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails } = this.props; + let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails, secondaryControl } = this.props; + let personaDetailsClass = secondaryControl ? 'ms-Persona-details-controls' : 'ms-Persona-details'; return (
@@ -35,13 +36,12 @@ export class Persona extends React.Component { ) } { presence !== PersonaPresence.none &&
} - { !hidePersonaDetails && ( -
+
{ primaryText }
{ secondaryText ? (
{ secondaryText }
- ) : (null) } + ) : secondaryControl ? (
{ secondaryControl }
) : (null) }
{ tertiaryText }
{ optionalText }
) } From 97b361450540091da96ff624b2b8206b2b6ec1ad Mon Sep 17 00:00:00 2001 From: abene Date: Mon, 29 Aug 2016 23:05:01 -0700 Subject: [PATCH 02/13] adding an optional control property to the Persona control, to support edit spuser site permissions --- src/components/Persona/Persona.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss index cd8727f9440f94..aa06919466ce94 100644 --- a/src/components/Persona/Persona.scss +++ b/src/components/Persona/Persona.scss @@ -148,7 +148,7 @@ $ms-color-initials-darkRed: #b91d47; display: table-cell; padding: 0 12px; vertical-align: middle; - overflow-x: hidden; + overflow: hidden; } .ms-Persona-details-controls { From 1429b46d81dab9b24f137140f9592bc9f8a56d2e Mon Sep 17 00:00:00 2001 From: abene Date: Wed, 31 Aug 2016 16:46:12 -0700 Subject: [PATCH 03/13] adding an optional control property to the Persona control, to support edit spuser site permissions --- src/components/Persona/Persona.scss | 4 ++++ src/components/Persona/Persona.tsx | 9 ++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss index aa06919466ce94..2bf0353998ac48 100644 --- a/src/components/Persona/Persona.scss +++ b/src/components/Persona/Persona.scss @@ -144,10 +144,14 @@ $ms-color-initials-darkRed: #b91d47; border: 2px solid $ms-color-white; } +.ms-PersonaAll-details, .ms-Persona-details { display: table-cell; padding: 0 12px; vertical-align: middle; +} + +.ms-Persona-details { overflow: hidden; } diff --git a/src/components/Persona/Persona.tsx b/src/components/Persona/Persona.tsx index 2564b6461a2585..68a460150f66f5 100644 --- a/src/components/Persona/Persona.tsx +++ b/src/components/Persona/Persona.tsx @@ -23,8 +23,8 @@ export class Persona extends React.Component { }; public render() { - let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails, secondaryControl } = this.props; - let personaDetailsClass = secondaryControl ? 'ms-Persona-details-controls' : 'ms-Persona-details'; + let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails, innerControl } = this.props; + let personaDetailsClass = innerControl ? '.ms-PersonaAll-details' : 'ms-Persona-details'; return (
@@ -41,9 +41,12 @@ export class Persona extends React.Component {
{ primaryText }
{ secondaryText ? (
{ secondaryText }
- ) : secondaryControl ? (
{ secondaryControl }
) : (null) } + ) : (null) }
{ tertiaryText }
{ optionalText }
+ { innerControl ? ( +
{ innerControl }
+ ) : (null) }
) }
); From 80688df817aae7774dc4ac7a85e4ca0533e444e1 Mon Sep 17 00:00:00 2001 From: abene Date: Wed, 31 Aug 2016 16:50:36 -0700 Subject: [PATCH 04/13] adding an optional control property to the Persona control, to support edit spuser site permissions --- src/components/Persona/Persona.scss | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss index 2bf0353998ac48..21c622fe806480 100644 --- a/src/components/Persona/Persona.scss +++ b/src/components/Persona/Persona.scss @@ -155,12 +155,6 @@ $ms-color-initials-darkRed: #b91d47; overflow: hidden; } -.ms-Persona-details-controls { - display: table-cell; - padding: 0 12px; - vertical-align: middle; -} - .ms-Persona-primaryText, .ms-Persona-secondaryText, .ms-Persona-tertiaryText, @@ -182,7 +176,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-secondaryText, .ms-Persona-tertiaryText, .ms-Persona-optionalText, -.ms-Persona-secondaryControl { +.ms-PersonaAll-details { color: $ms-color-neutralSecondary; font-family: $ms-font-family-regular; font-size: $ms-font-size-s; @@ -194,7 +188,7 @@ $ms-color-initials-darkRed: #b91d47; padding-top: 3px; } -.ms-Persona-secondaryControl { +.ms-PersonaAll-details { padding-top: 3px; } @@ -428,7 +422,7 @@ $ms-color-initials-darkRed: #b91d47; padding-top: 3px; } - .ms-Persona-secondaryControl { + .ms-PersonaAll-details { padding-top: 3px; } From d0754737531a5e1d540332ecb072163222c41a99 Mon Sep 17 00:00:00 2001 From: abene Date: Wed, 31 Aug 2016 16:52:26 -0700 Subject: [PATCH 05/13] adding an optional control property to the Persona control, to support edit spuser site permissions --- src/components/Persona/Persona.Props.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Persona/Persona.Props.ts b/src/components/Persona/Persona.Props.ts index e8bd99228399e5..b80b2eed0f6509 100644 --- a/src/components/Persona/Persona.Props.ts +++ b/src/components/Persona/Persona.Props.ts @@ -43,7 +43,7 @@ export interface IPersonaProps extends React.HTMLProps { /** * Optional control to display/update, usually the role of the user. */ - secondaryControl?: JSX.Element; + innerControl?: JSX.Element; /** * Tertiary text to display, usually the status of the user. From e66c6c05eda0635a9661cc8a2a83c354d1023b58 Mon Sep 17 00:00:00 2001 From: abene Date: Wed, 31 Aug 2016 17:22:16 -0700 Subject: [PATCH 06/13] adding an optional control property to the Persona control, to support edit spuser site permissions --- src/components/Persona/Persona.scss | 53 +++++++++++++++++++++++++---- src/components/Persona/Persona.tsx | 4 +-- 2 files changed, 48 insertions(+), 9 deletions(-) diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss index 21c622fe806480..b3a564ba3f80f6 100644 --- a/src/components/Persona/Persona.scss +++ b/src/components/Persona/Persona.scss @@ -144,7 +144,7 @@ $ms-color-initials-darkRed: #b91d47; border: 2px solid $ms-color-white; } -.ms-PersonaAll-details, +.ms-Persona-detailsWithInnerControl, .ms-Persona-details { display: table-cell; padding: 0 12px; @@ -176,7 +176,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-secondaryText, .ms-Persona-tertiaryText, .ms-Persona-optionalText, -.ms-PersonaAll-details { +.ms-Persona-detailsWithInnerControl { color: $ms-color-neutralSecondary; font-family: $ms-font-family-regular; font-size: $ms-font-size-s; @@ -188,7 +188,7 @@ $ms-color-initials-darkRed: #b91d47; padding-top: 3px; } -.ms-PersonaAll-details { +.ms-Persona-detailsWithInnerControl { padding-top: 3px; } @@ -269,6 +269,10 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-secondaryText { display: none; } + + .ms-Persona-detailsWithInnerControl { + display: none; +} } @@ -283,6 +287,10 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-primaryText:after { content: ';'; } + + .ms-Persona-detailsWithInnerControl { + display: none; +} } @@ -294,6 +302,10 @@ $ms-color-initials-darkRed: #b91d47; width: 12px; top: 10px; } + + .ms-Persona-detailsWithInnerControl { + display: none; +} } @@ -332,6 +344,10 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-secondaryText { display: none; } + + .ms-Persona-detailsWithInnerControl { + display: none; +} } @@ -343,6 +359,9 @@ $ms-color-initials-darkRed: #b91d47; width: 4px; left: 0; } + .ms-Persona-detailsWithInnerControl { + display: none; +} } @@ -381,6 +400,10 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-secondaryText { padding-top: 1px; } + + .ms-Persona-detailsWithInnerControl { + display: none; +} } @@ -392,6 +415,10 @@ $ms-color-initials-darkRed: #b91d47; width: 4px; left: 0; } + + .ms-Persona-detailsWithInnerControl { + display: none; +} } @@ -422,10 +449,6 @@ $ms-color-initials-darkRed: #b91d47; padding-top: 3px; } - .ms-PersonaAll-details { - padding-top: 3px; -} - .ms-Persona-tertiaryText { padding-top: 5px; } @@ -433,6 +456,10 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-tertiaryText { display: block; // Show tertiary text } + + .ms-Persona-detailsWithInnerControl { + display: none; +} } @@ -444,6 +471,10 @@ $ms-color-initials-darkRed: #b91d47; width: 7px; left: 0; } + + .ms-Persona-detailsWithInnerControl { + display: none; + } } @@ -491,6 +522,10 @@ $ms-color-initials-darkRed: #b91d47; padding-top: 5px; display: block; // Show tertiary and optional text } + + .ms-Persona-detailsWithInnerControl { + display: none; + } } @@ -502,6 +537,10 @@ $ms-color-initials-darkRed: #b91d47; width: 9px; left: 0; } + + .ms-Persona-detailsWithInnerControl { + display: none; + } } diff --git a/src/components/Persona/Persona.tsx b/src/components/Persona/Persona.tsx index 68a460150f66f5..b75da0b3c1a016 100644 --- a/src/components/Persona/Persona.tsx +++ b/src/components/Persona/Persona.tsx @@ -24,7 +24,7 @@ export class Persona extends React.Component { public render() { let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails, innerControl } = this.props; - let personaDetailsClass = innerControl ? '.ms-PersonaAll-details' : 'ms-Persona-details'; + let personaDetailsClass = innerControl ? 'ms-Persona-detailsWithInnerControl' : 'ms-Persona-details'; return (
@@ -45,7 +45,7 @@ export class Persona extends React.Component {
{ tertiaryText }
{ optionalText }
{ innerControl ? ( -
{ innerControl }
+
{ innerControl }
) : (null) }
) }
From 3961871c23cbdb96b79cce138b59026797515ef4 Mon Sep 17 00:00:00 2001 From: abene Date: Wed, 31 Aug 2016 17:27:28 -0700 Subject: [PATCH 07/13] adding an optional control property to the Persona control, to support edit spuser site permissions --- src/components/Persona/Persona.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss index b3a564ba3f80f6..e16d8d079cd7d8 100644 --- a/src/components/Persona/Persona.scss +++ b/src/components/Persona/Persona.scss @@ -344,10 +344,6 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-secondaryText { display: none; } - - .ms-Persona-detailsWithInnerControl { - display: none; -} } From 672fc58dff0e4c67a09ba864b5c34df5a260ab32 Mon Sep 17 00:00:00 2001 From: abene Date: Thu, 1 Sep 2016 12:20:31 -0700 Subject: [PATCH 08/13] adding an optional control property to the Persona control, to support edit spuser site permissions --- src/components/Persona/Persona.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Persona/Persona.tsx b/src/components/Persona/Persona.tsx index b75da0b3c1a016..ee7fde41b631bc 100644 --- a/src/components/Persona/Persona.tsx +++ b/src/components/Persona/Persona.tsx @@ -37,7 +37,7 @@ export class Persona extends React.Component { { presence !== PersonaPresence.none &&
} { !hidePersonaDetails && ( -
+
{ primaryText }
{ secondaryText ? (
{ secondaryText }
@@ -47,8 +47,8 @@ export class Persona extends React.Component { { innerControl ? (
{ innerControl }
) : (null) } -
) } -
+ ) } + ); } } From e5289470e2975307241a007320bae29320812c86 Mon Sep 17 00:00:00 2001 From: abene Date: Thu, 1 Sep 2016 12:41:24 -0700 Subject: [PATCH 09/13] adding an optional control property to the Persona control, to support edit spuser site permissions --- src/components/Persona/Persona.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss index e16d8d079cd7d8..57db936454d301 100644 --- a/src/components/Persona/Persona.scss +++ b/src/components/Persona/Persona.scss @@ -272,7 +272,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-detailsWithInnerControl { display: none; -} + } } @@ -290,7 +290,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-detailsWithInnerControl { display: none; -} + } } @@ -305,7 +305,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-detailsWithInnerControl { display: none; -} + } } @@ -357,7 +357,7 @@ $ms-color-initials-darkRed: #b91d47; } .ms-Persona-detailsWithInnerControl { display: none; -} + } } @@ -399,7 +399,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-detailsWithInnerControl { display: none; -} + } } @@ -414,7 +414,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-detailsWithInnerControl { display: none; -} + } } @@ -455,7 +455,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-detailsWithInnerControl { display: none; -} + } } @@ -470,7 +470,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-detailsWithInnerControl { display: none; - } + } } @@ -521,7 +521,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-detailsWithInnerControl { display: none; - } + } } @@ -536,7 +536,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-detailsWithInnerControl { display: none; - } + } } From 9f29593b739cadacd1d5e2bc15ccc3c63fffaeda Mon Sep 17 00:00:00 2001 From: abene Date: Thu, 1 Sep 2016 14:58:30 -0700 Subject: [PATCH 10/13] adding an optional control property to the Persona control, to support edit spuser site permissions --- src/components/Persona/Persona.scss | 51 +---------------------------- src/components/Persona/Persona.tsx | 11 +++---- 2 files changed, 5 insertions(+), 57 deletions(-) diff --git a/src/components/Persona/Persona.scss b/src/components/Persona/Persona.scss index 57db936454d301..c8b18136f3744c 100644 --- a/src/components/Persona/Persona.scss +++ b/src/components/Persona/Persona.scss @@ -144,17 +144,12 @@ $ms-color-initials-darkRed: #b91d47; border: 2px solid $ms-color-white; } -.ms-Persona-detailsWithInnerControl, .ms-Persona-details { display: table-cell; padding: 0 12px; vertical-align: middle; } -.ms-Persona-details { - overflow: hidden; -} - .ms-Persona-primaryText, .ms-Persona-secondaryText, .ms-Persona-tertiaryText, @@ -175,8 +170,7 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-secondaryText, .ms-Persona-tertiaryText, -.ms-Persona-optionalText, -.ms-Persona-detailsWithInnerControl { +.ms-Persona-optionalText { color: $ms-color-neutralSecondary; font-family: $ms-font-family-regular; font-size: $ms-font-size-s; @@ -188,10 +182,6 @@ $ms-color-initials-darkRed: #b91d47; padding-top: 3px; } -.ms-Persona-detailsWithInnerControl { - padding-top: 3px; -} - .ms-Persona-tertiaryText, .ms-Persona-optionalText { padding-top: 5px; @@ -269,10 +259,6 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-secondaryText { display: none; } - - .ms-Persona-detailsWithInnerControl { - display: none; - } } @@ -287,10 +273,6 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-primaryText:after { content: ';'; } - - .ms-Persona-detailsWithInnerControl { - display: none; - } } @@ -302,10 +284,6 @@ $ms-color-initials-darkRed: #b91d47; width: 12px; top: 10px; } - - .ms-Persona-detailsWithInnerControl { - display: none; - } } @@ -355,9 +333,6 @@ $ms-color-initials-darkRed: #b91d47; width: 4px; left: 0; } - .ms-Persona-detailsWithInnerControl { - display: none; - } } @@ -396,10 +371,6 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-secondaryText { padding-top: 1px; } - - .ms-Persona-detailsWithInnerControl { - display: none; - } } @@ -411,10 +382,6 @@ $ms-color-initials-darkRed: #b91d47; width: 4px; left: 0; } - - .ms-Persona-detailsWithInnerControl { - display: none; - } } @@ -452,10 +419,6 @@ $ms-color-initials-darkRed: #b91d47; .ms-Persona-tertiaryText { display: block; // Show tertiary text } - - .ms-Persona-detailsWithInnerControl { - display: none; - } } @@ -467,10 +430,6 @@ $ms-color-initials-darkRed: #b91d47; width: 7px; left: 0; } - - .ms-Persona-detailsWithInnerControl { - display: none; - } } @@ -518,10 +477,6 @@ $ms-color-initials-darkRed: #b91d47; padding-top: 5px; display: block; // Show tertiary and optional text } - - .ms-Persona-detailsWithInnerControl { - display: none; - } } @@ -533,10 +488,6 @@ $ms-color-initials-darkRed: #b91d47; width: 9px; left: 0; } - - .ms-Persona-detailsWithInnerControl { - display: none; - } } diff --git a/src/components/Persona/Persona.tsx b/src/components/Persona/Persona.tsx index ee7fde41b631bc..a46b3c523b71b1 100644 --- a/src/components/Persona/Persona.tsx +++ b/src/components/Persona/Persona.tsx @@ -23,10 +23,9 @@ export class Persona extends React.Component { }; public render() { - let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails, innerControl } = this.props; - let personaDetailsClass = innerControl ? 'ms-Persona-detailsWithInnerControl' : 'ms-Persona-details'; + let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails } = this.props; - return ( + return (
{ size !== PersonaSize.tiny && (
@@ -37,16 +36,14 @@ export class Persona extends React.Component { { presence !== PersonaPresence.none &&
} { !hidePersonaDetails && ( -
+
{ primaryText }
{ secondaryText ? (
{ secondaryText }
) : (null) }
{ tertiaryText }
{ optionalText }
- { innerControl ? ( -
{ innerControl }
- ) : (null) } + { this.props.children }
) }
); From 969aace3a65f8d37952051c12aed9e15e05c3a4d Mon Sep 17 00:00:00 2001 From: abene Date: Thu, 1 Sep 2016 15:50:33 -0700 Subject: [PATCH 11/13] resolve comments --- src/components/Persona/Persona.Props.ts | 5 ----- src/components/Persona/Persona.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/Persona/Persona.Props.ts b/src/components/Persona/Persona.Props.ts index b80b2eed0f6509..e3cf13f7cf940e 100644 --- a/src/components/Persona/Persona.Props.ts +++ b/src/components/Persona/Persona.Props.ts @@ -35,11 +35,6 @@ export interface IPersonaProps extends React.HTMLProps { */ presence?: PersonaPresence; - /** - * Secondary text to display, usually the role of the user. - */ - secondaryText?: string; - /** * Optional control to display/update, usually the role of the user. */ diff --git a/src/components/Persona/Persona.tsx b/src/components/Persona/Persona.tsx index a46b3c523b71b1..55bc3523122a28 100644 --- a/src/components/Persona/Persona.tsx +++ b/src/components/Persona/Persona.tsx @@ -23,9 +23,9 @@ export class Persona extends React.Component { }; public render() { - let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails } = this.props; + let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails } = this.props; - return ( + return (
{ size !== PersonaSize.tiny && (
@@ -44,8 +44,8 @@ export class Persona extends React.Component {
{ tertiaryText }
{ optionalText }
{ this.props.children } -
) } -
+
) } +
); } } From 50d8142dcccd6d86a72b0a574991ff84bde8597d Mon Sep 17 00:00:00 2001 From: abene Date: Thu, 1 Sep 2016 16:04:58 -0700 Subject: [PATCH 12/13] resolve comments --- src/components/Persona/Persona.Props.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Persona/Persona.Props.ts b/src/components/Persona/Persona.Props.ts index e3cf13f7cf940e..da3ffd528b6a7b 100644 --- a/src/components/Persona/Persona.Props.ts +++ b/src/components/Persona/Persona.Props.ts @@ -36,9 +36,9 @@ export interface IPersonaProps extends React.HTMLProps { presence?: PersonaPresence; /** - * Optional control to display/update, usually the role of the user. + * Secondary text to display, usually the role of the user. */ - innerControl?: JSX.Element; + secondaryText?: string; /** * Tertiary text to display, usually the status of the user. From 97e0884c74fdfaca53e0b52d43d3f0d477f239a9 Mon Sep 17 00:00:00 2001 From: abene Date: Thu, 1 Sep 2016 16:08:14 -0700 Subject: [PATCH 13/13] Minor changes. --- src/components/Persona/Persona.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/Persona/Persona.tsx b/src/components/Persona/Persona.tsx index 55bc3523122a28..d52c2106afff70 100644 --- a/src/components/Persona/Persona.tsx +++ b/src/components/Persona/Persona.tsx @@ -23,17 +23,28 @@ export class Persona extends React.Component { }; public render() { - let { className, size, imageUrl, imageInitials, initialsColor, presence, primaryText, secondaryText, tertiaryText, optionalText, hidePersonaDetails } = this.props; + let { + className, + size, + imageUrl, + imageInitials, + initialsColor, + presence, + primaryText, + secondaryText, + tertiaryText, + optionalText, + hidePersonaDetails + } = this.props; - return ( -
+ return ( +
{ size !== PersonaSize.tiny && (
{ imageInitials }
) } - { presence !== PersonaPresence.none &&
} { !hidePersonaDetails && (