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.

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: introduce button form support #3170

Merged
merged 27 commits into from
Oct 31, 2024
Merged
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
9d4729e
feat: button form support
jeripeierSBB Oct 22, 2024
8bb52bb
Merge branch 'main' into button-form-support
jeripeierSBB Oct 23, 2024
c097f8b
test: test the logic
jeripeierSBB Oct 23, 2024
de6fbf8
docs: stories
jeripeierSBB Oct 23, 2024
5735895
fix: adapt styles
jeripeierSBB Oct 23, 2024
d97d15e
test: temp deactivate disabled interactive test
jeripeierSBB Oct 23, 2024
f759070
fix: integrity
jeripeierSBB Oct 23, 2024
192ec66
test: fix SSR support
jeripeierSBB Oct 24, 2024
3fe62bb
fix: remove disabled-interactive artifact
jeripeierSBB Oct 24, 2024
6af6992
Merge branch 'main' into button-form-support
jeripeierSBB Oct 24, 2024
dfc5a61
fix: cleanup stories
jeripeierSBB Oct 24, 2024
31a2824
fix: fix styling
jeripeierSBB Oct 24, 2024
58133b9
fix: migrate dialog handling
jeripeierSBB Oct 24, 2024
939b1b3
Merge branch 'main' into button-form-support
jeripeierSBB Oct 24, 2024
e37d4c9
refactor: remove todo
jeripeierSBB Oct 24, 2024
d81ba0a
fix: blur event
jeripeierSBB Oct 24, 2024
191ced0
refactor: decouple disabledInteractive from disabled property
jeripeierSBB Oct 24, 2024
cc21a1b
Merge branch 'main' into button-form-support
jeripeierSBB Oct 24, 2024
a8cf6b0
docs: update docs
jeripeierSBB Oct 24, 2024
2256d41
build: override generic in base mixin during docs generation
DavideMininni-Fincons Oct 25, 2024
7a4c0c7
fix: review
jeripeierSBB Oct 28, 2024
86cd882
Merge branch 'main' into button-form-support
jeripeierSBB Oct 28, 2024
5f35c23
build: minor fix on custom-elements-manifest.config.js
DavideMininni-Fincons Oct 28, 2024
6e8e0f8
Merge branch 'main' into button-form-support
jeripeierSBB Oct 29, 2024
aae1d45
fix: review
jeripeierSBB Oct 29, 2024
986baa5
Merge branch 'main' into button-form-support
jeripeierSBB Oct 30, 2024
353993b
fix: review
jeripeierSBB Oct 30, 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
Prev Previous commit
fix: review
  • Loading branch information
jeripeierSBB committed Oct 30, 2024
commit 353993b337e1916cf131fc8ab3df7453eafc255b
29 changes: 6 additions & 23 deletions src/elements/core/styles/mixins/buttons.scss
Original file line number Diff line number Diff line change
@@ -3,6 +3,9 @@
@use '../core/functions';
@use './typo';

$disabled: '[disabled], :disabled, [disabled-interactive], [data-disabled], [data-group-disabled]';
$active: ':active, [data-active]';

// ----------------------------------------------------------------------------------------------------
// Buttons Mixins
// ----------------------------------------------------------------------------------------------------
@@ -29,9 +32,7 @@
@include icon-button-variables-negative;
}

:host(
:is([disabled], :disabled, [disabled-interactive], [data-disabled], [data-group-disabled])
) {
:host(:is(#{$disabled})) {
@include icon-button-disabled(#{$button-selector});
}

@@ -44,29 +45,11 @@
@include icon-button-focus-visible(#{$button-selector});
}

:host(
:not(
[disabled],
:disabled,
[disabled-interactive],
[data-disabled],
[data-group-disabled],
:active,
[data-active]
):hover
) {
:host(:not(#{$disabled}, #{$active}):hover) {
@include icon-button-hover(#{$button-selector});
}

:host(
:not(
[disabled],
:disabled,
[disabled-interactive],
[data-disabled],
[data-group-disabled]
):is(:active, [data-active])
) {
:host(:not(#{$disabled}):is(#{$active})) {
@include icon-button-active(#{$button-selector});
}
}
8 changes: 5 additions & 3 deletions src/elements/link/common/link.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@use '../../core/styles' as sbb;

$disabled: '[disabled], :disabled, [disabled-interactive]';

// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
@include sbb.box-sizing;

@@ -26,7 +28,7 @@
outline: none;
}

:host(:is([disabled], :disabled, [disabled-interactive])) & {
:host(:is(#{$disabled})) & {
pointer-events: none;
cursor: default;

@@ -45,11 +47,11 @@
border-radius: calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset));
}

:host(:hover:not([disabled], :disabled, [disabled-interactive])) & {
:host(:hover:not(#{$disabled})) & {
@include sbb.link-hover-rules;
}

:host(:is(:active, [data-active]):not([disabled], :disabled, [disabled-interactive])) & {
:host(:is(:active, [data-active]):not(#{$disabled})) & {
// Active definitions have to be after :hover definitions
@include sbb.link-active-rules;
}
8 changes: 5 additions & 3 deletions src/elements/menu/common/menu-action.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@use '../../core/styles' as sbb;

$disabled: '[disabled], :disabled, [disabled-interactive]';

// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
@include sbb.box-sizing;

@@ -18,14 +20,14 @@
display: block;
}

:host(:hover:not([disabled], :disabled, [disabled-interactive])) {
:host(:hover:not(#{$disabled})) {
@include sbb.hover-mq($hover: true) {
--sbb-menu-background-color: var(--sbb-color-iron);
--sbb-menu-action-forced-color-border-color: Highlight;
}
}

:host(:is([disabled], :disabled, [disabled-interactive])) {
:host(:is(#{$disabled})) {
--sbb-menu-action-cursor: default;
--sbb-menu-action-color: var(--sbb-color-graphite);
--sbb-menu-action-forced-color-border-color: GrayText;
@@ -90,7 +92,7 @@
.sbb-menu-action__label {
@include sbb.ellipsis;

:host(:is([disabled], :disabled, [disabled-interactive])) & {
:host(:is(#{$disabled})) & {
text-decoration: line-through;
}
}
17 changes: 10 additions & 7 deletions src/elements/popover/popover-trigger/popover-trigger.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
@use '../../core/styles' as sbb;

$disabled: ':disabled, [disabled-interactive]';
$active: ':active, [data-active]';

// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
@include sbb.box-sizing;

@@ -31,15 +34,15 @@
--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
}

:host(:is(:active, [data-active])) {
:host(:is(#{$active})) {
--sbb-popover-color: var(--sbb-color-anthracite);
}

:host(:is(:active, [data-active])[negative]) {
:host(:is(#{$active})[negative]) {
--sbb-popover-color: var(--sbb-color-cement);
}

:host(:is(:disabled, [disabled-interactive])) {
:host(:is(#{$disabled})) {
pointer-events: none;

--sbb-popover-color: var(--sbb-color-graphite);
@@ -49,7 +52,7 @@
}
}

:host(:is(:disabled, [disabled-interactive])[negative]) {
:host(:is(#{$disabled})[negative]) {
--sbb-popover-color: var(--sbb-color-smoke);
}

@@ -59,7 +62,7 @@
@include sbb.icon-button-variables-negative;
}

:host([data-icon-small]:is(:disabled, [disabled-interactive])) {
:host([data-icon-small]:is(#{$disabled})) {
@include sbb.icon-button-disabled('.sbb-popover-trigger');
}

@@ -69,11 +72,11 @@
@include sbb.icon-button-focus-visible('.sbb-popover-trigger');
}

:host([data-icon-small]:not(:disabled, [disabled-interactive], :active, [data-active]):hover) {
:host([data-icon-small]:not(#{$disabled}, #{active}):hover) {
@include sbb.icon-button-hover('.sbb-popover-trigger');
}

:host([data-icon-small]:is(:active, [data-active])) {
:host([data-icon-small]:is(#{active})) {
@include sbb.icon-button-active('.sbb-popover-trigger');
}

13 changes: 8 additions & 5 deletions src/elements/tag/tag/tag.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
@use '../../core/styles' as sbb;

$disabled: ':disabled, [disabled-interactive]';
$active: ':active, [data-active]';

// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
@include sbb.box-sizing;

@@ -48,7 +51,7 @@
}
}

:host(:is(:disabled, [disabled-interactive])) {
:host(:is(#{$disabled})) {
--sbb-tag-text-color: var(--sbb-color-granite);
--sbb-tag-amount-color: var(--sbb-tag-text-color);
--sbb-tag-background-color: var(--sbb-color-milk);
@@ -62,11 +65,11 @@
}
}

:host([checked]:is(:disabled, [disabled-interactive])) {
:host([checked]:is(#{$disabled})) {
--sbb-tag-border-color: var(--sbb-color-metal);
}

:host(:hover:not(:disabled, [disabled-interactive], :active, [data-active])) {
:host(:hover:not(#{$disabled}, #{$active})) {
@include sbb.hover-mq($hover: true) {
--sbb-tag-background-color: var(--sbb-color-milk);
--sbb-tag-inset: calc(var(--sbb-border-width-2x) * -1);
@@ -79,7 +82,7 @@
}

// Pressed state
:host(:is(:active, [data-active]):not(:disabled, [disabled-interactive])) {
:host(:is(#{$active}):not(#{$disabled})) {
--sbb-tag-background-color: var(--sbb-color-milk);
--sbb-tag-border-color: var(--sbb-color-iron);
--sbb-tag-border-width: var(--sbb-border-width-2x);
@@ -130,7 +133,7 @@
}
}

:host(:disabled, [disabled-interactive]) & {
:host(#{$disabled}) & {
cursor: unset;
pointer-events: none;
}
Loading