Skip to content
Permalink
Browse files

feat(activity-timeline): Added new version of activity timeline that …

…expands and collapses items (#2820)

* feat(activity-timeline): Added support for icons in title

* feat(activity-timeline): Added capability for footer buttons

* feat(activity-timeline): Updated markup to support narrow width

* feat(activity-timeline): Added docs and Accessibility implementation notes
  • Loading branch information...
Ayesha Mazumdar
Ayesha Mazumdar committed Oct 20, 2017
1 parent 0488e76 commit 10cf83457e5a284bc954343e907de752103a180a
Showing with 1,794 additions and 354 deletions.
  1. +15 −0 ...tests__/__snapshots__/Activity_Timeline_Expandable_renders_a_collapsed_timeline_media_figure.json
  2. +23 −0 ...s__/Activity_Timeline_Expandable_renders_a_full_expanded_details_section_with_footer_buttons.json
  3. +20 −0 .../Activity_Timeline_Expandable_renders_a_full_expanded_details_section_without_footer_buttons.json
  4. +46 −0 ...timeline/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_a_narrow_timeline_item.json
  5. +51 −0 ...y-timeline/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_a_task_timeline_item.json
  6. +10 −0 ...tivity-timeline/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_a_timeline_icon.json
  7. +46 −0 ...tivity-timeline/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_a_timeline_item.json
  8. +13 −0 ...-timeline/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_a_timeline_item_error.json
  9. +23 −0 ...napshots__/Activity_Timeline_Expandable_renders_a_timeline_item_trigger_with_a_task_checkbox.json
  10. +27 −0 ...ests__/__snapshots__/Activity_Timeline_Expandable_renders_a_timeline_item_trigger_with_icons.json
  11. +18 −0 ...s__/__snapshots__/Activity_Timeline_Expandable_renders_a_timeline_item_trigger_with_no_icons.json
  12. +60 −0 ...line/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_a_timeline_item_with_icons.json
  13. +22 −0 ...-timeline/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_a_timeline_media_body.json
  14. +8 −0 ...meline/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_an_empty_details_section.json
  15. +8 −0 ...tests__/__snapshots__/Activity_Timeline_Expandable_renders_an_expanded_empty_details_section.json
  16. +46 −0 ...eline/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_an_expanded_timeline_item.json
  17. +15 −0 ...tests__/__snapshots__/Activity_Timeline_Expandable_renders_an_expanded_timeline_media_figure.json
  18. +10 −0 ...imeline/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_simple_timeline_subtext.json
  19. +143 −0 ..._tests__/__snapshots__/Activity_Timeline_Expandable_renders_the_deprecated_combined_timeline.json
  20. +13 −0 ...ivity-timeline/__tests__/__snapshots__/Activity_Timeline_Expandable_renders_timeline_actions.json
  21. +10 −0 ...snapshots__/Activity_Timeline_Expandable_renders_timeline_subtext_with_extra_text_at_the_end.json
  22. +327 −0 ui/components/activity-timeline/__tests__/index.spec.jsx
  23. +20 −1 ui/components/activity-timeline/_doc.scss
  24. +91 −0 ui/components/activity-timeline/base/_deprecate.scss
  25. +145 −102 ui/components/activity-timeline/base/_index.scss
  26. +349 −13 ui/components/activity-timeline/base/example.jsx
  27. +0 −52 ui/components/activity-timeline/call/example.jsx
  28. +235 −0 ui/components/activity-timeline/deprecated/example.jsx
  29. +0 −63 ui/components/activity-timeline/email/example.jsx
  30. +0 −65 ui/components/activity-timeline/event/example.jsx
  31. +0 −58 ui/components/activity-timeline/task/example.jsx

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,8 @@
{
"snapshot": {
"html": "<article class=\"slds-box slds-timeline__item_details slds-theme_shade slds-m-top_x-small slds-m-horizontal_xx-small\" id=\"test1\" aria-hidden=\"false\"></article>",
"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: rgb(250, 250, 249); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border-bottom-color: rgb(221, 219, 218); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: solid; border-bottom-width: 1px; 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(221, 219, 218); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 219, 218); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 219, 218); border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-style: solid; border-top-width: 1px; 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: 34px; 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: 4px; margin-right: 4px; margin-top: 8px; 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: 16px; padding-left: 16px; padding-right: 16px; padding-top: 16px; 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: 1272px; 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: 636px 17px; -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: 636px 17px; 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;"
]
}
}
@@ -0,0 +1,8 @@
{
"snapshot": {
"html": "<article class=\"slds-box slds-timeline__item_details slds-theme_shade slds-m-top_x-small slds-m-horizontal_xx-small slds-p-around_medium\" id=\"test1\" aria-hidden=\"false\"></article>",
"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: rgb(250, 250, 249); background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto; border-bottom-color: rgb(221, 219, 218); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-bottom-style: solid; border-bottom-width: 1px; 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(221, 219, 218); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 219, 218); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 219, 218); border-top-left-radius: 4px; border-top-right-radius: 4px; border-top-style: solid; border-top-width: 1px; 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: 34px; 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: 4px; margin-right: 4px; margin-top: 8px; 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: 16px; padding-left: 16px; padding-right: 16px; padding-top: 16px; 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: 1272px; 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: 636px 17px; -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: 636px 17px; 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;"
]
}
}
Oops, something went wrong.

0 comments on commit 10cf834

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