Skip to content

Commit

Permalink
wip tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@hazuki-okuda-UB
hazuki-okuda-UB committed Nov 14, 2024
1 parent a287d95 commit 45ce335
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 165 deletions.
116 changes: 44 additions & 72 deletions src/components/tab/sp-tab.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down
107 changes: 39 additions & 68 deletions src/components/tab/tab.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
:host {
--padding-inline: 16px;

display: inline-block;
min-width: 0;
max-width: 100%;
Expand All @@ -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);

Expand All @@ -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;
Expand Down
Loading

0 comments on commit 45ce335

Please sign in to comment.