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

MOON-459: Add Spacing pico and update some spacings components #468

Merged
merged 5 commits into from
Dec 13, 2024
+36 −36
Merged

MOON-459: Add Spacing pico and update some spacings components #468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d27abe6
MOON-459: Add global spacing pico & replace spacing nano with $spacin…
Eevolee Dec 12, 2024
d71de40
MOON-459: replace spacing nano with spacing-icon on dropdown & add ma…
Eevolee Dec 12, 2024
72c060f
MOON-459: Fix lint
Eevolee Dec 12, 2024
7b1dcf4
Merge branch 'develop' into MOON-459
Eevolee Dec 12, 2024
37d14f2
MOON-459: Add spacing-icon_big to requiring components
Eevolee Dec 13, 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
4 changes: 3 additions & 1 deletion src/components/Accordion/AccordionItem/AccordionItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "../../../tokens/spacings/spacings" as *;

$accordionHeader_height: 48px;

.moonstone-accordionItem {
Expand Down Expand Up @@ -82,7 +84,7 @@ $accordionHeader_height: 48px;
}

.moonstone-accordionItem_iconContainer {
margin-right: var(--spacing-small);
margin-right: $spacing-icon_big;
}

// ---
Expand Down
5 changes: 3 additions & 2 deletions src/components/Button/Button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use "variants/default";
@use "variants/ghost";
@use "variants/outlined";
@use "../../tokens/spacings/spacings" as *;

$button-size_small: 16px;
$button-size_medium: 24px;
Expand Down Expand Up @@ -73,10 +74,10 @@ $button-size_big: 32px;
}

&.moonstone-icon {
gap: var(--spacing-nano);
gap: $spacing-icon;

&.moonstone-size_big {
gap: var(--spacing-small);
gap: $spacing-icon_big;
}
}

Expand Down
4 changes: 3 additions & 1 deletion src/components/Chip/Chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "../../tokens/spacings/spacings" as *;

.moonstone-chip {
display: inline-flex;
flex-direction: row;
Expand All @@ -13,7 +15,7 @@
}

& > svg:not(:last-child) {
margin-right: 6px;
margin-right: $spacing-icon;
}
}

Expand Down
4 changes: 3 additions & 1 deletion src/components/Collapsible/Collapsible.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "../../tokens/spacings/spacings" as *;

.moonstone-collapsible {
position: relative;

Expand Down Expand Up @@ -43,7 +45,7 @@

// Chevron icon animation
.moonstone-collapsible_icon {
margin-right: var(--spacing-nano);
margin-right: $spacing-icon_big;

transform: rotate(0);

Expand Down
5 changes: 4 additions & 1 deletion src/components/Dropdown/Dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use '../../utils/index' as *;
@use "../../tokens/spacings/spacings" as *;

$border-width: 1px;

Expand All @@ -9,11 +10,11 @@ $border-width: 1px;
.moonstone-dropdown_icon {
display: flex;
flex: 0 0 auto;
margin-right: var(--spacing-nano);
}

.moonstone-dropdown_chevronDown {
flex: 0 0 auto;
margin-left: var(--spacing-nano);
}

.moonstone-dropdown_tags {
Expand All @@ -33,6 +34,7 @@ $border-width: 1px;
}

.moonstone-dropdown {
gap: $spacing-icon;
padding: var(--spacing-nano) var(--spacing-small);

border-radius: 2px;
Expand All @@ -52,6 +54,7 @@ $border-width: 1px;
// Manage sizes
// ---
&.moonstone-medium {
gap: $spacing-icon_big;
min-height: 32px;
}

Expand Down
11 changes: 3 additions & 8 deletions src/components/IconTextIcon/IconTextIcon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
@use "../../tokens/spacings/spacings" as *;

.moonstone-IconTextIcon {
Copy link
Collaborator

Choose a reason for hiding this comment

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

I am wondering if we should use we should use a $spacing-icon_big spacing/gap when we set iconSize to big

Copy link
Contributor Author

Choose a reason for hiding this comment

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

When icons of iconTextIcon are set to size big there is no extra className added to the component, since the spacing is directly assigned as a gap on .moonstone-IconTextIcon I don't have an efficient way of changing it.

gap: $spacing-icon;
width: 100%;
}

.moonstone-IconTextIcon_iconStart {
margin-right: var(--spacing-nano);
}

.moonstone-IconTextIcon_iconEnd {
margin-left: var(--spacing-nano);
}
12 changes: 3 additions & 9 deletions src/components/ListItem/ListItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
@use '../../utils/index' as *;
@use "../../tokens/spacings/spacings" as *;

$small-image-size: 56px;
$big-image-size: 96px;

.moonstone-listItem {
@include truncate;

gap: $spacing-icon;

width: 100%;

list-style: none;
Expand Down Expand Up @@ -33,18 +36,9 @@ $big-image-size: 96px;
.moonstone-listItem_iconEnd {
display: flex;
align-items: center;
min-width: 16px;
ffffffelix marked this conversation as resolved.
Show resolved Hide resolved
height: 16px;
}

.moonstone-listItem_iconStart {
margin-right: var(--spacing-nano);
}

.moonstone-listItem_iconEnd {
margin-left: var(--spacing-nano);
}

.moonstone-listItem_description {
display: -webkit-box;

Expand Down
9 changes: 5 additions & 4 deletions src/components/Tab/TabItem/TabItem.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use 'variants/ghost' as *;
@use "../../../tokens/spacings/spacings" as *;

$big-tab-height: 32px;

Expand Down Expand Up @@ -42,21 +43,21 @@ $big-tab-height: 32px;
border-radius: 40px;

&.moonstone-size_small {
padding: var(--spacing-nano);
padding: $spacing-icon;
}

&.moonstone-size_default {
padding: var(--spacing-nano);
padding: $spacing-icon;
}
}

&.moonstone-icon {
svg {
margin-right: var(--spacing-nano);
margin-right: $spacing-icon;
}

&.moonstone-size_big svg {
margin-right: var(--spacing-small);
margin-right: $spacing-icon_big;
}
}

Expand Down
13 changes: 4 additions & 9 deletions src/components/TreeView/TreeView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "../../tokens/spacings/spacings" as *;

[role='treeitem'] {
--treeItem-indent: calc((var(--spacing-medium) + var(--spacing-nano)) * var(--treeItem-depth, 0) + var(--spacing-medium));
--treeItem-color: inherit;
Expand Down Expand Up @@ -71,28 +73,21 @@
}
}

.moonstone-treeView_itemIconStart,
.moonstone-treeView_itemToggle {
margin-right: var(--spacing-nano);
}

.moonstone-treeView_itemIconStart {
min-width: 12px;
min-height: 12px;
}

.moonstone-treeView_itemIconEnd {
margin-left: var(--spacing-nano);
}

.moonstone-treeView_itemToggle {
width: 16px;
height: 16px;
margin-right: var(--spacing-nano);

cursor: pointer;
}

.moonstone-treeView_itemLabel {
gap: $spacing-icon;
align-self: stretch;
min-width: 0;

Expand Down
4 changes: 4 additions & 0 deletions src/tokens/spacings/spacings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
$spacing-icon: var(--spacing-pico);
$spacing-icon_big: var(--spacing-nano);

:root {
--spacing-pico: 2px;
--spacing-nano: 4px;
--spacing-small: 8px;
--spacing-medium: 16px;
Expand Down
1 change: 1 addition & 0 deletions src/tokens/spacings/spacings.stories.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
$spacings: (
"pico": var(--spacing-pico),
"nano": var(--spacing-nano),
"small": var(--spacing-small),
"medium": var(--spacing-medium),
Expand Down
Loading