lightning-base-components 1.22.1-alpha → 1.22.3-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/README.md +2 -0
  2. package/metadata/raptor.json +38 -2
  3. package/package.json +12 -1
  4. package/scopedImports/@salesforce-label-LightningRecordPicker.actionIconAlternativeText.js +1 -0
  5. package/src/lightning/accordionSection/button.slds.css +8 -0
  6. package/src/lightning/ariaObserver/ariaObserver.js +1 -1
  7. package/src/lightning/baseCombobox/baseCombobox.html +1 -1
  8. package/src/lightning/baseCombobox/baseCombobox.js +1 -0
  9. package/src/lightning/baseCombobox/dropdown.slds.css +7 -7
  10. package/src/lightning/baseComboboxItem/card.lbc.native.css +1 -0
  11. package/src/lightning/baseComboboxItem/inline.lbc.native.css +1 -0
  12. package/src/lightning/button/button.slds.css +8 -0
  13. package/src/lightning/buttonIcon/button-icon.slds.css +8 -0
  14. package/src/lightning/buttonIcon/buttonIcon.js +29 -26
  15. package/src/lightning/buttonIconStateful/button-icon.slds.css +8 -0
  16. package/src/lightning/buttonIconStateful/button.slds.css +8 -0
  17. package/src/lightning/buttonMenu/button-icon.slds.css +8 -0
  18. package/src/lightning/buttonMenu/button.slds.css +8 -0
  19. package/src/lightning/buttonMenu/dropdown.slds.css +7 -7
  20. package/src/lightning/buttonStateful/button.slds.css +8 -0
  21. package/src/lightning/calendar/calendar.lbc.native.css +1 -0
  22. package/src/lightning/calendar/dropdown.slds.css +7 -7
  23. package/src/lightning/checkboxGroup/checkboxGroup.js +21 -10
  24. package/src/lightning/checkboxGroup/checkboxGroup.js-meta.xml +3 -0
  25. package/src/lightning/colorPickerPanel/colorPickerPanel.js +1 -11
  26. package/src/lightning/combobox/combobox.html +1 -1
  27. package/src/lightning/datatable/__docs__/datatable.md +10 -5
  28. package/src/lightning/datatable/autoWidthStrategy.js +32 -44
  29. package/src/lightning/datatable/columnResizer.js +3 -2
  30. package/src/lightning/datatable/columnWidthManager.js +16 -10
  31. package/src/lightning/datatable/columns.js +4 -1
  32. package/src/lightning/datatable/datatable.js +108 -46
  33. package/src/lightning/datatable/infiniteLoading.js +8 -20
  34. package/src/lightning/datatable/inlineEdit.js +11 -6
  35. package/src/lightning/datatable/keyboard.js +58 -55
  36. package/src/lightning/datatable/resizeObserver.js +10 -5
  37. package/src/lightning/datatable/rows.js +3 -3
  38. package/src/lightning/datatable/rowsInlining.js +5 -4
  39. package/src/lightning/datatable/state.js +1 -2
  40. package/src/lightning/datatable/templates/div/div.html +150 -43
  41. package/src/lightning/datatable/templates/div/div.lbc.synthetic.css +8 -7
  42. package/src/lightning/datatable/templates/table/table.html +153 -46
  43. package/src/lightning/datatable/utils.js +10 -4
  44. package/src/lightning/datatable/virtualization.js +6 -4
  45. package/src/lightning/datatable/wrapText.js +16 -15
  46. package/src/lightning/groupedCombobox/groupedCombobox.js +21 -28
  47. package/src/lightning/helptext/button-icon.slds.css +8 -0
  48. package/src/lightning/helptext/helptext.html +2 -1
  49. package/src/lightning/helptext/helptext.js +0 -12
  50. package/src/lightning/input/input.html +0 -1
  51. package/src/lightning/interactiveDialogBase/button.slds.css +8 -0
  52. package/src/lightning/modal/__docs__/modal.md +2 -0
  53. package/src/lightning/modalBase/modalBase.html +2 -0
  54. package/src/lightning/modalBase/modalBase.js +30 -31
  55. package/src/lightning/modalBody/modalBody.html +1 -0
  56. package/src/lightning/modalBody/modalBody.js +3 -0
  57. package/src/lightning/modalFooter/modalFooter.html +5 -1
  58. package/src/lightning/modalFooter/modalFooter.js +3 -0
  59. package/src/lightning/modalHeader/modalHeader.html +4 -1
  60. package/src/lightning/modalHeader/modalHeader.js +3 -0
  61. package/src/lightning/overlayManager/overlayManager.js +1 -1
  62. package/src/lightning/pillContainer/button.slds.css +8 -0
  63. package/src/lightning/positionLibrary/elementProxy.js +13 -6
  64. package/src/lightning/positionLibrary/util.js +20 -2
  65. package/src/lightning/primitiveBubble/primitiveBubble.js +9 -4
  66. package/src/lightning/primitiveCellActions/primitiveCellActions.html +1 -0
  67. package/src/lightning/primitiveCellActions/primitiveCellActions.js +3 -5
  68. package/src/lightning/primitiveCellButton/primitiveCellButton.html +2 -0
  69. package/src/lightning/primitiveCellButton/primitiveCellButton.js +3 -5
  70. package/src/lightning/primitiveCellCheckbox/checkbox.html +3 -2
  71. package/src/lightning/primitiveCellCheckbox/primitiveCellCheckbox.js +6 -3
  72. package/src/lightning/primitiveCellCheckbox/radio.html +5 -4
  73. package/src/lightning/primitiveCellEditableButton/primitiveCellEditableButton.html +1 -1
  74. package/src/lightning/primitiveCellEditableButton/primitiveCellEditableButton.js +1 -1
  75. package/src/lightning/primitiveCellFactory/bareCustomCell.html +1 -0
  76. package/src/lightning/primitiveCellFactory/cellWithStandardLayout.html +1 -0
  77. package/src/lightning/primitiveCellFactory/primitiveCellFactory.js +4 -6
  78. package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.html +1 -0
  79. package/src/lightning/primitiveColumnSorter/primitiveColumnSorter.js +1 -1
  80. package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.html +3 -1
  81. package/src/lightning/primitiveDatatableIeditPanel/primitiveDatatableIeditPanel.js +3 -3
  82. package/src/lightning/primitiveDatatableStatusBar/primitiveDatatableStatusBar.html +1 -0
  83. package/src/lightning/primitiveDatatableStatusBar/primitiveDatatableStatusBar.js +1 -3
  84. package/src/lightning/primitiveDatatableTooltip/primitiveDatatableTooltip.html +1 -0
  85. package/src/lightning/primitiveDatatableTooltip/primitiveDatatableTooltip.js +1 -1
  86. package/src/lightning/primitiveDatatableTooltipBubble/primitiveDatatableTooltipBubble.html +1 -1
  87. package/src/lightning/primitiveDatatableTooltipBubble/primitiveDatatableTooltipBubble.js +1 -1
  88. package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.html +2 -0
  89. package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.js +2 -4
  90. package/src/lightning/primitiveHeaderFactory/nonsortableHeader.html +8 -3
  91. package/src/lightning/primitiveHeaderFactory/primitiveHeaderFactory.js +43 -13
  92. package/src/lightning/primitiveHeaderFactory/selectableHeader.html +3 -2
  93. package/src/lightning/primitiveHeaderFactory/sortableHeader.html +8 -3
  94. package/src/lightning/primitiveHeaderFactory/sortingMenuHeader.html +1 -1
  95. package/src/lightning/primitiveIcon/primitiveIcon.css +0 -1
  96. package/src/lightning/primitiveInputFile/button.slds.css +8 -0
  97. package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.html +4 -2
  98. package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.js +2 -2
  99. package/src/lightning/primitiveTreegridCellToggle/primitiveTreegridCellToggle.html +1 -1
  100. package/src/lightning/primitiveTreegridCellToggle/primitiveTreegridCellToggle.js +1 -1
  101. package/src/lightning/progressIndicator/progressIndicator.css +1 -1
  102. package/src/lightning/progressIndicator/progressIndicator.js +14 -6
  103. package/src/lightning/progressIndicator/progressIndicator.js-meta.xml +3 -0
  104. package/src/lightning/progressIndicator/progressIndicator.lbc.native.css +2 -0
  105. package/src/lightning/progressStep/__examples__/basic/basic.html +11 -0
  106. package/src/lightning/progressStep/__examples__/basic/basic.js +3 -0
  107. package/src/lightning/progressStep/__examples__/shaded/shaded.html +11 -0
  108. package/src/lightning/progressStep/__examples__/shaded/shaded.js +3 -0
  109. package/src/lightning/progressStep/base.html +2 -1
  110. package/src/lightning/progressStep/progressStep.css +1 -0
  111. package/src/lightning/progressStep/progressStep.js +40 -29
  112. package/src/lightning/progressStep/progressStep.js-meta.xml +3 -0
  113. package/src/lightning/progressStep/progressStep.lbc.native.css +3 -0
  114. package/src/lightning/sldsCommon/sldsCommon.css +1 -1
  115. package/src/lightning/sldsUtilsThemes/sldsUtilsThemes.css +6 -4
  116. package/src/lightning/tabBar/tab-bar.slds.css +17 -3
  117. package/src/lightning/tile/mediaTile.css +2 -0
  118. package/src/lightning/tile/standardTile.css +2 -1
  119. package/src/lightning/tile/tile.js +5 -2
  120. package/src/lightning/tile/tile.js-meta.xml +3 -0
  121. package/src/lightning/tile/tile.lbc.native.css +4 -0
  122. package/src/lightning/toast/button-icon.slds.css +8 -0
  123. package/src/lightning/tooltipLibrary/tooltipLibrary.js +15 -4
  124. package/src/lightning/utilsPrivate/utilsPrivate.js +4 -4
  125. package/src/lightning/verticalNavigationOverflow/button.slds.css +8 -0
  126. package/src/lightning/primitiveIcon/primitiveIcon.lbc.synthetic.css +0 -9
  127. /package/src/lightning/tile/{standardTile.lbc.synthetic.css → tile.lbc.synthetic.css} +0 -0
package/src/lightning/datatable/templates/div/div.html CHANGED
@@ -6,8 +6,8 @@
6
6
  <span data-keyboard-mode="navigation" class={computedAriaLiveClassForNavMode}>{i18n.ariaLiveNavigationMode}</span>
7
7
  <span data-keyboard-mode="action" class={computedAriaLiveClassForActionMode}>{i18n.ariaLiveActionMode}</span>
8
8
  </span>
9
- <div lwc:dom="manual" class="dt-width-observer" style="width: 100%; height: 0px;"></div>
10
- <div part="datagrid-wrapper" class="dt-outer-container" style="height: 100%; position: relative;">
9
+ <div lwc:ref="widthObserver" lwc:dom="manual" class="dt-width-observer" style="width: 100%; height: 0px;"></div>
10
+ <div lwc:ref="outerContainer" part="datagrid-wrapper" class="dt-outer-container" style="height: 100%; position: relative;">
11
11
  <!-- Inline Edit Panel -->
12
12
  <lightning-primitive-datatable-iedit-panel
13
13
  data-iedit-panel="true"
@@ -23,10 +23,11 @@
23
23
  onmasscheckboxchange={handleMassCheckboxChange}
24
24
  ></lightning-primitive-datatable-iedit-panel>
25
25
  <!-- Table Container -->
26
- <div class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={computedScrollerXStyle}>
27
- <div class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerYStyle}>
26
+ <div lwc:ref="scrollerX" class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={computedScrollerXStyle}>
27
+ <div lwc:ref="scrollerY" class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerYStyle}>
28
28
  <!-- Corresponds to <table> -->
29
- <div class={computedTableClass}
29
+ <div lwc:ref="tableElement"
30
+ class={computedTableClass}
30
31
  part="datagrid"
31
32
  role={computedTableRole}
32
33
  style={computedTableStyle}
@@ -79,6 +80,7 @@
79
80
  def={def}
80
81
  dt-context-id={_datatableId}
81
82
  key={def.colKeyValue}
83
+ header-height={_headerHeight}
82
84
  row-key-value="HEADER"
83
85
  col-key-value={def.colKeyValue}
84
86
  col-index={colIndex}
@@ -92,6 +94,7 @@
92
94
  hide-header={hideTableHeader}
93
95
  onprivatecolumnheaderid={handleCheckboxHeaderId}
94
96
  wrap-table-header={wrapTableHeader}
97
+ wrap-text-max-lines={state.wrapTextMaxLines}
95
98
  show-actions-menu={showActionsMenu}>
96
99
  </lightning-primitive-header-factory>
97
100
  </template>
@@ -106,6 +109,7 @@
106
109
  col-key-value={def.colKeyValue}
107
110
  col-index={colIndex}
108
111
  has-focus={def.hasFocus}
112
+ header-height={_headerHeight}
109
113
  actions={def.actions}
110
114
  sortable={def.sortable}
111
115
  sorted={def.sorted}
@@ -116,6 +120,7 @@
116
120
  hide-header={hideTableHeader}
117
121
  onprivatecolumnheaderid={handleCheckboxHeaderId}
118
122
  wrap-table-header={wrapTableHeader}
123
+ wrap-text-max-lines={state.wrapTextMaxLines}
119
124
  show-actions-menu={showActionsMenu}>
120
125
  </lightning-primitive-header-factory>
121
126
  </template>
@@ -297,10 +302,23 @@
297
302
  <!-- boolean -->
298
303
  <template if:true={cell.isBoolean}>
299
304
  <template if:true={cell.isChecked}>
300
- <lightning-primitive-icon
301
- size="x-small"
302
- icon-name="utility:check">
303
- </lightning-primitive-icon>
305
+ <!-- Caution: Modify generate-inlined-icons script before changing comments -->
306
+ <!-- START utility:check -->
307
+ <template lwc:if={cell.isRTL}>
308
+ <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
309
+ <g>
310
+ <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
311
+ </g>
312
+ </svg>
313
+ </template>
314
+ <template lwc:else>
315
+ <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
316
+ <g>
317
+ <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
318
+ </g>
319
+ </svg>
320
+ </template>
321
+ <!-- END utility:check -->
304
322
  </template>
305
323
  <span class="slds-assistive-text">{cell.booleanCellAssistiveText}</span>
306
324
  </template>
@@ -371,10 +389,23 @@
371
389
  href={cell.emailLink}
372
390
  tabindex={cell.internalTabIndex}>
373
391
  <template if:false={cell.emailIconHidden}>
374
- <lightning-primitive-icon
375
- icon-name="utility:email"
376
- size="x-small">
377
- </lightning-primitive-icon>
392
+ <!-- Caution: Modify generate-inlined-icons script before changing comments -->
393
+ <!-- START utility:email -->
394
+ <template lwc:if={cell.isRTL}>
395
+ <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
396
+ <g>
397
+ <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
398
+ </g>
399
+ </svg>
400
+ </template>
401
+ <template lwc:else>
402
+ <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
403
+ <g>
404
+ <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
405
+ </g>
406
+ </svg>
407
+ </template>
408
+ <!-- END utility:email -->
378
409
  <span class="slds-assistive-text">{cell.emailIconAssistiveText}</span>
379
410
  </template> {cell.emailLabel}
380
411
  </a>
@@ -530,17 +561,30 @@
530
561
  </div>
531
562
  <template if:true={cell.isEditable}>
532
563
  <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
564
+ aria-labelledby={cell.editLabelId}
533
565
  data-action-edit="true"
534
566
  data-action-triggers="enter,space"
535
567
  data-navigation="enable"
536
568
  tabindex={cell.internalTabIndex}
537
569
  onclick={handleInlinedEditButtonClick}>
538
- <lightning-primitive-icon
539
- icon-name="utility:edit"
540
- size="xx-small"
541
- svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small slds-button__icon_edit">
542
- </lightning-primitive-icon>
543
- <span class="slds-assistive-text">
570
+ <!-- Caution: Modify generate-inlined-icons script before changing comments -->
571
+ <!-- START utility:edit -->
572
+ <template lwc:if={cell.isRTL}>
573
+ <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
574
+ <g>
575
+ <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
576
+ </g>
577
+ </svg>
578
+ </template>
579
+ <template lwc:else>
580
+ <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
581
+ <g>
582
+ <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
583
+ </g>
584
+ </svg>
585
+ </template>
586
+ <!-- END utility:edit -->
587
+ <span hidden id={cell.editLabelId}>
544
588
  {cell.editIconAssistiveText}
545
589
  </span>
546
590
  </button>
@@ -551,11 +595,23 @@
551
595
  <template if:true={cell.shouldDisplayReadOnlyIcon}>
552
596
  <!-- TODO: Update the svg-classes once the SLDS team updates their read only icon design to not use classes that have the word 'button'
553
597
  in them in cases when the cell is read only and hence no button is actually rendered -->
554
- <lightning-primitive-icon
555
- icon-name="utility:lock"
556
- size="xx-small"
557
- svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small">
558
- </lightning-primitive-icon>
598
+ <!-- Caution: Modify generate-inlined-icons script before changing comments -->
599
+ <!-- START utility:lock -->
600
+ <template lwc:if={cell.isRTL}>
601
+ <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
602
+ <g>
603
+ <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
604
+ </g>
605
+ </svg>
606
+ </template>
607
+ <template lwc:else>
608
+ <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
609
+ <g>
610
+ <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
611
+ </g>
612
+ </svg>
613
+ </template>
614
+ <!-- END utility:lock -->
559
615
  </template>
560
616
  </span>
561
617
  </template>
@@ -682,10 +738,23 @@
682
738
  <!-- boolean -->
683
739
  <template if:true={cell.isBoolean}>
684
740
  <template if:true={cell.isChecked}>
685
- <lightning-primitive-icon
686
- size="x-small"
687
- icon-name="utility:check">
688
- </lightning-primitive-icon>
741
+ <!-- Caution: Modify generate-inlined-icons script before changing comments -->
742
+ <!-- START utility:check -->
743
+ <template lwc:if={cell.isRTL}>
744
+ <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
745
+ <g>
746
+ <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
747
+ </g>
748
+ </svg>
749
+ </template>
750
+ <template lwc:else>
751
+ <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
752
+ <g>
753
+ <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
754
+ </g>
755
+ </svg>
756
+ </template>
757
+ <!-- END utility:check -->
689
758
  </template>
690
759
  <span class="slds-assistive-text">{cell.booleanCellAssistiveText}</span>
691
760
  </template>
@@ -756,10 +825,23 @@
756
825
  href={cell.emailLink}
757
826
  tabindex={cell.internalTabIndex}>
758
827
  <template if:false={cell.emailIconHidden}>
759
- <lightning-primitive-icon
760
- icon-name="utility:email"
761
- size="x-small">
762
- </lightning-primitive-icon>
828
+ <!-- Caution: Modify generate-inlined-icons script before changing comments -->
829
+ <!-- START utility:email -->
830
+ <template lwc:if={cell.isRTL}>
831
+ <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
832
+ <g>
833
+ <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
834
+ </g>
835
+ </svg>
836
+ </template>
837
+ <template lwc:else>
838
+ <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
839
+ <g>
840
+ <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
841
+ </g>
842
+ </svg>
843
+ </template>
844
+ <!-- END utility:email -->
763
845
  <span class="slds-assistive-text">{cell.emailIconAssistiveText}</span>
764
846
  </template> {cell.emailLabel}
765
847
  </a>
@@ -918,17 +1000,30 @@
918
1000
  </div>
919
1001
  <template if:true={cell.isEditable}>
920
1002
  <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
1003
+ aria-labelledby={cell.editLabelId}
921
1004
  data-action-edit="true"
922
1005
  data-action-triggers="enter,space"
923
1006
  data-navigation="enable"
924
1007
  tabindex={cell.internalTabIndex}
925
1008
  onclick={handleInlinedEditButtonClick}>
926
- <lightning-primitive-icon
927
- icon-name="utility:edit"
928
- size="xx-small"
929
- svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small slds-button__icon_edit">
930
- </lightning-primitive-icon>
931
- <span class="slds-assistive-text">
1009
+ <!-- Caution: Modify generate-inlined-icons script before changing comments -->
1010
+ <!-- START utility:edit -->
1011
+ <template lwc:if={cell.isRTL}>
1012
+ <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
1013
+ <g>
1014
+ <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
1015
+ </g>
1016
+ </svg>
1017
+ </template>
1018
+ <template lwc:else>
1019
+ <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
1020
+ <g>
1021
+ <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
1022
+ </g>
1023
+ </svg>
1024
+ </template>
1025
+ <!-- END utility:edit -->
1026
+ <span hidden id={cell.editLabelId}>
932
1027
  {cell.editIconAssistiveText}
933
1028
  </span>
934
1029
  </button>
@@ -939,11 +1034,23 @@
939
1034
  <template if:true={cell.shouldDisplayReadOnlyIcon}>
940
1035
  <!-- TODO: Update the svg-classes once the SLDS team updates their read only icon design to not use classes that have the word 'button'
941
1036
  in them in cases when the cell is read only and hence no button is actually rendered -->
942
- <lightning-primitive-icon
943
- icon-name="utility:lock"
944
- size="xx-small"
945
- svg-class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_small">
946
- </lightning-primitive-icon>
1037
+ <!-- Caution: Modify generate-inlined-icons script before changing comments -->
1038
+ <!-- START utility:lock -->
1039
+ <template lwc:if={cell.isRTL}>
1040
+ <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
1041
+ <g>
1042
+ <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
1043
+ </g>
1044
+ </svg>
1045
+ </template>
1046
+ <template lwc:else>
1047
+ <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
1048
+ <g>
1049
+ <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
1050
+ </g>
1051
+ </svg>
1052
+ </template>
1053
+ <!-- END utility:lock -->
947
1054
  </template>
948
1055
  </span>
949
1056
  </template>
package/src/lightning/datatable/templates/div/div.lbc.synthetic.css CHANGED
@@ -23,7 +23,8 @@
23
23
  /* cell focus border color */
24
24
  [role='gridcell']:focus,
25
25
  [role='rowheader']:focus {
26
- box-shadow: var(--slds-g-color-border-accent-2) 0 0 0 1px inset;
26
+ box-shadow: var(--slds-g-shadow-6, var(--lwc-shadowButtonFocus, 0 0 3px #0176d3));
27
+ outline: none;
27
28
  }
28
29
 
29
30
  /* Column Header Cells */
@@ -38,16 +39,16 @@
38
39
 
39
40
  /* Row borders */
40
41
  [data-row-key-value] {
41
- border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1);
42
+ border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1, #c9c9c9);
42
43
  }
43
44
 
44
45
  /* row border on hover */
45
46
  [data-row-key-value]:hover [role='gridcell']:not(.slds-has-focus),
46
47
  [data-row-key-value]:hover [role='rowheader']:not(.slds-has-focus) {
47
- box-shadow: inset 0 var(--slds-g-sizing-border-1)
48
- var(--slds-g-color-border-1),
49
- inset 0 calc(var(--slds-g-sizing-border-1) * -1)
50
- var(--slds-g-color-border-1);
48
+ box-shadow: inset 0 var(--slds-g-sizing-border-1, 1px)
49
+ var(--slds-g-color-border-1, #c9c9c9),
50
+ inset 0 calc(var(--slds-g-sizing-border-1, 1px) * -1)
51
+ var(--slds-g-color-border-1, #c9c9c9);
51
52
  }
52
53
 
53
54
  .slds-table_header-fixed [data-row-key-value]:first-child {
@@ -109,5 +110,5 @@ div[role='grid'][data-render-mode-inline='true']
109
110
 
110
111
  [part="spinner"] {
111
112
  padding: var(--slds-g-sizing-2, 0.25rem) var(--slds-g-sizing-3, 0.5rem);
112
- border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1);
113
+ border-top: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-border-1, #c9c9c9);
113
114
  }