Skip to content
Permalink
Browse files

fix(chat): sneak peak is now sneak peek w/breaking change (#3004)

* fix(chat): sneak peak is now sneak peek

Remove typo from chat component docs and JS, but it still remains in the CSS

* fix(chat): sneak peak is now sneak peek

CSS classes now reference sneak-peek instead of sneak-peak

BREAKING CHANGE: (class name) 'slds-chat-message__text-sneak-peak' is now 'slds-chat-message__text-sneak-peek'

* fix(chat): update snapshot test

* fix(chat): preserve both css classes for backwards compatibility
  • Loading branch information...
cordeliadillon authored and brandonferrua committed Jan 22, 2018
1 parent 9552b71 commit cdaabbfde10a48450d690ac3f97a99bcd53436c1
@@ -1,6 +1,6 @@
{
"snapshot": {
"html": "<div class=\"slds-chat-message__body\">\n <div class=\"slds-chat-message__text slds-chat-message__text_inbound slds-chat-message__text_sneak-peak\">\n <span class=\"slds-icon-typing slds-is-animated slds-is-paused\" title=\"Customer is typing\">\n <span class=\"slds-icon-typing__dot\"></span>\n <span class=\"slds-icon-typing__dot\"></span>\n <span class=\"slds-icon-typing__dot\"></span>\n <span class=\"slds-assistive-text\">Customer is typing</span>\n </span>\n <span aria-hidden=\"true\">Message</span>\n </div>\n</div>",
"html": "<div class=\"slds-chat-message__body\">\n <div class=\"slds-chat-message__text slds-chat-message__text_inbound slds-chat-message__text_sneak-peek\">\n <span class=\"slds-icon-typing slds-is-animated slds-is-paused\" title=\"Customer is typing\">\n <span class=\"slds-icon-typing__dot\"></span>\n <span class=\"slds-icon-typing__dot\"></span>\n <span class=\"slds-icon-typing__dot\"></span>\n <span class=\"slds-assistive-text\">Customer is typing</span>\n </span>\n <span aria-hidden=\"true\">Message</span>\n </div>\n</div>",
"style": [
"animation-delay: 0s; animation-direction: normal; animation-duration: 0s; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation-play-state: running; animation-timing-function: ease; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border-bottom-color: rgb(62, 62, 60); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-bottom-style: none; border-bottom-width: 0px; border-collapse: separate; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(62, 62, 60); border-left-style: none; border-left-width: 0px; border-right-color: rgb(62, 62, 60); border-right-style: none; border-right-width: 0px; border-top-color: rgb(62, 62, 60); border-top-left-radius: 0px; border-top-right-radius: 0px; border-top-style: none; border-top-width: 0px; bottom: auto; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(62, 62, 60); content: ; cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font-family: \"Salesforce Sans\", Arial, sans-serif; font-kerning: auto; font-size: 13px; font-stretch: 100%; font-style: normal; font-variant: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-weight: 400; height: 35px; image-rendering: auto; isolation: auto; justify-items: normal; justify-self: auto; left: auto; letter-spacing: normal; line-height: 19.5px; list-style-image: none; list-style-position: outside; list-style-type: disc; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: none; max-width: none; min-height: 0px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset-distance: 0px; offset-path: none; offset-rotate: auto 0deg; opacity: 1; orphans: 2; outline-color: rgb(62, 62, 60); outline-offset: 0px; outline-style: none; outline-width: 0px; overflow-anchor: auto; overflow-wrap: normal; overflow-x: visible; overflow-y: visible; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; pointer-events: auto; position: static; resize: none; right: auto; scroll-behavior: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none solid rgb(62, 62, 60); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: rgb(62, 62, 60); text-decoration-skip: objects; text-underline-position: auto; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: 100%; text-overflow: clip; text-transform: none; top: auto; touch-action: auto; transition-delay: 0s; transition-duration: 0s; transition-property: all; transition-timing-function: ease; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: normal; widows: 2; width: 1280px; will-change: auto; word-break: normal; word-spacing: 0px; word-wrap: normal; z-index: auto; zoom: 1; -webkit-appearance: none; backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-border-horizontal-spacing: 0px; -webkit-border-image: none; -webkit-border-vertical-spacing: 0px; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-reflect: none; column-count: auto; column-gap: normal; column-rule-color: rgb(62, 62, 60); column-rule-style: none; column-rule-width: 0px; column-span: none; column-width: auto; align-content: normal; align-items: normal; align-self: auto; flex-basis: auto; flex-grow: 0; flex-shrink: 1; flex-direction: row; flex-wrap: nowrap; justify-content: normal; -webkit-font-smoothing: auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-column-end: auto; grid-column-start: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; grid-row-end: auto; grid-row-start: auto; grid-column-gap: 0px; grid-row-gap: 0px; -webkit-highlight: none; hyphens: manual; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: auto; -webkit-margin-before-collapse: collapse; -webkit-margin-after-collapse: collapse; -webkit-mask-box-image: none; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-clip: border-box; -webkit-mask-composite: source-over; -webkit-mask-image: none; -webkit-mask-origin: border-box; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; order: 0; perspective: none; perspective-origin: 640px 17.5px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(62, 62, 60); -webkit-text-emphasis-position: over; -webkit-text-emphasis-style: none; -webkit-text-fill-color: rgb(62, 62, 60); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgb(62, 62, 60); -webkit-text-stroke-width: 0px; transform: none; transform-origin: 640px 17.5px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: auto; -webkit-writing-mode: horizontal-tb; -webkit-app-region: no-drag; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: sRGB; color-interpolation-filters: linearRGB; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker-end: none; marker-mid: none; marker-start: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: fill stroke markers; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto; caret-color: rgb(62, 62, 60); line-break: auto;",
"animation-delay: 0s; animation-direction: normal; animation-duration: 0s; animation-fill-mode: none; animation-iteration-count: 1; animation-name: none; animation-play-state: running; animation-timing-function: ease; background-attachment: scroll; background-blend-mode: normal; background-clip: border-box; background-color: rgb(242, 242, 243); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border-bottom-color: rgb(62, 62, 60); border-bottom-left-radius: 0px; border-bottom-right-radius: 8px; border-bottom-style: none; border-bottom-width: 0px; border-collapse: separate; border-image-outset: 0px; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(62, 62, 60); border-left-style: none; border-left-width: 0px; border-right-color: rgb(62, 62, 60); border-right-style: none; border-right-width: 0px; border-top-color: rgb(62, 62, 60); border-top-left-radius: 8px; border-top-right-radius: 8px; border-top-style: none; border-top-width: 0px; bottom: auto; box-shadow: none; box-sizing: border-box; break-after: auto; break-before: auto; break-inside: auto; caption-side: top; clear: none; clip: auto; color: rgb(62, 62, 60); content: ; cursor: auto; direction: ltr; display: block; empty-cells: show; float: none; font-family: \"Salesforce Sans\", Arial, sans-serif; font-kerning: auto; font-size: 13px; font-stretch: 100%; font-style: italic; font-variant: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-weight: 400; height: 35px; image-rendering: auto; isolation: auto; justify-items: normal; justify-self: auto; left: auto; letter-spacing: normal; line-height: 19.5px; list-style-image: none; list-style-position: outside; list-style-type: disc; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; max-height: none; max-width: 420px; min-height: 32px; min-width: 0px; mix-blend-mode: normal; object-fit: fill; object-position: 50% 50%; offset-distance: 0px; offset-path: none; offset-rotate: auto 0deg; opacity: 1; orphans: 2; outline-color: rgb(62, 62, 60); outline-offset: 0px; outline-style: none; outline-width: 0px; overflow-anchor: auto; overflow-wrap: break-word; overflow-x: visible; overflow-y: visible; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px; pointer-events: auto; position: static; resize: none; right: auto; scroll-behavior: auto; speak: normal; table-layout: auto; tab-size: 8; text-align: start; text-align-last: auto; text-decoration: none solid rgb(62, 62, 60); text-decoration-line: none; text-decoration-style: solid; text-decoration-color: rgb(62, 62, 60); text-decoration-skip: objects; text-underline-position: auto; text-indent: 0px; text-rendering: auto; text-shadow: none; text-size-adjust: 100%; text-overflow: clip; text-transform: none; top: auto; touch-action: auto; transition-delay: 0s; transition-duration: 0s; transition-property: all; transition-timing-function: ease; unicode-bidi: normal; vertical-align: baseline; visibility: visible; white-space: pre-line; widows: 2; width: 420px; will-change: auto; word-break: break-word; word-spacing: 0px; word-wrap: break-word; z-index: auto; zoom: 1; -webkit-appearance: none; backface-visibility: visible; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-border-horizontal-spacing: 0px; -webkit-border-image: none; -webkit-border-vertical-spacing: 0px; -webkit-box-align: stretch; -webkit-box-decoration-break: slice; -webkit-box-direction: normal; -webkit-box-flex: 0; -webkit-box-flex-group: 1; -webkit-box-lines: single; -webkit-box-ordinal-group: 1; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-reflect: none; column-count: auto; column-gap: normal; column-rule-color: rgb(62, 62, 60); column-rule-style: none; column-rule-width: 0px; column-span: none; column-width: auto; align-content: normal; align-items: normal; align-self: auto; flex-basis: auto; flex-grow: 0; flex-shrink: 1; flex-direction: row; flex-wrap: nowrap; justify-content: normal; -webkit-font-smoothing: auto; grid-auto-columns: auto; grid-auto-flow: row; grid-auto-rows: auto; grid-column-end: auto; grid-column-start: auto; grid-template-areas: none; grid-template-columns: none; grid-template-rows: none; grid-row-end: auto; grid-row-start: auto; grid-column-gap: 0px; grid-row-gap: 0px; -webkit-highlight: none; hyphens: manual; -webkit-hyphenate-character: auto; -webkit-line-break: auto; -webkit-line-clamp: none; -webkit-locale: auto; -webkit-margin-before-collapse: collapse; -webkit-margin-after-collapse: collapse; -webkit-mask-box-image: none; -webkit-mask-box-image-outset: 0px; -webkit-mask-box-image-repeat: stretch; -webkit-mask-box-image-slice: 0 fill; -webkit-mask-box-image-source: none; -webkit-mask-box-image-width: auto; -webkit-mask-clip: border-box; -webkit-mask-composite: source-over; -webkit-mask-image: none; -webkit-mask-origin: border-box; -webkit-mask-position: 0% 0%; -webkit-mask-repeat: repeat; -webkit-mask-size: auto; order: 0; perspective: none; perspective-origin: 210px 17.5px; -webkit-print-color-adjust: economy; -webkit-rtl-ordering: logical; shape-outside: none; shape-image-threshold: 0; shape-margin: 0px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-combine: none; -webkit-text-decorations-in-effect: none; -webkit-text-emphasis-color: rgb(62, 62, 60); -webkit-text-emphasis-position: over; -webkit-text-emphasis-style: none; -webkit-text-fill-color: rgb(62, 62, 60); -webkit-text-orientation: vertical-right; -webkit-text-security: none; -webkit-text-stroke-color: rgb(62, 62, 60); -webkit-text-stroke-width: 0px; transform: none; transform-origin: 210px 17.5px; transform-style: flat; -webkit-user-drag: auto; -webkit-user-modify: read-only; user-select: auto; -webkit-writing-mode: horizontal-tb; -webkit-app-region: no-drag; buffered-rendering: auto; clip-path: none; clip-rule: nonzero; mask: none; filter: none; flood-color: rgb(0, 0, 0); flood-opacity: 1; lighting-color: rgb(255, 255, 255); stop-color: rgb(0, 0, 0); stop-opacity: 1; color-interpolation: sRGB; color-interpolation-filters: linearRGB; color-rendering: auto; fill: rgb(0, 0, 0); fill-opacity: 1; fill-rule: nonzero; marker-end: none; marker-mid: none; marker-start: none; mask-type: luminance; shape-rendering: auto; stroke: none; stroke-dasharray: none; stroke-dashoffset: 0px; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1; stroke-width: 1px; alignment-baseline: auto; baseline-shift: 0px; dominant-baseline: auto; text-anchor: start; writing-mode: horizontal-tb; vector-effect: none; paint-order: fill stroke markers; d: none; cx: 0px; cy: 0px; x: 0px; y: 0px; r: 0px; rx: auto; ry: auto; caret-color: rgb(62, 62, 60); line-break: auto;",
@@ -174,7 +174,7 @@ describe('Chat message body', () => {

it('renders an inbound chat message body that shows sneak peak', () =>
matchesMarkupAndStyle(
<ChatMessageBody type="inbound" hasSneakPeak isTyping isPaused>
<ChatMessageBody type="inbound" hasSneakPeek isTyping isPaused>
Message
</ChatMessageBody>
));
@@ -244,13 +244,14 @@
}

/**
* @summary Used when sneak peak is enabled for customer messages
* @summary Used when sneak peek is enabled for customer messages
*
* @selector .slds-chat-message__text_sneak-peak
* @selector .slds-chat-message__text_sneak-peek
* @restrict .slds-chat-message__text
* @modifier
*/
.slds-chat-message__text_sneak-peak {
.slds-chat-message__text_sneak-peak,
.slds-chat-message__text_sneak-peek {
font-style: italic;

.slds-icon-typing {
@@ -80,15 +80,15 @@ export const states = [
)
},
{
id: 'inbound-customer-is-typing-with-sneak-peak',
label: 'Inbound Customer is Typing with Sneak Peak',
id: 'inbound-customer-is-typing-with-sneak-peek',
label: 'Inbound Customer is Typing with Sneak Peek',
element: (
<Chat>
<ChatList>
<ChatListItem type="inbound">
<ChatMessage>
<ChatAvatar initials="TW" name="Taylor Watson-Rice" />
<ChatMessageBody isTyping hasSneakPeak type="inbound">
<ChatMessageBody isTyping hasSneakPeek type="inbound">
Hi, my Alexa only speaks French and I'm having a lot of trouble
trying to make i
</ChatMessageBody>
@@ -270,15 +270,15 @@ Whilst chatting with customers, agents can see when a customer is typing a respo
</Chat>
</CodeView>

#### Sneak peak
#### Sneak peek

We can take that experience one step further when the sneak peak feature is enabled. This allows agents to see what customers are typing in real time, as they type it.
We can take that experience one step further when the sneak peek feature is enabled. This allows agents to see what customers are typing in real time, as they type it.

<Blockquote
header="aria-hidden"
type="a11y"
>
When the sneak peak feature is active, we take care to try and reduce the verbosity a screen reader user will encounter. As they will hear the final message once it is typed, we have found it is preferred to use <code className="doc">aria-hidden="true"</code> on the text they are currently typing, to reduce noise.
When the sneak peek feature is active, we take care to try and reduce the verbosity a screen reader user will encounter. As they will hear the final message once it is typed, we have found it is preferred to use <code className="doc">aria-hidden="true"</code> on the text they are currently typing, to reduce noise.
</Blockquote>

@@ -288,7 +288,7 @@ We can take that experience one step further when the sneak peak feature is enab
<ChatListItem type="inbound">
<ChatMessage>
<ChatAvatar initials="TW" name="Taylor Watson-Rice" />
<ChatMessageBody isTyping hasSneakPeak type="inbound">
<ChatMessageBody isTyping hasSneakPeek type="inbound">
Hi, my Alexa only spe
</ChatMessageBody>
</ChatMessage>
@@ -63,7 +63,7 @@ export const ChatMessageBody = props => (
'slds-chat-message__text_outbound': props.type === 'outbound',
'slds-chat-message__text_outbound-agent':
props.type === 'outbound-agent',
'slds-chat-message__text_sneak-peak': props.hasSneakPeak
'slds-chat-message__text_sneak-peek': props.hasSneakPeek
})}
>
{props.isTyping && (
@@ -75,7 +75,7 @@ export const ChatMessageBody = props => (
/>
)}
{props.children && (
<span aria-hidden={props.hasSneakPeak ? 'true' : null}>
<span aria-hidden={props.hasSneakPeek ? 'true' : null}>
{props.children}
</span>
)}

0 comments on commit cdaabbf

Please sign in to comment.
You can’t perform that action at this time.