@fundamental-styles/theming-preview 0.30.0-rc.8 → 0.30.0

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 (15) hide show
  1. package/button.html +149 -139
  2. package/calendar.html +450 -289
  3. package/form.html +26 -26
  4. package/fundamental-styles.css +4 -140
  5. package/header-footer.html +15 -15
  6. package/icon.html +5 -5
  7. package/input.html +141 -61
  8. package/object-header.html +3 -3
  9. package/package.json +2 -2
  10. package/panel.html +16 -13
  11. package/semantic-colors.html +24 -12
  12. package/shell-tile-card.html +281 -199
  13. package/table.html +16 -16
  14. package/text.html +30 -18
  15. package/toolbar.html +31 -31
package/text.html CHANGED
@@ -25,9 +25,9 @@
25
25
  <h4 class="fd-panel__title">Label</h4>
26
26
  </div>
27
27
  <div class="fd-panel__content fd-theming__flex">
28
- <label class="fd-form-label">Standard</label>
28
+ <div class=""fd-form-item><label class="fd-form-label">Standard</label><input class="fd-input" type="text" id="input-ld"></div>
29
29
  &nbsp
30
- <label class="fd-form-label fd-form-label--required">Required</label>
30
+ <div class=""fd-form-item><label class="fd-form-label fd-form-label--required">Required</label><input class="fd-input" type="text" id="input-ld"></div>
31
31
  </div>
32
32
  </div>
33
33
 
@@ -36,20 +36,20 @@
36
36
  <h4 class="fd-panel__title">Link</h4>
37
37
  </div>
38
38
  <div class="fd-panel__content fd-theming__flex-column">
39
- <a href="#" class="fd-link">Link</a>
39
+ <a href="#" class="fd-link"><span class="fd-link__content">Link</span></a>
40
40
  &nbsp &nbsp
41
- <a href="#" class="fd-link" aria-disabled="true">Disabled Link</a>
41
+ <a href="#" class="fd-link" aria-disabled="true"><span class="fd-link__content">Disabled Link</span></a>
42
42
  &nbsp &nbsp
43
- <a href="#" class="fd-link fd-link--subtle">Subtle Link</a>
43
+ <a href="#" class="fd-link fd-link--subtle"><span class="fd-link__content"></span>Subtle Link</a>
44
44
  &nbsp &nbsp
45
- <a href="#" class="fd-link fd-link--subtle" aria-disabled="true">Subtle Disabled Link</a>
45
+ <a href="#" class="fd-link fd-link--subtle" aria-disabled="true"><span class="fd-link__content">Subtle Disabled Link</span></a>
46
46
  &nbsp &nbsp
47
- <a href="#" class="fd-link fd-link--emphasized">Emphasized Link</a>
47
+ <a href="#" class="fd-link fd-link--emphasized"><span class="fd-link__content">Emphasized Link</span></a>
48
48
  &nbsp &nbsp
49
- <a href="#" class="fd-link fd-link--emphasized" aria-disabled="true">Emphasized Disabled Link</a>
49
+ <a href="#" class="fd-link fd-link--emphasized" aria-disabled="true"><span class="fd-link__content">Emphasized Disabled Link</span></a>
50
50
  &nbsp &nbsp
51
51
  <div style="background-color:#314a5e; padding:10px; width: 30%;">
52
- <a href="#" class="fd-link fd-link--inverted">Inverted link</a>
52
+ <a href="#" class="fd-link fd-link--inverted"><span class="fd-link__content">Inverted link</span></a>
53
53
  </div>
54
54
  </div>
55
55
  </div>
@@ -61,11 +61,11 @@
61
61
  <div class="fd-panel__content fd-theming__flex">
62
62
  <nav aria-label="products breadcrumbs">
63
63
  <ul class="fd-breadcrumb">
64
- <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">root</a></li>
65
- <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">first</a></li>
66
- <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">second</a></li>
67
- <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#">fourth</a></li>
68
- <li aria-current="page" class="fd-breadcrumb__item">fifth</li>
64
+ <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#"><span class="fd-link__content">root</span></a></li>
65
+ <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#"><span class="fd-link__content">first</span></a></li>
66
+ <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#"><span class="fd-link__content">second</span></a></li>
67
+ <li class="fd-breadcrumb__item"><a class="fd-breadcrumb__link" tabindex="0" href="#"><span class="fd-link__content">fourth</span></a></li>
68
+ <li aria-current="page" class="fd-breadcrumb__item"><span class="fd-link__content">fifth</span></li>
69
69
  </ul>
70
70
  </nav>
71
71
  </div>
@@ -381,7 +381,10 @@
381
381
  <div class="fd-panel__content fd-theming__flex">
382
382
  <div class="fd-theming__flex fd-theming__flex-column fd-theming__margin-right-1">
383
383
  <div class="fd-message-strip fd-message-strip--information fd-message-strip--dismissible fd-theming__margin-bottom-03"
384
- role="alert" id="SsoiW592">
384
+ role="alert" aria-live="assertive" id="SsoiW592" aria-labelledby="message-strip-1">
385
+ <div class="fd-message-strip__icon-container" aria-hidden="true">
386
+ <span class="sap-icon sap-icon--message-information" focusable="false" role="presentation" aria-hidden="true"></span>
387
+ </div>
385
388
  <p class="fd-message-strip__text">
386
389
  Message of type "Information" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
387
390
  </p>
@@ -391,7 +394,10 @@
391
394
  </div>
392
395
 
393
396
  <div class="fd-message-strip fd-message-strip--success fd-message-strip--dismissible fd-theming__margin-bottom-03"
394
- role="alert" id="SsoiW593">
397
+ role="alert" aria-live="assertive" id="SsoiW592" aria-labelledby="message-strip-2">
398
+ <div class="fd-message-strip__icon-container" aria-hidden="true">
399
+ <span class="sap-icon sap-icon--message-success" focusable="false" role="presentation" aria-hidden="true"></span>
400
+ </div>
395
401
  <p class="fd-message-strip__text">
396
402
  Message of type "Success" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
397
403
  </p>
@@ -401,7 +407,10 @@
401
407
  </div>
402
408
 
403
409
  <div class="fd-message-strip fd-message-strip--warning fd-message-strip--dismissible fd-theming__margin-bottom-03"
404
- role="alert" id="SsoiW594">
410
+ role="alert" aria-live="assertive" id="SsoiW592" aria-labelledby="message-strip-3">
411
+ <div class="fd-message-strip__icon-container" aria-hidden="true">
412
+ <span class="sap-icon sap-icon--message-warning" focusable="false" role="presentation" aria-hidden="true"></span>
413
+ </div>
405
414
  <p class="fd-message-strip__text">
406
415
  Message of type "Warning" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
407
416
  </p>
@@ -411,7 +420,10 @@
411
420
  </div>
412
421
 
413
422
  <div class="fd-message-strip fd-message-strip--error fd-message-strip--dismissible fd-theming__margin-bottom-03"
414
- role="alert" id="SsoiW595">
423
+ role="alert" aria-live="assertive" id="SsoiW592" aria-labelledby="message-strip-4">
424
+ <div class="fd-message-strip__icon-container" aria-hidden="true">
425
+ <span class="sap-icon sap-icon--message-error" focusable="false" role="presentation" aria-hidden="true"></span>
426
+ </div>
415
427
  <p class="fd-message-strip__text">
416
428
  Message of type "Error" with icon, close button and <a href="#" class="fd-link" tabindex="0">link</a>
417
429
  </p>
package/toolbar.html CHANGED
@@ -27,7 +27,7 @@
27
27
  <div class="fd-panel__content fd-theming__flex-column">
28
28
  <div style="padding: 1rem 5rem 1rem 5rem;">
29
29
  <h4>Plain Toolbar</h4>
30
- <div class="fd-toolbar fd-toolbar--cozy">
30
+ <div class="fd-toolbar fd-toolbar--cozy" aria-label="Plain toolbar">
31
31
  <span class="fd-toolbar__spacer"> </span>
32
32
  <button class="fd-button fd-button--transparent">New</button>
33
33
  <button class="fd-button fd-button--transparent">Open</button>
@@ -47,48 +47,48 @@
47
47
  <br>
48
48
 
49
49
  <h4>Solid Toolbar</h4>
50
- <div class="fd-toolbar fd-toolbar--solid">
50
+ <div class="fd-toolbar fd-toolbar--solid" aria-label="Solid toolbar">
51
51
  <span>Text</span>
52
- <div class="fd-input-group" style="width: 200px; height: 26px;">
53
- <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Search">
54
- <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
55
- <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact" aria-label="Search">
52
+ <div class="fd-input-group" style="width: 200px;">
53
+ <input class="fd-input fd-input-group__input" type="text" placeholder="Search">
54
+ <span class="fd-input-group__addon">
55
+ <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent " aria-label="Search">
56
56
  <i class="sap-icon--search"></i>
57
57
  </button>
58
58
  </span>
59
59
  </div>
60
60
  <span class="fd-toolbar__spacer "> </span>
61
- <button class="fd-button fd-button--compact fd-button--emphasized">Edit</button>
62
- <button class="fd-button fd-button--compact fd-button--transparent">Save</button>
61
+ <button class="fd-button fd-button--emphasized">Edit</button>
62
+ <button class="fd-button fd-button--transparent">Save</button>
63
63
  <span class="fd-toolbar__separator"></span>
64
- <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Download"><i class="sap-icon--download"></i></button>
64
+ <button class="fd-button fd-button--transparent" aria-label="Download"><i class="sap-icon--download"></i></button>
65
65
  </div>
66
66
  <br>
67
67
 
68
68
  <h4>Title Toolbar</h4>
69
- <div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active">
70
- <h4 >Producs (104)</h4>
69
+ <div class="fd-toolbar fd-toolbar--solid fd-toolbar--title fd-toolbar-active" aria-label="Title toolabar">
70
+ <h4 class="fd-title fd-title--h4 fd-toolbar__title">Producs (104)</h4>
71
71
  <span class="fd-toolbar__spacer "></span>
72
- <button class="fd-button fd-button--compact fd-button--transparent">Save</button>
73
- <button class="fd-button fd-button--compact fd-button--transparent">Delete</button>
72
+ <button class="fd-button fd-button--transparent">Save</button>
73
+ <button class="fd-button fd-button--transparent">Delete</button>
74
74
  </div>
75
75
  <br>
76
76
 
77
77
  <h4>Auto Toolbar</h4>
78
78
  <div style="background-color: lightgrey;">
79
- <div class="fd-toolbar fd-toolbar--clear fd-toolbar--auto">
80
- <button class="fd-button fd-button--compact fd-button--transparent">Create</button>
79
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--auto" aria-label="Auto toolbar">
80
+ <button class="fd-button fd-button--transparent">Create</button>
81
81
  <span class="fd-toolbar__spacer "> </span>
82
- <button class="fd-button fd-button--compact fd-button--transparent">Edit</button>
83
- <button class="fd-button fd-button--compact fd-button--transparent">Delete</button>
82
+ <button class="fd-button fd-button--transparent">Edit</button>
83
+ <button class="fd-button fd-button--transparent">Delete</button>
84
84
  <span class="fd-toolbar__separator"></span>
85
- <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Survey">
85
+ <button class="fd-button fd-button--transparent" aria-label="Survey">
86
86
  <i class="sap-icon--survey"></i>
87
87
  </button>
88
- <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Pool">
88
+ <button class="fd-button fd-button--transparent" aria-label="Pool">
89
89
  <i class="sap-icon--pool"></i>
90
90
  </button>
91
- <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Chart">
91
+ <button class="fd-button fd-button--transparent" aria-label="Chart">
92
92
  <i class="sap-icon--pie-chart"></i>
93
93
  </button>
94
94
  </div>
@@ -96,32 +96,32 @@
96
96
  <br>
97
97
 
98
98
  <h4>Transparent Toolbar</h4>
99
- <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
99
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent" aria-label="Transparent toolabar">
100
100
  <span>Text</span>
101
- <div class="fd-input-group" style="width: 200px; height: 26px;">
102
- <input class="fd-input fd-input--compact fd-input-group__input" type="text" placeholder="Search">
103
- <span class="fd-input-group__addon fd-input-group__addon--button fd-input-group__addon--compact">
104
- <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-button--compact" aria-label="Search">
101
+ <div class="fd-input-group" style="width: 200px;">
102
+ <input class="fd-input fd-input-group__input" type="text" placeholder="Search">
103
+ <span class="fd-input-group__addon">
104
+ <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent " aria-label="Search">
105
105
  <i class="sap-icon--search"></i>
106
106
  </button>
107
107
  </span>
108
108
  </div>
109
109
  <span class="fd-toolbar__spacer "> </span>
110
- <button class="fd-button fd-button--compact fd-button--emphasized">Edit</button>
111
- <button class="fd-button fd-button--compact fd-button--transparent">Save</button>
110
+ <button class="fd-button fd-button--emphasized">Edit</button>
111
+ <button class="fd-button fd-button--transparent">Save</button>
112
112
  <span class="fd-toolbar__separator"></span>
113
- <button class="fd-button fd-button--compact fd-button--transparent" aria-label="Download"><i class="sap-icon--download"></i></button>
113
+ <button class="fd-button fd-button--transparent" aria-label="Download"><i class="sap-icon--download"></i></button>
114
114
  </div>
115
115
  <br>
116
116
 
117
117
  <h4>Info Toolbar</h4>
118
- <div class="fd-toolbar fd-toolbar--info">Info Bar</div>
118
+ <div class="fd-toolbar fd-toolbar--info" role="toolbar" aria-label="Info, not active toolbar"><span>Info Bar</span></div>
119
119
  <br>
120
- <div class="fd-toolbar fd-toolbar--info fd-toolbar--active">Active Info Bar</div>
120
+ <div class="fd-toolbar fd-toolbar--info fd-toolbar--active" role="toolbar" aria-label="Info, active toolbar"><span>Active Info Bar</span></div>
121
121
  <br>
122
122
 
123
123
  <h4>Overflow Toolbar</h4>
124
- <div class="fd-toolbar fd-toolbar--cozy">
124
+ <div class="fd-toolbar fd-toolbar--cozy" aria-label="Overflow toolabar">
125
125
  <span>Products (34)</span>
126
126
  <button class="fd-button fd-button--transparent">Create</button>
127
127
  <span class="fd-toolbar__spacer "> </span>