Skip to content

Commit

Permalink
fix(chat): sneak peak is now sneak peek w/breaking change (#3004)
Browse files Browse the repository at this point in the history
* 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 cdaabbf
Show file tree
Hide file tree
Showing 6 changed files with 15 additions and 14 deletions.
Original file line number Diff line number Diff line change
@@ -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;",
Expand Down
2 changes: 1 addition & 1 deletion ui/components/chat/__tests__/index.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
));
Expand Down
7 changes: 4 additions & 3 deletions ui/components/chat/base/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions ui/components/chat/base/example.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions ui/components/chat/docs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>


Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ui/components/chat/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand All @@ -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>
)}
Expand Down

0 comments on commit cdaabbf

Please sign in to comment.