Skip to content

Commit

Permalink
chore(other): use logical properties with beta components
Browse files Browse the repository at this point in the history 
✅ Closes: COMUI-3096
  • Loading branch information
@321gillian
321gillian committed Oct 9, 2024
1 parent e410f81 commit c4d2c07
Show file tree
Hide file tree
Showing 18 changed files with 185 additions and 159 deletions.
3 changes: 2 additions & 1 deletion packages/genesys-spark-components/.stylelintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
{
"files": [
"src/components/stable/gux-button/**/*.{scss,html}",
"src/components/stable/gux-button-slot/**/*.{scss,html}"
"src/components/stable/gux-button-slot/**/*.{scss,html}",
"src/components/beta/**/*.scss"
],
"plugins": ["stylelint-use-logical-spec"],
"rules": {
Expand Down
12 changes: 6 additions & 6 deletions ...nents/src/components/beta/gux-avatar/gux-avatar-change-photo/gux-avatar-change-photo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@

.gux-change-photo-icon {
position: absolute;
top: 50%;
left: 50%;
inset-block-start: 50%;
inset-inline-start: 50%;
z-index: var(--gse-semantic-zIndex-showFocus);
display: inline-block;
color: var(--gse-ui-avatar-hoverModal-foregroundColor);
Expand All @@ -30,10 +30,10 @@

&::after {
position: absolute;
top: var(--gse-ui-avatar-large-presenceRing-width);
left: var(--gse-ui-avatar-large-presenceRing-width);
width: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
height: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
inset-block-start: var(--gse-ui-avatar-large-presenceRing-width);
inset-inline-start: var(--gse-ui-avatar-large-presenceRing-width);
inline-size: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
block-size: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
content: '';
background-color: var(--gse-ui-avatar-hoverModal-shroudColor);
border: var(--gse-ui-avatar-content-large-border-width)
Expand Down
84 changes: 52 additions & 32 deletions packages/genesys-spark-components/src/components/beta/gux-avatar/gux-avatar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@
}

::slotted(img) {
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}

.gux-avatar {
position: relative;
width: var(--gse-ui-avatar-large-size);
height: var(--gse-ui-avatar-large-size);
inline-size: var(--gse-ui-avatar-large-size);
block-size: var(--gse-ui-avatar-large-size);
overflow: hidden;
border-radius: 50%;

Expand All @@ -27,8 +27,8 @@
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - var(--gse-ui-avatar-large-presenceRing-width) * 2);
height: calc(100% - var(--gse-ui-avatar-large-presenceRing-width) * 2);
inline-size: calc(100% - var(--gse-ui-avatar-large-presenceRing-width) * 2);
block-size: calc(100% - var(--gse-ui-avatar-large-presenceRing-width) * 2);
margin: var(--gse-ui-avatar-large-presenceRing-width);
overflow: hidden;
font-family: var(--gse-ui-avatar-large-initials-fontFamily);
Expand All @@ -45,12 +45,16 @@
}

&.gux-medium {
width: var(--gse-ui-avatar-medium-size);
height: var(--gse-ui-avatar-medium-size);
inline-size: var(--gse-ui-avatar-medium-size);
block-size: var(--gse-ui-avatar-medium-size);

& .gux-content {
width: calc(100% - var(--gse-ui-avatar-medium-presenceRing-width) * 2);
height: calc(100% - var(--gse-ui-avatar-medium-presenceRing-width) * 2);
inline-size: calc(
100% - var(--gse-ui-avatar-medium-presenceRing-width) * 2
);
block-size: calc(
100% - var(--gse-ui-avatar-medium-presenceRing-width) * 2
);
margin: var(--gse-ui-avatar-medium-presenceRing-width);
font-size: var(--gse-ui-avatar-medium-initials-fontSize);
font-weight: var(--gse-ui-avatar-medium-initials-fontWeight);
Expand All @@ -66,25 +70,33 @@
}

&.gux-small {
width: var(--gse-ui-avatar-small-size);
height: var(--gse-ui-avatar-small-size);
inline-size: var(--gse-ui-avatar-small-size);
block-size: var(--gse-ui-avatar-small-size);

& .gux-content {
width: calc(100% - var(--gse-ui-avatar-small-presenceRing-width) * 2);
height: calc(100% - var(--gse-ui-avatar-small-presenceRing-width) * 2);
inline-size: calc(
100% - var(--gse-ui-avatar-small-presenceRing-width) * 2
);
block-size: calc(
100% - var(--gse-ui-avatar-small-presenceRing-width) * 2
);
margin: var(--gse-ui-avatar-small-presenceRing-width);
font-size: var(--gse-ui-avatar-small-initials-fontSize);
font-weight: var(--gse-ui-avatar-small-initials-fontWeight);
}
}

&.gux-xsmall {
width: var(--gse-ui-avatar-xsmall-size);
height: var(--gse-ui-avatar-xsmall-size);
inline-size: var(--gse-ui-avatar-xsmall-size);
block-size: var(--gse-ui-avatar-xsmall-size);

& .gux-content {
width: calc(100% - var(--gse-ui-avatar-xsmall-presenceRing-width) * 2);
height: calc(100% - var(--gse-ui-avatar-xsmall-presenceRing-width) * 2);
inline-size: calc(
100% - var(--gse-ui-avatar-xsmall-presenceRing-width) * 2
);
block-size: calc(
100% - var(--gse-ui-avatar-xsmall-presenceRing-width) * 2
);
margin: var(--gse-ui-avatar-xsmall-presenceRing-width);
font-size: var(--gse-ui-avatar-xsmall-initials-fontSize);
font-weight: var(--gse-ui-avatar-xsmall-initials-fontWeight);
Expand Down Expand Up @@ -225,33 +237,41 @@

.gux-avatar-badge {
position: absolute;
top: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
right: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
inset-block-start: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
inset-inline-end: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
z-index: var(--gse-semantic-zIndex-showFocus);
display: flex;
align-items: center;
justify-content: center;
width: var(--gse-ui-avatar-large-badge-size);
height: var(--gse-ui-avatar-large-badge-size);
inline-size: var(--gse-ui-avatar-large-badge-size);
block-size: var(--gse-ui-avatar-large-badge-size);
border-color: var(--gse-ui-avatar-content-default-border-color);
border-style: var(--gse-ui-avatar-content-default-border-style);
border-width: var(--gse-ui-avatar-content-large-border-width);
border-radius: 50%;

&.gux-medium {
top: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
right: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
width: var(--gse-ui-avatar-medium-badge-size);
height: var(--gse-ui-avatar-medium-badge-size);
inset-block-start: calc(
var(--gse-ui-avatar-content-default-border-width) * -1
);
inset-inline-end: calc(
var(--gse-ui-avatar-content-default-border-width) * -1
);
inline-size: var(--gse-ui-avatar-medium-badge-size);
block-size: var(--gse-ui-avatar-medium-badge-size);
border-width: var(--gse-ui-avatar-content-default-border-width);
}

&.gux-small,
&.gux-xsmall {
top: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
right: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
width: var(--gse-ui-avatar-small-badge-size);
height: var(--gse-ui-avatar-small-badge-size);
inset-block-start: calc(
var(--gse-ui-avatar-content-default-border-width) * -1
);
inset-inline-end: calc(
var(--gse-ui-avatar-content-default-border-width) * -1
);
inline-size: var(--gse-ui-avatar-small-badge-size);
block-size: var(--gse-ui-avatar-small-badge-size);
border-width: var(--gse-ui-avatar-content-default-border-width);

& gux-icon {
Expand Down Expand Up @@ -342,7 +362,7 @@
}

& gux-icon {
width: 100%;
height: 100%;
inline-size: 100%;
block-size: 100%;
}
}
21 changes: 10 additions & 11 deletions ...park-components/src/components/beta/gux-calendar-beta/components/single/gux-calendar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
display: flex;
align-items: center;
justify-content: space-between;
height: var(--gse-ui-calendarMenu-month-single-header-height);
block-size: var(--gse-ui-calendarMenu-month-single-header-height);
padding: var(--gse-ui-calendarMenu-header-padding);
font-style: normal;
font-weight: var(--gse-ui-calendarMenu-month-currentText-fontWeight);
Expand All @@ -26,7 +26,7 @@
border-radius: var(--gse-ui-calendarMenu-single-header-borderRadius);

.gux-header-month-and-year {
width: var(--gse-ui-calendarMenu-month-single-header-textWidth);
inline-size: var(--gse-ui-calendarMenu-month-single-header-textWidth);
font-family: var(--gse-ui-calendarMenu-month-headerText-fontFamily);
font-size: var(--gse-ui-calendarMenu-month-headerText-fontSize);
line-height: var(--gse-ui-calendarMenu-month-headerText-lineHeight);
Expand All @@ -47,16 +47,15 @@
}

gux-icon {
width: 16px;
height: 16px;
inline-size: 16px;
block-size: 16px;
}
}
}

.gux-week-days {
padding-top: 24px;
padding-right: 24px;
padding-left: 24px;
padding-block-start: 24px;
padding-inline: 24px;
font-family: var(--gse-ui-calendarMenu-day-headerText-fontFamily);
font-size: var(--gse-ui-calendarMenu-day-headerText-fontSize);
font-weight: var(--gse-ui-calendarMenu-day-headerText-fontWeight);
Expand All @@ -65,8 +64,8 @@

.gux-week-day {
display: inline-block;
width: var(--gse-ui-calendarMenu-day-date-size);
height: 16px;
inline-size: var(--gse-ui-calendarMenu-day-date-size);
block-size: 16px;
}
}

Expand All @@ -80,8 +79,8 @@
.gux-content-week {
.gux-content-date {
display: inline-block;
width: var(--gse-ui-calendarMenu-day-date-size);
height: var(--gse-ui-calendarMenu-day-input-height);
inline-size: var(--gse-ui-calendarMenu-day-date-size);
block-size: var(--gse-ui-calendarMenu-day-input-height);
font-family: var(--gse-ui-calendarMenu-date-currentText-fontFamily);
font-size: var(--gse-ui-calendarMenu-date-defaultText-fontSize);
font-style: normal;
Expand Down
2 changes: 1 addition & 1 deletion packages/genesys-spark-components/src/components/beta/gux-cta-group/gux-cta-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@

::slotted(gux-button) {
flex: 0 1 auto;
min-width: 0;
min-inline-size: 0;
}
}
4 changes: 2 additions & 2 deletions packages/genesys-spark-components/src/components/beta/gux-flag-icon/gux-flag-icon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@

:host {
display: inline-block;
width: fit-content;
height: fit-content;
inline-size: fit-content;
block-size: fit-content;
line-height: 0;
vertical-align: bottom;
transform: scale(calc(2 / 3));
Expand Down
28 changes: 14 additions & 14 deletions ...enesys-spark-components/src/components/beta/gux-form/gux-form-footer/gux-form-footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: var(
margin-block-start: var(
--gse-semantic-forms-formBody-paddingBottom,
var(--gse-semantic-formControl-formBody-paddingBottom)
);
border-top: var(--gse-ui-formFooter-separator-width)
border-block-start: var(--gse-ui-formFooter-separator-width)
var(--gse-ui-formFooter-separator-style)
var(--gse-ui-formFooter-separator-color);
}
}

:host(.gux-form-footer-page-desktop) ::slotted(footer) {
gap: var(--gse-ui-formFooter-page-desktop-gap);
padding: var(--gse-ui-formFooter-page-desktop-topPadding)
var(--gse-ui-formFooter-page-desktop-horizontalPadding)
var(--gse-ui-formFooter-page-desktop-bottomPadding)
padding-block: var(--gse-ui-formFooter-page-desktop-topPadding)
var(--gse-ui-formFooter-page-desktop-bottomPadding);
padding-inline: var(--gse-ui-formFooter-page-desktop-horizontalPadding)
var(--gse-ui-formFooter-page-desktop-horizontalPadding);
}

Expand All @@ -26,25 +26,25 @@
gap: var(--gse-ui-formFooter-page-mobile-gap);
align-items: stretch;
justify-content: center;
padding: var(--gse-ui-formFooter-page-mobile-topPadding)
var(--gse-ui-formFooter-page-mobile-horizontalPadding)
var(--gse-ui-formFooter-page-mobile-bottomPadding)
padding-block: var(--gse-ui-formFooter-page-mobile-topPadding)
var(--gse-ui-formFooter-page-mobile-bottomPadding);
padding-inline: var(--gse-ui-formFooter-page-mobile-horizontalPadding)
var(--gse-ui-formFooter-page-mobile-horizontalPadding);
}

:host(.gux-form-footer-side-sheet-desktop) ::slotted(footer) {
gap: var(--gse-ui-formFooter-sideSheet-desktop-gap);
padding: var(--gse-ui-formFooter-sideSheet-desktop-topPadding)
var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding)
var(--gse-ui-formFooter-sideSheet-desktop-bottomPadding)
padding-block: var(--gse-ui-formFooter-sideSheet-desktop-topPadding)
var(--gse-ui-formFooter-sideSheet-desktop-bottomPadding);
padding-inline: var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding)
var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding);
}

:host(.gux-form-footer-modal-desktop) ::slotted(footer) {
gap: var(--gse-ui-formFooter-sideSheet-desktop-gap);
justify-content: flex-end;
padding: var(--gse-ui-formFooter-modal-desktop-topPadding)
var(--gse-ui-formFooter-modal-desktop-horizontalPadding)
var(--gse-ui-formFooter-modal-desktop-bottomPadding)
padding-block: var(--gse-ui-formFooter-modal-desktop-topPadding)
var(--gse-ui-formFooter-modal-desktop-bottomPadding);
padding-inline: var(--gse-ui-formFooter-modal-desktop-horizontalPadding)
var(--gse-ui-formFooter-modal-desktop-horizontalPadding);
}
Loading

0 comments on commit c4d2c07

Please sign in to comment.