Component updates in latest SLDS release

[interactivellama]

This is super list of issues and should NOT be considered one issue to be fixed.

Fixes

• Inputs (https://lightningdesignsystem.com/components/form-element/#ReadonlyStatic)
  • We have a version of Read Only/Static inputs that doesn't use , since it adds extra spacing and odd focus behavior
  • View Mode of Inline Edit wouldn't use lightning:input Read Only variant
    • https://lightningdesignsystem.com/components/form-element/#View-Mode

Enhancements

• Breadcrumbs (https://lightningdesignsystem.com/components/breadcrumbs/)
  • ~Add Overflow option~
• Cards (https://www.lightningdesignsystem.com/components/cards/#With-padding)
  • Lightning Components doesn't have the ability to add .slds-card__body_inner
    • (Customers are complaining that they have to add a div for that class and then it doesn't match the blueprint, etc)
    • https://www.lightningdesignsystem.com/components/cards/#With-padding
• Combobox (https://lightningdesignsystem.com/components/combobox/#Drill-In-for-Autocomplete)
  • Need to add ability to have left and right icons, and metatext
    • https://lightningdesignsystem.com/components/combobox/#Styling-choices-for-options
    • https://lightningdesignsystem.com/components/combobox/#Drill-In-for-Autocomplete
  • Need ability to add tooltip/helptext button to label easily
• Dropdowns (https://lightningdesignsystem.com/components/menus/#With-Overflow-Scrolling)/Combobox
  • ~Need ability to specify length of the dropdown before scrolling~
    • https://lightningdesignsystem.com/components/menus/#With-Overflow-Scrolling
• Dueling Picklist/ Dual Listbox (https://lightningdesignsystem.com/components/dueling-picklist/#Edit-Mode)
  • Need to add ability to disabled reordering on the right listbox
• Rich Text Editor (https://lightningdesignsystem.com/components/rich-text-editor/)
  • Update the markup to follow other form element components
  • Error message is now outside of text area

New Variants/Examples

• Avatar (https://lightningdesignsystem.com/components/avatar/?modifiers=inversed&variant=initials)
  • ~Need to add inverse variant~
    • https://lightningdesignsystem.com/components/avatar/?modifiers=inversed&variant=initials
• Buttons (https://lightningdesignsystem.com/components/buttons/)
  • ~Need to add Outline Brand (https://lightningdesignsystem.com/components/buttons/#Outline-Brand) and Text Destructive~ (https://lightningdesignsystem.com/components/buttons/#Text-Destructive) variants
• Checkbox (https://lightningdesignsystem.com/components/checkbox/)
  • Form element variant (https://lightningdesignsystem.com/components/checkbox/?variant=form-element)
    • When a single checkbox is used (with no option label) inside of a standard form element layout
• Checkbox Button (https://lightningdesignsystem.com/components/checkbox-button/?state=checkbox-add-button-checked-and-disabled&variant=base)
  • Add state for Checked && Disabled
• Data Tables (https://lightningdesignsystem.com/components/data-tables/?modifiers=.slds-table_cell-buffer&modifiers=.slds-table_bordered&variant=hidden-header)
  • Need variant w/ hidden header
• Progress Bar (https://lightningdesignsystem.com/components/progress-bar/)
  • New variant with title and progress info above bar
  • ~New vertical variant~
• Progress Indicator (https://lightningdesignsystem.com/components/progress-indicator/#Vertical)
  • New vertical variant as used in Setup Assistant
• Tabs (https://lightningdesignsystem.com/components/tabs/#Size-Modifiers)
  • New Medium and Large sizes

Net New Components

~* Illustrations (https://lightningdesignsystem.com/components/illustration/)~

• Expression/RFL (https://lightningdesignsystem.com/components/expression/)
• Toasts/Alerts (https://lightningdesignsystem.com/components/toast/)* ~Popovers (https://lightningdesignsystem.com/components/popovers/?variant=error)~
• Progress Ring (https://lightningdesignsystem.com/components/progress-ring/)*
  • Draining + Filled variants
  • Success, Error, Warning states
  • Large size
  • With or without icons

[pradumangoyal]

Hi @interactivellama, can I take some issues from here to work upon?

[interactivellama]

Yes, please create new issues and then comment on this thread and I will cross them out in the above comment.

[pradumangoyal]

Opened issue #1869 to add inverse variant in the Avatar

[pradumangoyal]

@interactivellama, Kindly cross the following issue whose corresponding issues are created separately and being worked upon.

• 1869, Add inverse variant in Avatar

• 1873, Add more variants in Button

[interactivellama]

@pradumangoyal I updated the issue.

[pulkonet]

@interactivellama Please cross the following issues from above in lieu of the recently opened issues:

• 1885 : Progress Indicator, new vertical variant

• 1898 : Breadcrumbs, add overflow option

[pulkonet]

@interactivellama I wanted to make sure what exactly you mean by

Dropdowns (https://lightningdesignsystem.com/components/menus/#With-Overflow-Scrolling)/Combobox Need ability to specify length of the dropdown before scrolling https://lightningdesignsystem.com/components/menus/#With-Overflow-Scrolling

this point above. Because as far as I can see, passing a length prop to the <Dropdown /> component is changing the length as specified in SLDS.

Please let me know if I am missing something.

[interactivellama]

@pulkonet This list was copy and pasted from release notes from SLDS. As you say, it looks like DSR had already had that feature for a while.

In a way, you can look at SLDS as documentation blueprints and then all the various JS components as implementation. Sometimes the implementation is ahead of the documentation. 😄