From 45ce335ec5c7276da3ca588573b8c7343506f740 Mon Sep 17 00:00:00 2001 From: "hazuki.okuda" Date: Thu, 14 Nov 2024 10:23:02 +0900 Subject: [PATCH] wip tab --- src/components/tab/sp-tab.ts | 116 +++++++++++++---------------------- src/components/tab/tab.css | 107 ++++++++++++-------------------- stories/tab/sp-tab.story.ts | 46 +++++++------- tsconfig.json | 3 +- 4 files changed, 107 insertions(+), 165 deletions(-) diff --git a/src/components/tab/sp-tab.ts b/src/components/tab/sp-tab.ts index d1cfc33..a19a05c 100644 --- a/src/components/tab/sp-tab.ts +++ b/src/components/tab/sp-tab.ts @@ -2,101 +2,85 @@ import foundationStyle from "../foundation.css?inline" assert { type: "css" }; // @ts-ignore import tabStyle from "./tab.css?inline" assert { type: "css" }; -import { SpeedaIconTypes } from "../icon/icons"; +// @ts-ignore +import resetStyle from "@acab/reset.css?inline" assert { type: "css" }; import { SpIcon } from "../icon/sp-icon"; -type TabType = "tabWhite" | "tabGray"; +type TabType = "fillWhite" | "fillGray"; const styles = new CSSStyleSheet(); -styles.replaceSync(`${foundationStyle} ${tabStyle}`); +styles.replaceSync(`${foundationStyle} ${tabStyle} ${resetStyle}`); export class SpTab extends HTMLElement { - #selected: boolean; - #disabled: boolean; - #type: TabType; - #createNewIcon: boolean; - #createNewIconElement = new SpIcon(); - tabElement = document.createElement("button"); - textElement = document.createElement("span"); + #selected: boolean = false; + #disabled: boolean = false; + #type!: TabType; + #plusIconElement = new SpIcon(); + #tabElement = document.createElement("button"); + #textElement = document.createElement("span"); set text(value: string) { - this.textElement.innerText = value; - } - - get selected() { - return this.#selected; - } - set selected(value: boolean) { - this.#selected = value; - value ? this.#onSelectedAdd() : this.#onSelectedRemove(); + this.#textElement.innerText = value; } - get disabled() { - return this.#disabled; - } set disabled(value: boolean) { - const tab = this.tabElement; this.#disabled = value; + const tab = this.#tabElement; value ? tab.classList.add("isDisable") : tab.classList.remove("isDisable"); - this.#tabDisabledUpdate(); + this.#tabElement.disabled = this.#disabled; } - get type() { - return this.#type; + set selected(value: boolean) { + this.#selected = value; + value ? this.#tabElement.classList.add("-selected") : this.#tabElement.classList.remove("-selected") + this.#tabElement.setAttribute("aria-selected", this.#selected+""); } set type(value: TabType) { - const tab = this.tabElement; + this.#type = value; + const tab = this.#tabElement; const typeClassList = { - tabWhite: "-white", - tabGray: "-gray", + fillWhite: "-fillWhite", + fillGray: "-fillGray", }; tab.classList.remove(typeClassList[this.#type]); - tab.classList.add(typeClassList[value]); - this.#type = value; - } - get createNewIcon() { - return this.#createNewIcon; + tab.classList.add(typeClassList[this.#type]); } - set createNewIcon(value: boolean) { - this.#createNewIcon = value; - if (value === true) { - this.tabElement.insertBefore( - this.#createNewIconElement, - this.textElement, + + set plusIcon(value: boolean) { + this.#tabElement.appendChild(this.#textElement); + if (value) { + this.#tabElement.insertBefore( + this.#plusIconElement, + this.#textElement, ); } else { - this.#createNewIconElement.remove(); + this.#plusIconElement.remove(); } } static get observedAttributes() { - return ["text", "selected", "create-new-icon", "disabled", "type"]; + return ["text", "selected", "plus-icon", "disabled", "type"]; } constructor() { super(); this.attachShadow({ mode: "open" }); - this.shadowRoot.adoptedStyleSheets = [ - ...this.shadowRoot.adoptedStyleSheets, + this.shadowRoot!.adoptedStyleSheets = [ + ...this.shadowRoot!.adoptedStyleSheets, styles, ]; - this.tabElement.classList.add("spds__tab"); - this.tabElement.setAttribute("role", "tab"); - this.tabElement.setAttribute("aria-tabindex", "0"); - this.textElement.classList.add("spds__tabText"); - this.tabElement.appendChild(this.textElement); } connectedCallback() { - this.#createNewIconElement.classList.add("base__icon"); - this.#createNewIconElement.size = "small"; - this.#createNewIconElement.type = "plus"; - if (typeof this.selected === "undefined") { - // this.selected = false; - this.tabElement.setAttribute("aria-selected", "false"); - } - if (typeof this.type === "undefined") this.type = "tabWhite"; + this.#tabElement.classList.add("spds__tab"); + this.#tabElement.setAttribute("role", "tab"); + this.#tabElement.setAttribute("aria-tabindex", "0"); + this.#textElement.classList.add("spds__tabText"); + + this.#plusIconElement.classList.add("base__icon"); + this.#plusIconElement.size = "small"; + this.#plusIconElement.type = "plus"; this.setAttribute("role", "tablist"); - this.shadowRoot.appendChild(this.tabElement); + this.shadowRoot!.appendChild(this.#tabElement); } attributeChangedCallback(name: string, oldValue: string, newValue: string) { if (oldValue === newValue) return; @@ -113,24 +97,12 @@ export class SpTab extends HTMLElement { case "type": this.type = newValue as TabType; break; - case "create-new-icon": - this.createNewIcon = newValue === "true" || newValue === ""; + case "plus-icon": + this.plusIcon = newValue === "true" || newValue === ""; break; } } - #onSelectedAdd() { - this.tabElement.classList.add("-selected"); - this.tabElement.setAttribute("aria-selected", "true"); - } - #onSelectedRemove() { - this.tabElement.classList.remove("-selected"); - this.tabElement.setAttribute("aria-selected", "false"); - } - - #tabDisabledUpdate() { - this.tabElement.disabled = this.disabled; - } } customElements.get("sp-tab") || customElements.define("sp-tab", SpTab); diff --git a/src/components/tab/tab.css b/src/components/tab/tab.css index c4f35b0..7c4ac63 100644 --- a/src/components/tab/tab.css +++ b/src/components/tab/tab.css @@ -1,6 +1,4 @@ :host { - --padding-inline: 16px; - display: inline-block; min-width: 0; max-width: 100%; @@ -17,80 +15,54 @@ background: none; display: inline-flex; min-width: 80px; - padding: 2px 16px; + padding-block: 2px; + padding-inline: 16px; justify-content: center; align-items: center; color: var(--color-semantic-text-regular); font-size:14px; - border-radius: 14px; + border-radius: 1rem; min-height: 28px; - - &:hover{ - cursor:pointer; - } - - &:disabled{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - } - - &.-selected{ - border: 1px solid var(--color-semantic-border-selected); - background-color: var(--color-semantic-surface-selected); - color: var(--color-semantic-text-inverse); - font-weight: bold; + column-gap: 4px; &:hover{ - border: 1px solid var(--color-semantic-surface-selected-hover); - background-color: var(--color-semantic-surface-selected-hover); + cursor:pointer; } - - &:disabled{ + &.-fillGray{ border: 1px solid var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - font-weight: normal; - } - } - - &.-gray{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - &:hover{ - background-color: var(--color-semantic-surface-regular-4); - } - - &.-selected { - border: 1px solid var(--color-semantic-border-selected); - background-color: var(--color-semantic-surface-selected); - color: var(--color-semantic-text-inverse); + &:hover{ + background-color: var(--color-semantic-surface-regular-4); + } - &:hover { - border: 1px solid var(--color-semantic-surface-selected-hover); - background-color: var(--color-semantic-surface-selected-hover); + &.-selected { + border-color: var(--color-semantic-border-selected); + background-color: var(--color-semantic-surface-selected); + color: var(--color-semantic-text-inverse); + + &:hover { + border-color: var(--color-semantic-surface-selected-hover); + background-color: var(--color-semantic-surface-selected-hover); + } + + &:disabled{ + border-color: var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-2); + color: var(--color-semantic-text-disabled); + cursor: not-allowed; + } } &:disabled{ - border: 1px solid var(--color-semantic-border-regular); + border-color: var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; } } - &:disabled{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - } - } - - &.-white{ + &.-fillWhite{ border: 1px solid var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-1); @@ -99,25 +71,24 @@ } &.-selected { - border: 1px solid var(--color-semantic-border-selected); + border-color: var(--color-semantic-border-selected); background-color: var(--color-semantic-surface-selected); color: var(--color-semantic-text-inverse); - &:hover { - border: 1px solid var(--color-semantic-surface-selected-hover); - background-color: var(--color-semantic-surface-selected-hover); - } - - &:disabled{ - border: 1px solid var(--color-semantic-border-regular); - background-color: var(--color-semantic-surface-regular-2); - color: var(--color-semantic-text-disabled); - cursor: not-allowed; - } + &:hover { + border-color: var(--color-semantic-surface-selected-hover); + background-color: var(--color-semantic-surface-selected-hover); } + &:disabled{ + border-color: var(--color-semantic-border-regular); + background-color: var(--color-semantic-surface-regular-2); + color: var(--color-semantic-text-disabled); + cursor: not-allowed; + } + } &:disabled{ - border: 1px solid var(--color-semantic-border-regular); + border-color: var(--color-semantic-border-regular); background-color: var(--color-semantic-surface-regular-2); color: var(--color-semantic-text-disabled); cursor: not-allowed; diff --git a/stories/tab/sp-tab.story.ts b/stories/tab/sp-tab.story.ts index 36da4e2..73ae60c 100644 --- a/stories/tab/sp-tab.story.ts +++ b/stories/tab/sp-tab.story.ts @@ -10,9 +10,9 @@ const meta: Meta = { text: { type: "string" }, type: { control: { type: "select" }, - options: ["tabWhite", "tabGray"], + options: ["fillWhite", "fillGray"], }, - createNewIcon: { type: "boolean" }, + plusIcon: { type: "boolean" }, selected: { type: "boolean" }, disabled: { type: "boolean" }, onclick: { @@ -21,8 +21,8 @@ const meta: Meta = { }, args: { text: "sp-tab", - type: "tabGray", - createNewIcon: false, + type: "fillGray", + plusIcon: false, selected: false, disabled: false, onclick: action("onclick"), @@ -34,32 +34,32 @@ type Story = StoryObj; export const Basic: Story = { args: { - type: undefined, - createNewIcon: undefined, + type: "fillGray", + plusIcon: undefined, selected: undefined, disabled: undefined, }, }; export const typeGray: Story = { args: { - type: "tabGray", - createNewIcon: undefined, + type: "fillGray", + plusIcon: undefined, selected: undefined, disabled: undefined, }, }; export const typeWhite: Story = { args: { - type: "tabWhite", - createNewIcon: undefined, + type: "fillWhite", + plusIcon: undefined, selected: undefined, disabled: undefined, }, }; -export const createNewIcon: Story = { +export const plusIcon: Story = { args: { type: undefined, - createNewIcon: true, + plusIcon: true, selected: undefined, disabled: undefined, }, @@ -71,21 +71,21 @@ export const list: Story = { @@ -100,8 +100,8 @@ export const All: Story = {
@@ -112,8 +112,8 @@ export const All: Story = {
@@ -125,7 +125,7 @@ export const All: Story = { @@ -138,21 +138,21 @@ export const All: Story = { diff --git a/tsconfig.json b/tsconfig.json index 1dc7660..0f2c585 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,11 +9,10 @@ "experimentalDecorators": true, "useDefineForClassFields": false, "outDir": "dist", - "skipLibCheck": true, "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "exclude": ["example", "dist"] + "exclude": ["dist"] }