TASK #105401 StarWebComponent开发-button-修改样式及代码

src/components/button/button-styles.ts

@@ -13,7 +13,6 @@ export const sharedStyles: CSSResult = css`
     white-space: nowrap;
     cursor: pointer;
     background: #fff;
-    border: 1px solid #dcdfe6;
     color: #606266;
     -webkit-appearance: none;
     text-align: center;
@@ -26,9 +25,9 @@ export const sharedStyles: CSSResult = css`
     -webkit-user-select: none;
     -ms-user-select: none;
     font-size: 14px;
-    border-radius: 18px;
-    border-style: solid;
     padding: 12px 23px 14px 23px;
+    border: none;
+    border-radius: 18px;
   }
 
   [size='small'] {
@@ -59,57 +58,97 @@ export const sharedStyles: CSSResult = css`
     padding: 0px 22px 2px 22px;
   }
 
-  [variant='account']{
+  [variant='accent'] {
     background-color: #0469e3;
     color: rgb(255, 255, 255);
   }
 
-  [variant='primary']{
-    background-color: #ebebeb;
-    color: rgb(29, 29, 29);
-    line-height: 18.2px;
-    text-align: center;
-    text-decoration: rgb(235, 235, 235);
-    text-decoration-color: rgb(235, 235, 235);
+  [variant='accent']:hover {
+    background-color: rgb(1, 91, 199);
+    box-shadow: none;
   }
 
-  [variant='secondary']{
-    background-color: #3f3f3f;
+  [variant='primary'] {
+    background-color: rgb(34, 34, 34);
     color: rgb(235, 235, 235);
   }
 
-  [variant='negative']{
+  [variant='primary']:hover {
+    background-color: rgb(0, 0, 0);
+    box-shadow: none;
+    color: rgb(255, 255, 255);
+  }
+
+  [variant='secondary'] {
+    background-color: rgb(230, 230, 230);
+    color: rgb(34, 34, 34);
+  }
+
+  [variant='secondary']:hover {
+    background-color: rgb(213, 213, 213);
+    box-shadow: none;
+    color: rgb(0, 0, 0);
+  }
+
+  [variant='negative'] {
+    background-color: rgb(179, 2, 2);
     color: rgb(235, 235, 235);
     border: 1px solid #f56c6c;
-    background-color: rgb(187, 2, 2);
   }
 
-  [variant='black']{
+  [variant='negative']:hover {
+    background-color: rgb(162, 1, 1);
+    color: rgb(235, 235, 235);
+    border: 1px solid #f56c6c;
+  }
+
+  [variant='black'] {
     color: rgb(235, 235, 235);
     background-color: #000000;
   }
 
-  [variant='white']{
+  [variant='white'] {
     background-color: rgb(255, 255, 255);
     color: rgb(235, 235, 235);
   }
 
-  [treatment='fill'][variant="primary"]{
-    box-shadow: none;
-    background-color: rgb(255, 255, 255);
-    color: rgb(235, 235, 235);
-  }
-
-  [treatment='outline'][variant="primary"]{
-    background-color: rgb(84, 84, 84);
-    color: rgb(235, 235, 235);
-  }
-
-  [disabled='true']{
+  [disabled] {
+    background-color: rgb(230, 230, 230);
     cursor: default;
-    background-color: rgb(63, 63, 63);
-    color: #909090;
-    text-decoration: rgb(235, 235, 235);
-    text-decoration-color: rgb(235, 235, 235);
+    pointer-events: none;
+  }
+
+  [treatment='fill'][variant="primary"] {
+    color: rgb(255, 255, 255);
+  }
+
+  [treatment='fill'][variant="primary"]:hover {
+    background-color: rgb(0, 0, 0);
+  }
+
+  [treatment='outline'][variant="primary"] {
+    background-color: rgba(0, 0, 0, 0);
+    border-style: solid;
+    color: rgb(34, 34, 34);
+  }
+
+  [treatment='outline'][variant="primary"]:hover {
+    background-color: rgb(213, 213, 213);
+    border-style: solid;
+    color: rgb(0, 0, 0);
+  }
+
+  button.hasicon::before {
+    font-size: 16px;
+    min-height: 32px;
+    min-width: 72px;
+    font-family: 'gaia-icons';
+    text-align: left;
+    content: attr(data-icon);
+    padding-inline-end: var(--li-right-padding);
+  }
+  
+  span.label {
+    text-align: left;
   }
 `

src/components/button/button.ts

@@ -35,26 +35,59 @@ export class StarButton extends LitElement {
   public static override get styles(): CSSResultArray {
     return [sharedStyles]
   }
-  @property({ type: ButtonType }) type = ''
-  @property({ type: ButtonVariants }) variant = ''
-  @property({ type: ButtonSize }) size = ''
+  @property({ type: ButtonType }) type = 'base'
+  @property({ type: ButtonVariants }) variant = 'accent'
+  @property({ type: ButtonSize }) size = 'medium'
   @property({ type: String }) label = ''
-  @property({ type: String }) disabled = ''
+  @property({ type: Boolean }) disabled = false
   @property({ type: String }) treatment = ''
+  @property({ type: String }) icon = ''
+  @property({ type: String }) iconcolor = ''
 
   getBaseButton(): HTMLTemplateResult {
+    const colorstyle = this.iconcolor
+      ? html`
+          <style>
+            button::before {
+              color: ${this.iconcolor} !important;
+            }
+          </style>
+        `
+      : nothing
     if (this.hasAttribute("disabled")) {
-      return html`
-      <button treatment=${this.treatment} variant=${this.variant} size=${this.size} disabled=${this.disabled}>
-        <slot name="icon"></slot>${this.label}
-      </button>
-    `
+      if (this.hasAttribute("icon")) {
+        return html`
+          <button treatment=${this.treatment} variant=${this.variant} size=${this.size} data-icon=${this.icon} class="hasicon" disabled>
+            ${colorstyle}
+            <a>
+              <span class="label">${this.label}</span>
+            </a>
+          </button>
+        `
+      } else {
+        return html`
+          <button treatment=${this.treatment} variant=${this.variant} size=${this.size} disabled>
+            ${this.label}
+          </button>
+        `
+      }
     } else {
-      return html`
-      <button treatment=${this.treatment} variant=${this.variant} size=${this.size}>
-        <slot name="icon"></slot>${this.label}
-      </button>
-    `
+      if (this.hasAttribute("icon")) {
+        return html`
+          <button treatment=${this.treatment} variant=${this.variant} size=${this.size} data-icon=${this.icon} class="hasicon">
+            ${colorstyle}
+            <a>
+              <span class="label">${this.label}</span>
+            </a>
+          </button>
+        `
+      } else {
+        return html`
+          <button treatment=${this.treatment} variant=${this.variant} size=${this.size}>
+            ${this.label}
+          </button>
+        `
+      }
     }
   }
 

src/test/panels/button/button.ts

@@ -1,76 +1,57 @@
 import { html, LitElement, CSSResultArray } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, eventOptions } from 'lit/decorators.js'
 import { starbuttonStyles } from '../starbutton-styles'
-import { ButtonSize } from '../../../components/button/button'
-import {UlType} from '../../../components/ul/ul'
+import { StarButton } from '../../../components/button/button'
 
 @customElement('panel-button')
 export class PanelButton extends LitElement {
-  @property()
-  foo = ''
-
-  @state()
-  bar = ''
+  @eventOptions({ passive: false })
+  handleEvent(evt: Event) {
+    switch (evt.type) {
+      case 'click':
+        if ((evt.target as StarButton).label === 'Click') {
+          alert('这是一次点击事件测试')
+        }
+        break
+    }
+  }
 
   render() {
     return html`
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="Variants"
-      text="Variants Test"
-    >
-      <star-button type="base" variant="account" label="为啥不居中"></star-button>
+    <div>
+      <h4>按钮类型属性展示</h4>
+      <star-button type="base" variant="accent" label="accent"></star-button>
       <star-button type="base" variant="primary" label="primary"></star-button>
       <star-button type="base" variant="secondary" label="secondary"></star-button>
       <star-button type="base" variant="negative" label="negative"></star-button>
       <star-button type="base" variant="black" label="black"></star-button>
       <star-button type="base" variant="white" label="white"></star-button>
-    </star-ul>
-
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="Size"
-      text="Size Test"
-    >
-    <star-button type="base" variant="account" label="account-small" size="small"></star-button>
-      <star-button type="base" variant="primary" label="primary-medium" size="medium"></star-button>
-      <star-button type="base" variant="black" label="black-extralarge" size=${ButtonSize.EXTRALARGE}></star-button>
-      <star-button type="base" variant="white" label="white-large" size="large"></star-button>
-    </star-ul>
-
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="Treament"
-      text="Treament Test"
-    >
-      <star-button type="base" treatment="fill" variant="primary" label="primary、fill"></star-button>
-      <star-button type="base" treatment="outline" variant="primary" label="primary、outline"></star-button>
-    </star-ul>
-
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="State"
-      text="State Test"
-    >
-      <star-button type="base" variant="primary" label="primary、fill"></star-button>
-      <star-button type="base" variant="primary" label="primary、outline" disabled="true"></star-button>
-    </star-ul>
-
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="Click"
-      text="Click Test"
-    >
-    <star-button @click=${this} type="base" variant="account" label="Click测试"></star-button>
-    </star-ul>
-
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="Content"
-      text="Content Test"
-    >
-    <star-button type="base" variant="account" label="Icon测试"><img slot="icon" src="2g"></star-button>
-    </star-ul>
+    </div>
+    <div>
+      <h4>按钮大小属性展示</h4>
+      <star-button type="base" variant="accent" label="small" size="small"></star-button>
+      <star-button type="base" variant="accent" label="medium" size="medium"></star-button>
+      <star-button type="base" variant="accent" label="large" size="large"></star-button>
+      <star-button type="base" variant="accent" label="extralarge" size="extralarge"></star-button>
+    </div>
+    <div>
+      <h4>按钮填充状态展示</h4>
+      <star-button type="base" treatment="fill" variant="primary" label="fill"></star-button>
+      <star-button type="base" treatment="outline" variant="primary" label="outline"></star-button>
+    </div>
+    <div>
+      <h4>按钮禁用状态展示</h4>
+      <star-button type="base" variant="accent" label="正常状态"></star-button>
+      <star-button type="base" variant="accent" label="禁用状态" disabled></star-button>
+    </div>
+    <div>
+      <h4>按钮点击事件展示</h4>
+      <star-button @click=${this} type="base" variant="accent" label="Click"></star-button>
+    </div>
+    <div>
+      <h4>图标按钮展示</h4>
+      <star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="red"></star-button>
+    </div>
     `
   }