Merge pull request #479 from Infineon/274-design-review-component-but…

…tons

button+icon-button updated based on DesignReview

examples/stencil-components/angular/src/app/app.component.html

@@ -22,32 +22,32 @@
   <h1>Using Stencil web components in an Angular application</h1>
 
   <h2>Breadcrumb</h2>
-    <ifx-breadcrumb>
-      <ifx-breadcrumb-item>
-        <ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 1</ifx-breadcrumb-item-label>
-        <ifx-dropdown-menu>
-          <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
-          <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
-          <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
-          <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
-        </ifx-dropdown-menu>
-      </ifx-breadcrumb-item>
-
-      <ifx-breadcrumb-item>
-        <ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 2</ifx-breadcrumb-item-label>
-        <ifx-dropdown-menu>
+  <ifx-breadcrumb>
+    <ifx-breadcrumb-item>
+      <ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 1</ifx-breadcrumb-item-label>
+      <ifx-dropdown-menu>
         <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
         <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
         <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
         <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
-        </ifx-dropdown-menu>
-      </ifx-breadcrumb-item>
-
-      <ifx-breadcrumb-item>
-        <ifx-breadcrumb-item-label slot="label" icon="" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
-      </ifx-breadcrumb-item>
-    </ifx-breadcrumb>
-    <br />
+      </ifx-dropdown-menu>
+    </ifx-breadcrumb-item>
+
+    <ifx-breadcrumb-item>
+      <ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 2</ifx-breadcrumb-item-label>
+      <ifx-dropdown-menu>
+        <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
+        <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
+        <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
+        <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
+      </ifx-dropdown-menu>
+    </ifx-breadcrumb-item>
+
+    <ifx-breadcrumb-item>
+      <ifx-breadcrumb-item-label slot="label" icon="" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
+    </ifx-breadcrumb-item>
+  </ifx-breadcrumb>
+  <br />
 
   <h2>Alert</h2>
   <ifx-alert color="primary" icon="c-info-24">Attention! This is an alert message — check it out!</ifx-alert>
@@ -67,7 +67,7 @@ <h2>Tag</h2>
 
   <h2>Button</h2>
   <div>
-    <ifx-button variant="solid" href="" target="_blank" color="primary" size="m" [disabled]="false" [icon]="false">
+    <ifx-button variant="primary" href="" target="_blank" theme="default" size="m" [disabled]="false" [icon]="false">
       Button
     </ifx-button>
   </div>
@@ -77,7 +77,7 @@ <h2>Progress bar</h2>
   <ifx-progress-bar [value]="progressValue" size="m" show-label="true"></ifx-progress-bar>
   <div>
     <br />
-    <ifx-button variant="solid" icon="" position="left" href="" target="_blank" color="primary" size="m"
+    <ifx-button variant="primary" icon="" position="left" href="" target="_blank" theme="default" size="m"
       [disabled]="false" (click)="updateProgressOnClick()">
       Update progress
     </ifx-button>
@@ -96,9 +96,9 @@ <h2>Checkbox</h2>
     <ifx-button type="submit">Submit</ifx-button>
   </form>
 
-  <ifx-button variant="outline" (click)="toggleCheckboxDisabled()">Toggle Disabled</ifx-button>
-  <ifx-button variant="outline" (click)="toggleCheckboxError()">Toggle Error</ifx-button>
-  <ifx-button variant="outline" (click)="toggleCheckboxValue()">Toggle Value</ifx-button>
+  <ifx-button variant="secondary" (click)="toggleCheckboxDisabled()">Toggle Disabled</ifx-button>
+  <ifx-button variant="secondary" (click)="toggleCheckboxError()">Toggle Error</ifx-button>
+  <ifx-button variant="secondary" (click)="toggleCheckboxValue()">Toggle Value</ifx-button>
 
   <span>Disabled: {{ checkboxDisabled }} </span>
   <span>Error: {{ checkboxError }} </span>
@@ -127,9 +127,9 @@ <h2>Radio Button</h2>
       Text
     </ifx-radio-button>
   </form>
-  <ifx-button variant="outline" (click)="toggleRadioBtnDisabled()">Toggle Disabled</ifx-button>
-  <ifx-button variant="outline" (click)="toggleRadioBtnError()">Toggle Error</ifx-button>
-  <ifx-button variant="outline" (click)="toggleRadioBtnValue()">Toggle Value</ifx-button>
+  <ifx-button variant="secondary" (click)="toggleRadioBtnDisabled()">Toggle Disabled</ifx-button>
+  <ifx-button variant="secondary" (click)="toggleRadioBtnError()">Toggle Error</ifx-button>
+  <ifx-button variant="secondary" (click)="toggleRadioBtnValue()">Toggle Value</ifx-button>
   <span>Disabled: {{ radioDisabled }} </span>
   <span>Error: {{ radioError }} </span>
   <span>Value: {{ radioChecked }}</span>
@@ -214,8 +214,8 @@ <h2>Card</h2>
       more and more.</ifx-card-text>
 
     <ifx-card-links slot="buttons">
-      <ifx-button color="primary">Button</ifx-button>
-      <ifx-button color="secondary">Button</ifx-button>
+      <ifx-button theme="default">Button</ifx-button>
+      <ifx-button theme="danger">Button</ifx-button>
     </ifx-card-links>
   </ifx-card>
   <br />
@@ -309,7 +309,7 @@ <h2>Table</h2>
     cols='[{"headerName":"Make","field":"make","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Model","field":"model","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Age","field":"age"}]'
     rows='[{"make":"Toyota","model":"Celica","price":35000,"age":10},{"make":"Ford","model":"Mondeo","price":32000,"age":12},{"make":"Porsche","model":"Boxster","price":72000}]'
     table-height='auto'>
-  </ifx-basic-table> 
+  </ifx-basic-table>
   <br />
 
 </div>

examples/stencil-components/vanilla-cdn/index.html

@@ -49,17 +49,17 @@ <h2>Breadcrumb</h2>
           <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
         </ifx-dropdown-menu>
       </ifx-breadcrumb-item>
-    
+
       <ifx-breadcrumb-item>
         <ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 2</ifx-breadcrumb-item-label>
         <ifx-dropdown-menu>
-        <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
+          <ifx-dropdown-item url="http://google.com">Google</ifx-dropdown-item>
+          <ifx-dropdown-item url="http://bing.com">Bing</ifx-dropdown-item>
+          <ifx-dropdown-item url="http://yahoo.com">Yahoo</ifx-dropdown-item>
+          <ifx-dropdown-item url="http://naver.com">Naver</ifx-dropdown-item>
         </ifx-dropdown-menu>
       </ifx-breadcrumb-item>
-    
+
       <ifx-breadcrumb-item>
         <ifx-breadcrumb-item-label slot="label" icon="" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
       </ifx-breadcrumb-item>
@@ -85,14 +85,14 @@ <h2>Tag</h2>
     <br />
 
     <h2>Button</h2>
-    <ifx-button variant="solid" href="" target="_blank" color="primary" size="m" disabled="false" icon="false">
+    <ifx-button variant="primary" href="" target="_blank" theme="default" size="m" disabled="false" icon="false">
       Button
     </ifx-button>
     <br />
 
     <h2>Progress bar</h2>
     <ifx-progress-bar id="progress-bar" value="50" size="m" show-label="true"></ifx-progress-bar>
-    <ifx-button onclick="updateProgress()" variant="outline" href="" target="_blank" color="primary" size="s"
+    <ifx-button onclick="updateProgress()" variant="secondary" href="" target="_blank" theme="default" size="s"
       disabled="false" icon="false">
       Update Progress
     </ifx-button>
@@ -103,7 +103,7 @@ <h2>Checkbox</h2>
     <form id="form">
       <ifx-checkbox id="checkbox" name="name">label</ifx-checkbox>
       <br />
-      <ifx-button type="submit" variant="outline">Submit</ifx-button>
+      <ifx-button type="submit" variant="secondary">Submit</ifx-button>
 
     </form>
 
@@ -204,8 +204,8 @@ <h2>Card</h2>
         more text. And more and more.</ifx-card-text>
 
       <ifx-card-links slot="buttons">
-        <ifx-button id="cardBtn" color="primary">Button</ifx-button>
-        <ifx-button color="secondary">Button</ifx-button>
+        <ifx-button id="cardBtn" theme="default">Button</ifx-button>
+        <ifx-button theme="danger">Button</ifx-button>
       </ifx-card-links>
     </ifx-card>
     <br />
@@ -254,13 +254,13 @@ <h2>Tooltip</h2>
     <br />
 
     <ifx-tooltip header="Dismissible tooltip header" text="Hi, I'm a dismissible tooltip" variant="dismissible"
-      position="right"> <ifx-button variant="outline" color="primary" size="m" disabled="false" icon="false">
+      position="right"> <ifx-button variant="secondary" theme="default" size="m" disabled="false" icon="false">
         Dismissible tooltip on button click
       </ifx-button></ifx-tooltip>
     <br />
 
     <ifx-tooltip header="Dismissible tooltip header" text="Hi, I'm an extended tooltip" variant="extended"
-      position="auto"> <ifx-button variant="outline" color="primary" size="m" disabled="false" icon="false">
+      position="auto"> <ifx-button variant="secondary" theme="default" size="m" disabled="false" icon="false">
         Extended tooltip on button hover
       </ifx-button></ifx-tooltip>
 
@@ -307,13 +307,13 @@ <h2>Tooltip</h2>
     <br />
 
     <ifx-tooltip header="Dismissible tooltip header" text="Hi, I'm a dismissible tooltip" variant="dismissible"
-      position="right"> <ifx-button variant="outline" color="primary" size="m" disabled="false" icon="false">
+      position="right"> <ifx-button variant="secondary" theme="default" size="m" disabled="false" icon="false">
         Dismissible tooltip on button click
       </ifx-button></ifx-tooltip>
     <br />
 
     <ifx-tooltip header="Dismissible tooltip header" text="Hi, I'm an extended tooltip" variant="extended"
-      position="auto"> <ifx-button variant="outline" color="primary" size="m" disabled="false" icon="false">
+      position="auto"> <ifx-button variant="secondary" theme="default" size="m" disabled="false" icon="false">
         Extended tooltip on button hover
       </ifx-button></ifx-tooltip>
     <br />
@@ -330,7 +330,7 @@ <h2>
     <br />
     <ifx-table row-height='default'
       cols='[{"headerName":"Make","field":"make","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Model","field":"model","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Age","field":"age"},{"headerName":"","field":"button"}]'
-      rows='[{"make":"Toyota","model":"Celica","price":35000,"age":10,"button":"something about Toyota"},{"make":"Ford","model":"Mondeo","price":32000,"age":12,"button":"something about Ford"},{"make":"Porsche","model":"Boxster","price":72000,"button":{"disabled":false,"variant":"outline","size":"s","target":"_blank","color":"secondary","text":"Button"}}]'
+      rows='[{"make":"Toyota","model":"Celica","price":35000,"age":10,"button":"something about Toyota"},{"make":"Ford","model":"Mondeo","price":32000,"age":12,"button":"something about Ford"},{"make":"Porsche","model":"Boxster","price":72000,"button":{"disabled":false,"variant":"secondary","size":"s","target":"_blank","theme":"danger","text":"Button"}}]'
       table-height='auto' pagination='false' pagination-page-size='10'>
     </ifx-table>
 

examples/wrapper-components/react-javascript/src/components/Button/button.js

@@ -4,8 +4,8 @@ import { IfxButton } from '@infineon/infineon-design-system-react';
 function Button() {
   return (
     <div >
-      <IfxButton color='primary'>Yes</IfxButton>
-      <IfxButton color='secondary'>No</IfxButton>
+      <IfxButton theme='default'>Yes</IfxButton>
+      <IfxButton theme='danger'>No</IfxButton>
     </div>
   )
 }

examples/wrapper-components/react-javascript/src/components/IconButton/IconButton.js

@@ -4,7 +4,7 @@ import { IfxIconButton } from '@infineon/infineon-design-system-react';
 function IconButton() {
   return (
     <div>
-      <IfxIconButton shape="round" variant="outline" icon="calendar16" href="http://google.com" target="_blank" color="secondary" size="s" disabled="true"></IfxIconButton>
+      <IfxIconButton shape="round" variant="primary" icon="calendar16" href="http://google.com" target="_blank" size="s" disabled="true"></IfxIconButton>
     </div>
   );
 }

examples/wrapper-components/react-typescript/src/components/Button/button.tsx

@@ -3,8 +3,8 @@ import { IfxButton } from '@infineon/infineon-design-system-react';
 function Button() {
   return (
     <div >
-      <IfxButton color='primary'>Yes</IfxButton>
-      <IfxButton color='secondary'>No</IfxButton>
+      <IfxButton theme='default'>Yes</IfxButton>
+      <IfxButton theme='danger'>No</IfxButton>
     </div>
   )
 }

examples/wrapper-components/react-typescript/src/components/IconButton/IconButton.tsx

@@ -4,7 +4,7 @@ import { IfxIconButton } from '@infineon/infineon-design-system-react';
 function IconButton() {
   return (
     <div>
-      <IfxIconButton shape="round" variant="outline" icon="calendar16" href="http://google.com" target="_blank" color="secondary" size="s" disabled="true"></IfxIconButton>
+      <IfxIconButton shape="round" variant="primary" icon="calendar16" href="http://google.com" target="_blank" size="s" disabled="true"></IfxIconButton>
     </div>
   );
 }

examples/wrapper-components/vue-javascript/src/components/Button.vue

@@ -4,10 +4,16 @@
   <div>
     <h2>Button</h2>
     <div>
-      <ifx-button variant="solid" href="" target="_blank" color="primary" size="m"
-        disabled="false" @click="handleClick" @mouseover="handleMouseOver">
+      <ifx-button variant="primary" href="" target="_blank" theme="default" size="m" disabled="false" @click="handleClick"
+        @mouseover="handleMouseOver">
         Click me
       </ifx-button>
+      <div style="background-color:grey">
+        <ifx-button variant="tertiary" href="" target="_blank" theme="inverse" size="m" disabled="false"
+          @click="handleClick" @mouseover="handleMouseOver">
+          I'm a button in a div
+        </ifx-button>
+      </div>
     </div>
     <br />
     <br />

examples/wrapper-components/vue-javascript/src/components/Card.vue

@@ -4,21 +4,31 @@
   <div>
     <h2>Card</h2>
     <ifx-card href="http://google.com" target="_blank" direction="vertical">
-    <ifx-card-image position="right" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg" alt="" slot="img"></ifx-card-image>
-
+      <ifx-card-image position="right" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg"
+        alt="" slot="img"></ifx-card-image>
+
       <ifx-card-overline>Overline</ifx-card-overline>
       <ifx-card-headline>Headline</ifx-card-headline>
-      <ifx-card-text>This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more.This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more.This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a long description in order to test if the text will overflow its container or not. So I am typing even more text. And more and more.</ifx-card-text>
+      <ifx-card-text>This is a long description in order to test if the text will overflow its container or not. So I am
+        typing even more text. And more and more. This is a long description in order to test if the text will overflow
+        its container or not. So I am typing even more text. And more and more. This is a long description in order to
+        test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a
+        long description in order to test if the text will overflow its container or not. So I am typing even more text.
+        And more and more.This is a long description in order to test if the text will overflow its container or not. So I
+        am typing even more text. And more and more. This is a long description in order to test if the text will overflow
+        its container or not. So I am typing even more text. And more and more.This is a long description in order to test
+        if the text will overflow its container or not. So I am typing even more text. And more and more. This is a long
+        description in order to test if the text will overflow its container or not. So I am typing even more text. And
+        more and more.</ifx-card-text>
 
       <ifx-card-links slot="buttons">
-        <ifx-button color="primary">Button</ifx-button>
-        <ifx-button color="secondary">Button</ifx-button>
+        <ifx-button theme="default">Button</ifx-button>
+        <ifx-button theme="danger">Button</ifx-button>
       </ifx-card-links>
-  </ifx-card>
+    </ifx-card>
     <br />
     <br />
-  </div>
-</template>
+</div></template>
 
 <script setup>
 

examples/wrapper-components/vue-javascript/src/components/Checkbox.vue

@@ -10,15 +10,15 @@
       <ifx-checkbox :disabled="disabled" @ifxChange="handleCheckboxChange" :value="checkboxValue" :error="error"
         name="name">label</ifx-checkbox>
       <br />
-      <ifx-button color="primary" type="submit">Submit</ifx-button>
+      <ifx-button theme="default" type="submit">Submit</ifx-button>
     </form>
     <br />
     <div>
-      <ifx-button variant="outline" color="primary" @click="toggleDisabled">Toggle Disabled</ifx-button>
+      <ifx-button variant="secondary" theme="default" @click="toggleDisabled">Toggle Disabled</ifx-button>
 
-      <ifx-button variant="outline" color="primary" @click="toggleError">Toggle Error</ifx-button>
+      <ifx-button variant="secondary" theme="default" @click="toggleError">Toggle Error</ifx-button>
 
-      <ifx-button variant="outline" color="primary" @click="toggleValue">Toggle Value</ifx-button>
+      <ifx-button variant="secondary" theme="default" @click="toggleValue">Toggle Value</ifx-button>
 
     </div>
     <br />

examples/wrapper-components/vue-javascript/src/components/IconButton.vue

@@ -2,9 +2,9 @@
 
 <template>
   <div>
-    <ifx-icon-button shape="round" variant="outline" icon="calendar16" href="http://google.com" target="" color="secondary" size="s" disabled="true"></ifx-icon-button>
+    <ifx-icon-button shape="round" variant="primary" icon="calendar16" href="http://google.com" target="" size="s"
+      disabled="true"></ifx-icon-button>
   </div>
-
 </template>
 
 <script setup>

examples/wrapper-components/vue-javascript/src/components/MultiSelect.vue

@@ -5,9 +5,9 @@
       :error="error" :erroMessage="errorMessage" error-message="Some error" label=""
       :disabled="disabled"></ifx-multiselect>
     <div>
-      <ifx-button variant="outline" color="primary" @click="toggleDisabled">Toggle Disabled</ifx-button>
+      <ifx-button variant="secondary" theme="default" @click="toggleDisabled">Toggle Disabled</ifx-button>
 
-      <ifx-button variant="outline" color="primary" @click="toggleError">Toggle Error</ifx-button>
+      <ifx-button variant="secondary" theme="default" @click="toggleError">Toggle Error</ifx-button>
     </div>
     <br />
     <br />

examples/wrapper-components/vue-javascript/src/components/ProgressBar.vue

@@ -8,7 +8,7 @@
     <ifx-progress-bar v-model="progress" size="m" show-label="true"></ifx-progress-bar>
     <br />
 
-    <ifx-button @click="updateProgress" variant="outline" href="" target="_blank" color="primary" size="s"
+    <ifx-button @click="updateProgress" variant="secondary" href="" target="_blank" theme="default" size="s"
       disabled="false" icon="false">
       Update Progress
     </ifx-button>