Skip to content

Commit

Permalink
feat: button updates (#708)
Browse files Browse the repository at this point in the history 
* fix:introduce attention and ghost buttons; remove default, rename light to transparent button
  • Loading branch information
@rengare
rengare committed Feb 28, 2020
1 parent 1424ee7 commit a646e75
Show file tree
Hide file tree
Showing 55 changed files with 694 additions and 535 deletions.
10 changes: 5 additions & 5 deletions docs/_includes/demo-page-components/table-page-content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ <h3 class="fd-panel__title">
<div class="fd-dropdown">
<div class="fd-popover">
<div class="fd-popover__control">
<button class="fd-button--standard fd-button--compact sap-icon--sort" aria-label="Newest"
<button class="fd-button fd-button--compact sap-icon--sort" aria-label="Newest"
aria-expanded="false" aria-controls="tf5QS710" aria-haspopup="true">Newest</button>
</div>
<div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
Expand All @@ -24,7 +24,7 @@ <h3 class="fd-panel__title">
</div>
</div>
</div>
<button class="fd-button--standard fd-button--compact sap-icon--filter" aria-controls="yQUnd326"
<button class="fd-button fd-button--compact sap-icon--filter" aria-controls="yQUnd326"
aria-haspopup="true" aria-expanded="false" aria-label="Filter">Filter</button>
<div class="fd-segmented-button" role="group" aria-label="Show as">
<button class="fd-button fd-button--compact sap-icon--grid"></button>
Expand All @@ -36,7 +36,7 @@ <h3 class="fd-panel__title">
<div class="fd-dropdown fd-dropdown--s">
<div class="fd-popover">
<div class="fd-popover__control">
<button class="fd-dropdown__control fd-button--standard fd-button--compact" aria-label="Color" aria-expanded="false"
<button class="fd-dropdown__control fd-button fd-button--compact" aria-label="Color" aria-expanded="false"
aria-controls="CVXoG110" aria-haspopup="true">Color</button>
</div>
<div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow" aria-hidden="true"
Expand All @@ -54,7 +54,7 @@ <h3 class="fd-panel__title">
<div class="fd-dropdown fd-dropdown--s">
<div class="fd-popover">
<div class="fd-popover__control">
<button class="fd-dropdown__control fd-button--standard fd-button--compact" aria-label="Size" aria-expanded="false"
<button class="fd-dropdown__control fd-button fd-button--compact" aria-label="Size" aria-expanded="false"
aria-controls="p7mxb212" aria-haspopup="true">Size</button>
</div>
<div class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow" aria-hidden="true"
Expand All @@ -75,7 +75,7 @@ <h3 class="fd-panel__title">
<span class="fd-token" role="button">Bibendum</span>
<span class="fd-token" role="button">Bibendum</span>
<span class="fd-token" role="button">Bibendum</span>
<button class="fd-button--light fd-button--compact">Clear All</button>
<button class="fd-button--transparent fd-button--compact">Clear All</button>
</div>
<div class="fd-panel__body fd-panel__body--bleed">
<table class="fd-table">
Expand Down
38 changes: 19 additions & 19 deletions docs/_includes/demo-page-components/tile-page-content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ <h3 class="fd-panel__title">
Items (18)
</h3>
<div class="fd-panel__actions">
<button class="fd-button--compact fd-button--standard sap-icon--search" aria-label="Search"></button>
<button class="fd-button--compact fd-button sap-icon--search" aria-label="Search"></button>
<div class="fd-segmented-button" role="group" aria-label="Show as">
<button class=" fd-button fd-button--compact sap-icon--grid" aria-pressed="true"></button>
<button class=" fd-button fd-button--compact sap-icon--list"></button>
Expand All @@ -28,7 +28,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -44,7 +44,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -60,7 +60,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -76,7 +76,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -92,7 +92,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -108,7 +108,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -124,7 +124,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -140,7 +140,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -156,7 +156,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -172,7 +172,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -188,7 +188,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -204,7 +204,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -220,7 +220,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -236,7 +236,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -252,7 +252,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -268,7 +268,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -284,7 +284,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<div class="fd-tile">
Expand All @@ -300,7 +300,7 @@ <h3 class="fd-tile__title">Lorem ipsum</h3><p>Second line</p>
</p>
</div>
<div class="fd-tile__actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions docs/_includes/demo-page-components/tree-page-content.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ <h3 class="fd-panel__title">
</span>
</div>
<div class="fd-tree__col fd-tree__col--actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<ul class="fd-tree__group fd-tree__group--sublevel-1 is-hidden" role="group" aria-hidden="true">
Expand All @@ -67,7 +67,7 @@ <h3 class="fd-panel__title">
</span>
</div>
<div class="fd-tree__col fd-tree__col--actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<ul class="fd-tree__group fd-tree__group--sublevel-2 is-hidden" role="group" aria-hidden="true">
Expand All @@ -89,7 +89,7 @@ <h3 class="fd-panel__title">
</span>
</div>
<div class="fd-tree__col fd-tree__col--actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<ul class="fd-tree__group fd-tree__group--sublevel-3 is-hidden" role="group" aria-hidden="true">
Expand All @@ -110,7 +110,7 @@ <h3 class="fd-panel__title">
</span>
</div>
<div class="fd-tree__col fd-tree__col--actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
</li>
Expand All @@ -135,7 +135,7 @@ <h3 class="fd-panel__title">
</span>
</div>
<div class="fd-tree__col fd-tree__col--actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
</li>
Expand All @@ -159,7 +159,7 @@ <h3 class="fd-panel__title">
</span>
</div>
<div class="fd-tree__col fd-tree__col--actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
<ul class="fd-tree__group fd-tree__group--sublevel-1 is-hidden" role="group" aria-hidden="true">
Expand All @@ -180,7 +180,7 @@ <h3 class="fd-panel__title">
</span>
</div>
<div class="fd-tree__col fd-tree__col--actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
</li>
Expand All @@ -203,7 +203,7 @@ <h3 class="fd-panel__title">
</span>
</div>
<div class="fd-tree__col fd-tree__col--actions">
<button class="fd-button--light sap-icon--overflow" aria-label="More"></button>
<button class="fd-button--transparent sap-icon--overflow" aria-label="More"></button>
</div>
</div>
</li>
Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/search-box.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="fd-input-group">
<input type="text" class="fd-input fd-input-group__input" id="docs-search" placeholder="{{site.data.strings.search_placeholder_text}}">
<span class="fd-input-group__addon fd-input-group__addon--button">
<button class="fd-button fd-button--light">
<button class="fd-button fd-button--transparent">
<span class="fd-button--content sap-icon--search"></span>
</button>
</span>
Expand Down
2 changes: 1 addition & 1 deletion docs/_includes/topnav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
Fundamental Library<span class="docs-top-nav__logo__accent"> Styles</span>
</a>

<button id="mobile-sidenav-btn" class="fd-button--light sap-icon--menu2 header-section__sap-icon--menu2" aria-haspopup="true" aria-expanded="false" aria-label="Menu"></button>
<button id="mobile-sidenav-btn" class="fd-button--transparent sap-icon--menu2 header-section__sap-icon--menu2" aria-haspopup="true" aria-expanded="false" aria-label="Menu"></button>

<!-- support links -->
<div class="docs-top-nav__support fd-has-float-right">
Expand Down

0 comments on commit a646e75

Please sign in to comment.