Skip to content

Commit

Permalink
Enhance MasSurfacePicker with dropdown functionality and update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Axelcureno
Axelcureno committed Dec 5, 2024
1 parent 4e4c356 commit fb7ae82
Show file tree
Hide file tree
Showing 5 changed files with 450 additions and 268 deletions.
439 changes: 226 additions & 213 deletions studio/libs/swc.js
View file

Large diffs are not rendered by default.

231 changes: 190 additions & 41 deletions studio/src/mas-surface-picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,82 +4,231 @@ export class MasSurfacePicker extends LitElement {
static properties = {
value: { type: String },
options: { type: Array },
open: { type: Boolean },
label: { type: String },
};

constructor() {
super();
this.value = 'adobedotcom'; // Default selected value
this.options = [
{ value: 'adobedotcom', label: 'Adobe.com' },
{ value: 'ccd', label: 'Creative Cloud Desktop' },
{ value: 'home', label: 'Adobe Home' },
];
this.value = this.options[0].value;
this.label = this.options[0].label;
this.open = false;
}

static styles = css`
:host {
display: block;
position: relative;
width: 200px;
}
sp-picker {
.picker-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 4px 12px;
border-radius: 4px;
background-color: transparent;
cursor: pointer;
box-sizing: border-box;
}
.picker-button:hover {
border-color: var(--spectrum-global-color-gray-500, #6e6e6e);
}
.button-content {
display: flex;
align-items: center;
gap: 8px;
flex-grow: 1;
min-width: 0;
}
.button-content span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.chevron {
width: 16px;
height: 16px;
color: var(--spectrum-alias-text-color, #000);
flex-shrink: 0;
}
/* Hide icons in the dropdown menu items */
sp-menu::part(options) sp-menu-item::part(icon) {
display: none;
sp-popover {
position: absolute;
z-index: 1;
width: 100%;
margin-top: 4px;
box-sizing: border-box;
background-color: transparent;
border: none;
}
sp-menu {
width: 100%;
max-height: none;
overflow: visible;
background-color: var(--spectrum-white, #fff);
}
sp-menu-item[selected] {
font-weight: bold;
}
sp-menu-item[selected] {
font-weight: bold;
&::after {
display: none;
}
}
`;

handleChange(event) {
this.value = event.target.value;
this.dispatchEvent(
new CustomEvent('picker-change', {
detail: { value: this.value },
bubbles: true,
composed: true,
})
);
firstUpdated() {
const spMenu = this.shadowRoot.querySelector('sp-menu');
if (spMenu) {
spMenu.addEventListener('change', this.handleSelection.bind(this));
}
}

updated(changedProperties) {
if (changedProperties.has('open') && this.open) {
const spMenu = this.shadowRoot.querySelector('sp-menu');
if (spMenu) {
spMenu.addEventListener(
'change',
this.handleSelection.bind(this),
);
}
}
}

toggleDropdown() {
this.open = !this.open;
}

closeDropdown() {
this.open = false;
}

handleSelection(event) {
console.log('handleSelection called', event);
const selectedItem = event.target.selectedItem;
if (selectedItem) {
this.value = selectedItem.value;
const selectedOption = this.options.find(
(option) => option.value === this.value
);
this.label = selectedOption ? selectedOption.label : '';
this.closeDropdown();

this.dispatchEvent(
new CustomEvent('picker-change', {
detail: { value: this.value, label: this.label },
bubbles: true,
composed: true,
})
);
}
}

render() {
return html`
<sp-picker
icons
quiet
@change=${this.handleChange}
value=${this.value}
<div
class="picker-button"
@click=${this.toggleDropdown}
role="button"
aria-haspopup="true"
aria-expanded=${this.open ? 'true' : 'false'}
tabindex="0"
@keydown=${this.handleKeyDown}
>
<!-- Menu items with icons -->
${this.options.map(
(option) => html`
<sp-menu-item value=${option.value}>
<svg
slot="icon"
class="icon"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 30 26"
aria-label="${option.label}"
>
<path
fill="#292929"
d="M19 0h11v26zM11.1 0H0v26zM15 9.6L22.1 26h-4.6l-2.1-5.2h-5.2z"
></path>
</svg>
${option.label}
</sp-menu-item>
`
)}
</sp-picker>
<span class="button-content">
<!-- SVG Icon -->
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 30 26"
width="18px"
xml:space="preserve"
role="img"
aria-label="Adobe"
>
<path
fill="#292929"
d="M19 0h11v26zM11.1 0H0v26zM15 9.6L22.1 26h-4.6l-2.1-5.2h-5.2z"
></path>
</svg>
<!-- Selected Label -->
<span class="surface-selection">${this.label}</span>
</span>
<!-- Chevron Icon -->
<sp-icon-chevron-down
dir="ltr"
class="chevron"
></sp-icon-chevron-down>
</div>
${this.open
? html`
<sp-popover
@focusout=${this.handleFocusOut}
placement="bottom-start"
open
>
<sp-menu selects="single" role="listbox">
${this.options.map(
(option) => html`
<sp-menu-item .value=${option.value}>
${option.label}
</sp-menu-item>
`,
)}
</sp-menu>
</sp-popover>
`
: ''}
`;
}

handleFocusOut(event) {
if (!this.contains(event.relatedTarget)) {
this.closeDropdown();
}
}

handleKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.toggleDropdown();
} else if (event.key === 'ArrowDown') {
event.preventDefault();
this.open = true;
this.updateComplete.then(() => {
const firstMenuItem =
this.renderRoot.querySelector('sp-menu-item');
if (firstMenuItem) {
firstMenuItem.focus();
}
});
}
}
}

customElements.define('mas-surface-picker', MasSurfacePicker);
46 changes: 32 additions & 14 deletions studio/src/mas-top-nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,25 @@ class MasTopNav extends LitElement {
#brand {
display: flex;
align-items: end;
width: max-content;
gap: 10px;
color: #eb1000;
text-decoration: none;
}
#logo {
display: flex;
width: 30px;
}
#mas-studio {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: var(--spectrum-global-color-gray-700);
display: flex;
align-self: center;
}
#brand strong {
font-size: 21px;
font-weight: 800;
Expand All @@ -64,22 +78,26 @@ class MasTopNav extends LitElement {
<nav>
<a id="brand" href="#">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 30 26"
width="24px"
xml:space="preserve"
role="img"
id="logo"
aria-label="Adobe"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#FA0F00"
d="M19 0h11v26zM11.1 0H0v26zM15 9.6L22.1 26h-4.6l-2.1-5.2h-5.2z"
></path>
</svg>
<strong>M@S Studio</strong>
d="M19.7512 0.5H4.24878C1.90225 0.5 0 2.3905 0 4.72256V19.2774C0 21.6095 1.90225 23.5 4.24878 23.5H19.7512C22.0978 23.5 24 21.6095 24 19.2774V4.72256C24 2.3905 22.0978 0.5 19.7512 0.5Z"
fill="#EB1000"
/>
<path
d="M18.5391 17.9277H15.7339C15.4735 17.9277 15.2512 17.78 15.1585 17.5591L12.1298 10.5106C12.075 10.3829 11.9287 10.3818 11.8728 10.5073L9.9749 15.2212C9.93024 15.3266 10.0081 15.4431 10.1232 15.4431H12.2093C12.3385 15.4431 12.4552 15.5199 12.5056 15.6381L13.4022 17.4092C13.5073 17.6557 13.3252 17.9277 13.0571 17.9277H5.46234C5.21992 17.9277 5.05342 17.6879 5.14616 17.448L9.9937 6.01659C10.0875 5.77676 10.3289 5.61133 10.607 5.61133H13.3933C13.6715 5.61133 13.9139 5.77676 14.0067 6.01659L18.8542 17.448C18.9469 17.6879 18.7805 17.9277 18.5391 17.9277L18.5391 17.9277Z"
fill="white"
/>
</svg>
<span id="mas-studio">M@S Studio</span>
</a>
<a>
<sp-badge size="s" variant="${this.envIndicator}"
Expand Down
1 change: 1 addition & 0 deletions studio/src/swc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-home.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-campaign.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-graph-bar-vertical.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';
import '@spectrum-web-components/link/sp-link.js';
import '@spectrum-web-components/menu/sp-menu-divider.js';
import '@spectrum-web-components/menu/sp-menu-item.js';
Expand Down
1 change: 1 addition & 0 deletions studio/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ side-nav sp-sidenav-heading {
display: flex;
align-items: center;
padding: 8px 16px;
margin-top: 16px;
}

side-nav sp-sidenav-item {
Expand Down

0 comments on commit fb7ae82

Please sign in to comment.