Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tabs): EU styles - FRONT-4451 #3449

Merged
merged 7 commits into from
Jul 12, 2024
Merged

feat(tabs): EU styles - FRONT-4451 #3449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d7dccc2
feat(tabs): EU styles - FRONT-4451
planctus Jun 24, 2024
16d1e98
feat(tabs): Delaying calculations, style tweaks - FRONT-4451
planctus Jun 24, 2024
1346f36
Merge branch 'v4-dev' into FRONT-4451-EU-tabs
planctus Jun 24, 2024
c1dfe8f
Merge branch 'v4-dev' into FRONT-4451-EU-tabs
planctus Jun 24, 2024
68005e3
Merge branch 'v4-dev' into FRONT-4451-EU-tabs
planctus Jul 3, 2024
0454b2f
feat(tabs): Feedback - FRONt-4451
planctus Jul 3, 2024
3e444f7
Merge branch 'v4-dev' into FRONT-4451-EU-tabs
planctus Jul 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 87 additions & 84 deletions src/implementations/vanilla/components/tabs/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export class Tabs {
this.lastTab = null;
this.direction = 'ltr';
this.isMobile = false;
this.resizeTimer = null;

// Bind `this` for use in callbacks
this.handleClickOnToggle = this.handleClickOnToggle.bind(this);
Expand Down Expand Up @@ -253,7 +254,7 @@ export class Tabs {
this.index = dir === 'next' ? this.index + 1 : this.index - 1;
// Show or hide prev or next button based on tab index
if (this.index >= 1) {
this.btnPrev.style.display = 'block';
this.btnPrev.style.display = 'flex';
this.container.classList.add('ecl-tabs__container--left');
} else {
this.btnPrev.style.display = 'none';
Expand All @@ -264,7 +265,7 @@ export class Tabs {
this.btnNext.style.display = 'none';
this.container.classList.remove('ecl-tabs__container--right');
} else {
this.btnNext.style.display = 'block';
this.btnNext.style.display = 'flex';
this.container.classList.add('ecl-tabs__container--right');
}

Expand Down Expand Up @@ -338,97 +339,99 @@ export class Tabs {
if (window.getComputedStyle(this.moreButton).display === 'none') {
this.closeMoreDropdown(this);
}
clearTimeout(this.resizeTimer);
this.resizeTimer = setTimeout(() => {
this.list.style.transform = `translate3d(0px, 0px, 0px)`;

// Behaviors for mobile format
const vw = Math.max(
document.documentElement.clientWidth || 0,
window.innerWidth || 0,
);

this.list.style.transform = `translate3d(0px, 0px, 0px)`;

// Behaviors for mobile format
const vw = Math.max(
document.documentElement.clientWidth || 0,
window.innerWidth || 0,
);

if (vw <= 480) {
this.isMobile = true;
this.index = 1;
this.list.style.transitionDuration = '0.4s';
this.shiftTabs(this.index);
if (this.moreItem) {
this.moreItem.classList.add('ecl-tabs__item--hidden');
}
if (this.moreButton) {
this.moreButton.classList.add('ecl-tabs__toggle--hidden');
if (vw <= 480) {
this.isMobile = true;
this.index = 1;
this.list.style.transitionDuration = '0.4s';
this.shiftTabs(this.index);
if (this.moreItem) {
this.moreItem.classList.add('ecl-tabs__item--hidden');
}
if (this.moreButton) {
this.moreButton.classList.add('ecl-tabs__toggle--hidden');
}
let listWidth = 0;
this.listItems.forEach((item) => {
item.classList.remove('ecl-tabs__item--hidden');
listWidth += Math.ceil(item.getBoundingClientRect().width);
});
this.list.style.width = `${listWidth}px`;
this.btnNext.style.display = 'flex';
this.container.classList.add('ecl-tabs__container--right');
this.btnPrev.style.display = 'none';
this.container.classList.remove('ecl-tabs__container--left');
this.tabsKeyEvents();
return;
}
let listWidth = 0;
this.listItems.forEach((item) => {
item.classList.remove('ecl-tabs__item--hidden');
listWidth += Math.ceil(item.getBoundingClientRect().width);
});
this.list.style.width = `${listWidth}px`;
this.btnNext.style.display = 'block';
this.container.classList.add('ecl-tabs__container--right');

this.isMobile = false;
// Behaviors for Tablet and desktop format (More button)
this.btnNext.style.display = 'none';
this.container.classList.remove('ecl-tabs__container--right');
this.btnPrev.style.display = 'none';
this.container.classList.remove('ecl-tabs__container--left');
this.tabsKeyEvents();
return;
}
this.list.style.width = 'auto';

// Hide items that won't fit in the list
let stopWidth = this.moreButton.getBoundingClientRect().width + 25;
const hiddenItems = [];
const listWidth = this.list.getBoundingClientRect().width;
this.moreButtonActive = false;
this.listItems.forEach((item, i) => {
item.classList.remove('ecl-tabs__item--hidden');
if (
listWidth >= stopWidth + item.getBoundingClientRect().width &&
!hiddenItems.includes(i - 1)
) {
stopWidth += item.getBoundingClientRect().width;
} else {
item.classList.add('ecl-tabs__item--hidden');
if (item.childNodes[0].classList.contains('ecl-tabs__link--active')) {
this.moreButtonActive = true;
}
hiddenItems.push(i);
}
});

this.isMobile = false;
// Behaviors for Tablet and desktop format (More button)
this.btnNext.style.display = 'none';
this.container.classList.remove('ecl-tabs__container--right');
this.btnPrev.style.display = 'none';
this.container.classList.remove('ecl-tabs__container--left');
this.list.style.width = 'auto';

// Hide items that won't fit in the list
let stopWidth = this.moreButton.getBoundingClientRect().width + 25;
const hiddenItems = [];
const listWidth = this.list.getBoundingClientRect().width;
this.moreButtonActive = false;
this.listItems.forEach((item, i) => {
item.classList.remove('ecl-tabs__item--hidden');
if (
listWidth >= stopWidth + item.getBoundingClientRect().width &&
!hiddenItems.includes(i - 1)
) {
stopWidth += item.getBoundingClientRect().width;
// Add active class to the more button if it contains an active element
if (this.moreButtonActive) {
this.moreButton.classList.add('ecl-tabs__toggle--active');
} else {
item.classList.add('ecl-tabs__item--hidden');
if (item.childNodes[0].classList.contains('ecl-tabs__link--active')) {
this.moreButtonActive = true;
}
hiddenItems.push(i);
this.moreButton.classList.remove('ecl-tabs__toggle--active');
}
});

// Add active class to the more button if it contains an active element
if (this.moreButtonActive) {
this.moreButton.classList.add('ecl-tabs__toggle--active');
} else {
this.moreButton.classList.remove('ecl-tabs__toggle--active');
}

// Toggle the visibility of More button and items in dropdown
if (!hiddenItems.length) {
this.moreItem.classList.add('ecl-tabs__item--hidden');
this.moreButton.classList.add('ecl-tabs__toggle--hidden');
} else {
this.moreItem.classList.remove('ecl-tabs__item--hidden');
this.moreButton.classList.remove('ecl-tabs__toggle--hidden');
this.moreLabel.textContent = this.moreLabelValue.replace(
'%d',
hiddenItems.length,
);
this.dropdownItems.forEach((item, i) => {
if (!hiddenItems.includes(i)) {
item.classList.add('ecl-tabs__item--hidden');
} else {
item.classList.remove('ecl-tabs__item--hidden');
}
});
}
// Toggle the visibility of More button and items in dropdown
if (!hiddenItems.length) {
this.moreItem.classList.add('ecl-tabs__item--hidden');
this.moreButton.classList.add('ecl-tabs__toggle--hidden');
} else {
this.moreItem.classList.remove('ecl-tabs__item--hidden');
this.moreButton.classList.remove('ecl-tabs__toggle--hidden');
this.moreLabel.textContent = this.moreLabelValue.replace(
'%d',
hiddenItems.length,
);
this.dropdownItems.forEach((item, i) => {
if (!hiddenItems.includes(i)) {
item.classList.add('ecl-tabs__item--hidden');
} else {
item.classList.remove('ecl-tabs__item--hidden');
}
});
}

this.tabsKeyEvents();
this.tabsKeyEvents();
}, 100);
}

/**
Expand Down
43 changes: 37 additions & 6 deletions src/implementations/vanilla/components/tabs/tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ $tabs: null !default;
$button-width: 44px;

.ecl-tabs {
margin: 0 0 var(--s-xl);
margin: 0 0 map.get($tabs, 'margin-bottom');
padding: 0;
position: relative;
z-index: map.get($theme, 'z-index', 'dropdown');
Expand All @@ -36,11 +36,16 @@ $button-width: 44px;
margin: 0;
padding-inline-start: 0;
transition-duration: 0.4s;

.ecl-tabs[data-ecl-auto-initialized] & {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think that this rule will be applied, as there is no .ecl-tabs children of .ecl-tabs
Also targeting auto-initialized data would exclude user doing the initialization on their side. If this is to delay the css after javascript init, better add a css class from the js

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'm confused, this selector is nested in the .ecl-tabs-list selector, so this results in:
.ecl-tabs[data-ecl-auto-initialized] .ecl-tabs-list and it is correctly applied.

the data-ecl-auto-initialized attribute might sound confusing, but we do this in all of our classes in the init() method, so it's not only limited to implmentations using the autoInit.
this.element.setAttribute('data-ecl-auto-initialized', 'true');

flex-wrap: nowrap;
}
}

.ecl-tabs__container--left {
margin-inline-start: $button-width;

/* stylelint-disable-next-line no-descending-specificity */
.ecl-tabs__list {
margin-left: -$button-width;
}
Expand All @@ -50,14 +55,22 @@ $button-width: 44px;
margin-inline-end: $button-width;
}

.ecl-tabs__item {
flex-shrink: 0;
margin-inline-end: map.get($tabs, 'item', 'margin-end');

&:last-child {
margin-inline-end: 0;
}
}

.ecl-tabs__link {
background-color: map.get($theme, 'color', 'white');
border-bottom: map.get($tabs, 'separator-width') solid
map.get($tabs, 'separator-color');
border-radius: map.get($tabs, 'item', 'border-radius');
color: map.get($tabs, 'item', 'color');
display: block;
font: var(--f-m);
font: map.get($tabs, 'item', 'font');
margin-bottom: -#{map.get($tabs, 'separator-width')};
padding: map.get($tabs, 'item', 'padding');
text-decoration: none;
Expand All @@ -78,6 +91,7 @@ $button-width: 44px;
}

.ecl-tabs__link--active {
background-color: map.get($tabs, 'active', 'background');
border-bottom: map.get($tabs, 'separator-width') solid
map.get($tabs, 'active', 'separator-color');
border-inline-start: map.get($tabs, 'active', 'border-width') solid
Expand All @@ -90,6 +104,11 @@ $button-width: 44px;
font-weight: map.get($theme, 'font-weight', 'bold');
padding-top: map.get($tabs, 'active', 'padding-top');

&:hover {
border-bottom: map.get($tabs, 'separator-width') solid
map.get($tabs, 'active', 'separator-color');
}

&:visited {
color: map.get($tabs, 'active', 'color');
}
Expand All @@ -107,10 +126,9 @@ $button-width: 44px;

.ecl-tabs__toggle {
font-weight: map.get($tabs, 'more', 'font-weight');
margin-bottom: calc(-#{map.get($tabs, 'separator-width')} - 2px);
position: absolute;
right: 0;
top: 0;
bottom: 0;

&:hover {
box-shadow: none;
Expand Down Expand Up @@ -182,7 +200,8 @@ $button-width: 44px;
}
}

.ecl-tabs__link--active {
.ecl-tabs__link--active,
.ecl-tabs__link:active {
background-color: map.get($tabs, 'dropdown', 'item-active-background');
color: map.get($tabs, 'dropdown', 'item-active-color');
font-weight: map.get($theme, 'font-weight', 'regular');
Expand Down Expand Up @@ -212,9 +231,21 @@ $button-width: 44px;

.ecl-tabs__prev,
.ecl-tabs__next {
align-items: center;
background: map.get($theme, 'color', 'white');
position: absolute;
top: 0;
height: $button-width;

.ecl-button__container {
height: 100%;
width: 100%;
}

.ecl-icon {
height: 1rem;
width: 1rem;
}

&:focus-visible {
background: map.get($theme, 'color', 'white');
Expand Down
4 changes: 4 additions & 0 deletions src/themes/ec/variables/_tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,22 @@
@use '../index' as *;

$tabs: (
margin-bottom: var(--s-xl),
separator-width: 2px,
separator-color: var(--c-n-60),
item: (
border-radius: 0,
color: var(--c-d),
font: var(--f-m),
margin-end: 0,
padding: var(--s-xs) var(--s-m),
),
hover: (
color: var(--c-d),
separator-color: var(--c-d-80),
),
active: (
background: transparent,
separator-color: var(--c-p),
border-width: 0,
highlight-width: 0,
Expand Down
Loading
Loading