@salesforcedevs/dx-components 1.3.301 → 1.3.304

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 (4) hide show
  1. package/package.json +2 -2
  2. package/src/modules/dx/select/select.html +4 -0
  3. package/src/modules/dx/select/select.ts +1 -0
  4. package/src/modules/dx/tabPanelItem/tabPanelItem.css +22 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dx-components",
3
- "version": "1.3.301",
3
+ "version": "1.3.304",
4
4
  "description": "DX Lightning web components",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -46,5 +46,5 @@
46
46
  "volta": {
47
47
  "node": "16.19.1"
48
48
  },
49
- "gitHead": "c17025bed29c9deb85b0e2d5e39e96d0b764932d"
49
+ "gitHead": "00f26c1df5e3db652f423fdf880224e65ca6a4f6"
50
50
  }
package/src/modules/dx/select/select.html CHANGED
@@ -8,6 +8,9 @@
8
8
  </label>
9
9
  <div class="form-element_control">
10
10
  <div class="select_container">
11
+ <template if:true={loading}>
12
+ <dx-spinner size="x-small" variant="base"></dx-spinner>
13
+ </template>
11
14
  <select
12
15
  autocomplete={autocomplete}
13
16
  class={selectClass}
@@ -24,6 +27,7 @@
24
27
  <template if:true={placeholder}>
25
28
  <option value="" disabled>{placeholder}</option>
26
29
  </template>
30
+
27
31
  <template for:each={options} for:item="option">
28
32
  <template if:true={option.disabled}>
29
33
  <option
package/src/modules/dx/select/select.ts CHANGED
@@ -13,6 +13,7 @@ export default class Select extends LightningElement {
13
13
  @api messageWhenValueMissing: string = DEFAULT_MISSING_MESSAGE;
14
14
  @api placeholder?: string;
15
15
  @api size?: string;
16
+ @api loading = false;
16
17
 
17
18
  @api
18
19
  get disabled() {
package/src/modules/dx/tabPanelItem/tabPanelItem.css CHANGED
@@ -2,29 +2,43 @@
2
2
 
3
3
  .tab {
4
4
  color: var(--dx-g-blue-vibrant-20);
5
- font-family: var(--dx-g-font-display);
6
- font-size: var(--dx-g-text-lg);
7
- font-weight: var(--dx-g-font-bold);
8
- padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-xl)
9
- var(--dx-g-spacing-sm);
5
+ font-family: var(--dx-g-font-sans);
6
+ font-size: var(--dx-g-text-base);
7
+ font-weight: var(--dx-g-font-normal);
8
+ line-height: var(--dx-g-spacing-lg);
9
+ padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
10
10
  border-top-left-radius: var(--dx-g-spacing-sm);
11
11
  border-top-right-radius: var(--dx-g-spacing-sm);
12
12
  border-bottom: var(--dx-g-spacing-xs) solid transparent;
13
13
  white-space: nowrap;
14
+ margin-right: var(--dx-g-spacing-md);
15
+ }
16
+
17
+ button:focus {
18
+ outline: none;
14
19
  }
15
20
 
16
21
  .tab:hover {
17
22
  background-color: var(--dx-g-blue-vibrant-95);
23
+ color: var(--dx-g-blue-vibrant-20);
18
24
  }
19
25
 
20
26
  .tab-active {
21
27
  color: var(--dx-g-blue-vibrant-50);
28
+ font-weight: var(--dx-g-font-bold);
22
29
  border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
23
30
  }
24
31
 
25
- .tab:hover,
26
- .tab-active {
27
- font-weight: var(--dx-g-font-bold);
32
+ .tab-active:focus-visible,
33
+ .tab-active:hover {
34
+ border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
35
+ color: var(--dx-g-blue-vibrant-20);
36
+ }
37
+
38
+ .tab:focus-visible {
39
+ background: var(--dx-g-cloud-blue-vibrant-95);
40
+ color: var(--dx-g-blue-vibrant-20);
41
+ outline: 2px solid var(--dx-g-blue-vibrant-60);
28
42
  }
29
43
 
30
44
  @media screen and (max-width: 640px) {