Skip to content

Commit

Permalink
#2193 Convert common-canvas scss files to use Carbon spacing tokens (#…
Browse files Browse the repository at this point in the history 
…2102)

Signed-off-by: Prince Sanchez <[email protected]>
  • Loading branch information
@PRINCESANCHEZ
PRINCESANCHEZ authored Oct 5, 2024
1 parent 196215b commit 4a50b51
Show file tree
Hide file tree
Showing 26 changed files with 119 additions and 121 deletions.
6 changes: 3 additions & 3 deletions canvas_modules/common-canvas/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,9 +147,9 @@
},
"overrides": {
"@wojtekmaj/enzyme-adapter-react-17": {
"react": "^18",
"react-dom": "^18"
},
"react": "^18",
"react-dom": "^18"
},
"enzyme": {
"cheerio": "1.0.0-rc.12"
}
Expand Down
20 changes: 10 additions & 10 deletions canvas_modules/common-canvas/src/common-canvas/common-canvas.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ $panel-border-color: $border-subtle-01;
.bottom-panel-drag {
border-top: $panel-border-color;
cursor: row-resize;
flex: 0 0 2px;
flex: 0 0 $spacing-01;
border-top-width: 1px;
background: $layer-01;
transition: all 0.2s ease-in;
Expand Down Expand Up @@ -109,7 +109,7 @@ $panel-border-color: $border-subtle-01;
.toolbar-overflow-item {
button:focus {
border-color: transparent;
box-shadow: inset 2px 2px $focus, inset -6px -2px $focus;
box-shadow: inset $spacing-01 $spacing-01 $focus, inset -6px -2px $focus;
}
}
}
Expand All @@ -128,7 +128,7 @@ $panel-border-color: $border-subtle-01;
// cursor is immediately moved away from the toolbar, after it opens. That's because,
// when the toolbar opens, the border will be underneath the mouse cursor and so the
// mouseLeave event is fired when the cursor is moved away.
border-bottom: 4px solid transparent;
border-bottom: $spacing-02 solid transparent;

.toolbar-div {
// Position the div 'relative' to text-toolbar so we can animate its
Expand Down Expand Up @@ -248,7 +248,7 @@ $panel-border-color: $border-subtle-01;
margin-right: 7px;
}
& span {
padding-bottom: 2px;
padding-bottom: $spacing-01;
}
}
}
Expand Down Expand Up @@ -277,7 +277,7 @@ $panel-border-color: $border-subtle-01;
bottom: 30px;
border-color: $border-strong-01;
border-style: dashed;
border-width: 2px;
border-width: $spacing-01;
}

.toolbar-item.notificationCounterIcon {
Expand All @@ -297,26 +297,26 @@ $panel-border-color: $border-subtle-01;

.state-tag {
@include type-style("productive-heading-01");
display: flex;
align-items: center;
color: $text-inverse;
background-color: $background-inverse;
width: fit-content;
height: 40px;
height: $spacing-08;
position: absolute; /* Positioned relative to the common-canvas-drop-div */
left: 50%;
top: 16px;
top: $spacing-05;
transform: translate(-50%, 0%);
border-radius: 20px;
padding: 9px 0;
user-select: none; /* Prevent elements from being selectable */

svg {
color: $text-inverse;
position: relative;
top: 3px;
margin-left: 14px;
}

span {
margin: 0 16px 0 10px;
margin: 0 $spacing-05 0 10px;
}
}
28 changes: 14 additions & 14 deletions canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ $node-warning-color: $support-warning; // Warning yellow
$node-label-color: $text-primary;
$node-label-font-size: 12px;
$node-label-font-weight: 600;
$node-label-display-border: 2px;
$node-label-display-border: $spacing-01;
$node-label-entry-border: 6px;
$node-label-edit-icon-hover-color: $layer-accent-01;

Expand Down Expand Up @@ -85,8 +85,8 @@ $comment-text-color: $text-primary;
$comment-text-font-size: 12px;
$comment-text-font-weight: 500;
$comment-text-line-height: 1.2;
$comment-text-display-border: 8px;
$comment-text-entry-border: $comment-text-display-border - 2px; // Remove 2px to allow for focus border
$comment-text-display-border: $spacing-03;
$comment-text-entry-border: $comment-text-display-border - $spacing-01; // Remove 2px to allow for focus border

// Link colors
$comment-link-color: $border-strong-01;
Expand Down Expand Up @@ -128,7 +128,7 @@ $link-highlight-color: $support-info;
// Supress the default focus highlighting with non-carbon color and round corners.
outline: none;
// Add our own focus highlighting with our own color and square corners
box-shadow: 0 0 0 2px $focus;
box-shadow: 0 0 0 $spacing-01 $focus;
}

.d3-foreign-object-text-entry:focus,
Expand Down Expand Up @@ -292,7 +292,7 @@ $link-highlight-color: $support-info;
.d3-node-group.d3-branch-highlight {
.d3-node-body-outline {
stroke: $layer-selected-inverse;
stroke-width: 2px;
stroke-width: $spacing-01;
fill: $highlight;
}

Expand All @@ -304,7 +304,7 @@ $link-highlight-color: $support-info;
.d3-node-group.d3-branch-highlight:hover {
.d3-node-body-outline {
stroke: $layer-selected-inverse;
stroke-width: 2px;
stroke-width: $spacing-01;
fill: $button-primary-hover;
}
}
Expand Down Expand Up @@ -758,7 +758,7 @@ g.bkg-col-cyan-50 {
max-width: 100%;
}
blockquote {
padding: 0 12px;
padding: 0 $spacing-04;
border-left: 3px solid $layer-accent-01;
line-height: 8px;
}
Expand All @@ -767,17 +767,17 @@ g.bkg-col-cyan-50 {
font-weight: $comment-text-font-weight;
line-height: $comment-text-line-height;
background-color: $layer-accent-01;
border-radius: 4px;
border-radius: $spacing-02;
white-space: pre-wrap;
}
pre {
font-size: $comment-text-font-size;
font-weight: $comment-text-font-weight;
line-height: $comment-text-line-height;
background-color: $layer-02;
padding: 4px;
padding: $spacing-02;
border: 1px solid $layer-accent-01;
border-radius: 4px;
border-radius: $spacing-02;
white-space: pre-wrap;
code {
background-color: $layer-02;
Expand All @@ -801,18 +801,18 @@ g.bkg-col-cyan-50 {
background-color: $layer-accent-01;
text-align: left;
tr th {
padding: 8px;
border-bottom: 2px solid $layer-accent-01;
padding: $spacing-03;
border-bottom: $spacing-01 solid $layer-accent-01;
}
}
tbody {
@include type-style("body-short-01");
font-size: 12px;
tr {
border-bottom: 2px solid $layer-accent-01;
border-bottom: $spacing-01 solid $layer-accent-01;
background-color: $layer-02;
td {
padding: 8px;
padding: $spacing-03;
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions canvas_modules/common-canvas/src/common-properties/components/control-item/control-item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@
.properties-label-container, .properties-summary-link-container, .properties-checkbox-tooltip-container, .properties-radioset-panel {
.tooltip-container {
display: flex;
width: 16px;
height: 16px;
width: $spacing-05;
height: $spacing-05;
margin-left: $spacing-03;
cursor: pointer;
}
Expand Down
4 changes: 2 additions & 2 deletions canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,8 @@ $primary-tab-height: $spacing-08;
}
}
svg {
width: 16px;
height: 16px;
width: $spacing-05;
height: $spacing-05;
margin-right: $spacing-03;
}
}
Expand Down
2 changes: 1 addition & 1 deletion canvas_modules/common-canvas/src/common-properties/components/title-editor/title-editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@

// warning and invalid icons should be aligned with close icon. And input field should stretch full width
.properties-title-editor-with-warning, .properties-title-editor-with-error {
width: calc(100% - 2px); // subtract 2px for input active right border
width: calc(100% - #{$spacing-01}); // subtract 2px for input active right border
}

// Close icon without heading
Expand Down
4 changes: 2 additions & 2 deletions ...s/common-canvas/src/common-properties/components/virtualized-table/virtualized-table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,10 +202,10 @@
padding-left: 3px;
}
.properties-vt-row-selected {
border-left: 4px solid $button-primary;
border-left: $spacing-02 solid $button-primary;
padding-left: 0;
&:not(.properties-vt-row-disabled):hover {
border-left: 4px solid $button-primary;
border-left: $spacing-02 solid $button-primary;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion canvas_modules/common-canvas/src/common-properties/components/wide-flyout/wide-flyout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/

$properties-wf-title-height: 41px;
$properties-modal-buttons-height: 64px;
$properties-modal-buttons-height: $spacing-10;

.properties-wf-overlay {
position: fixed;
Expand Down
6 changes: 3 additions & 3 deletions canvas_modules/common-canvas/src/common-properties/controls/dropdown/dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,20 @@
width: inherit; // Override carbon default width: auto
background-color: transparent; // Override carbon default background-color: #f4f4f4;
padding: 0 1.25rem 0 0;
box-shadow: 0 2px 0 0 $button-primary;
box-shadow: 0 $spacing-01 0 0 $button-primary;
&:focus {
outline: unset;
}

}
&.error {
.cds--select-input {
box-shadow: 0 2px 0 0 $support-error;
box-shadow: 0 $spacing-01 0 0 $support-error;
}
}
&.warning {
.cds--select-input {
box-shadow: 0 2px 0 0 $support-warning;
box-shadow: 0 $spacing-01 0 0 $support-warning;
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions ...nvas/src/common-properties/controls/expression/expression-builder/expression-builder.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,8 @@ $operator-margin: 50%;
}

.properties-operator-title {
padding-top: 1rem;
padding-bottom: 2rem;
padding-top: $spacing-05;
padding-bottom: $spacing-07;
width: 100%;
font-weight: bold;
text-align: center;
Expand Down
6 changes: 3 additions & 3 deletions canvas_modules/common-canvas/src/common-properties/controls/numberfield/numberfield.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,18 +44,18 @@
}
&.error {
input[type="number"]:not([disabled]), input[type="number"]:focus:not([disabled]) {
box-shadow: 0 2px 0 0 $support-error;
box-shadow: 0 $spacing-01 0 0 $support-error;
}
}
&.warning {
input[type="number"]:not([disabled]), input[type="number"]:focus:not([disabled]) {
box-shadow: 0 2px 0 0 $support-warning;
box-shadow: 0 $spacing-01 0 0 $support-warning;
}
}
input[type="number"] { //override styling from carbon
background-color: unset;
padding: 0;
height: 1.5rem;
height: $spacing-06;
}
.cds--number input[type="number"] {
min-width: 0;
Expand Down
4 changes: 2 additions & 2 deletions canvas_modules/common-canvas/src/common-properties/controls/readonly/readonly.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@
flex-shrink: 0; // prevent icon from shrinking if text too long

svg {
width: 16px;
height: 16px;
width: $spacing-05;
height: $spacing-05;
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions canvas_modules/common-canvas/src/common-properties/controls/slider/slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
outline-offset: unset;
}
input[type="number"]:not([disabled]) {
border: 2px solid $support-error;
border: $spacing-01 solid $support-error;
}
}
&.warning {
Expand All @@ -41,7 +41,7 @@
outline-offset: unset;
}
input[type="number"]:not([disabled]) {
border: 2px solid $support-warning;
border: $spacing-01 solid $support-warning;
}
}

Expand Down
2 changes: 1 addition & 1 deletion canvas_modules/common-canvas/src/common-properties/controls/someofselect/someofselect.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,6 @@
}
}
.properties-vt-row-checkbox {
margin-right: 1rem;
margin-right: $spacing-05;
}
}
6 changes: 3 additions & 3 deletions canvas_modules/common-canvas/src/common-properties/controls/textfield/textfield.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,17 @@ $textinput-bottom-padding: 5px;
}
&.error {
input:not([disabled]) {
box-shadow: 0 2px 0 0 $support-error;
box-shadow: 0 $spacing-01 0 0 $support-error;
}
}
&.warning {
input:not([disabled]) {
box-shadow: 0 2px 0 0 $support-warning;
box-shadow: 0 $spacing-01 0 0 $support-warning;
}
}
}
input:disabled:hover {
box-shadow: 0 2px 0 0 $text-secondary;
box-shadow: 0 $spacing-01 0 0 $text-secondary;
}

// Readonly control for error handling in table cells
Expand Down
4 changes: 2 additions & 2 deletions canvas_modules/common-canvas/src/common-properties/controls/toggletext/toggletext.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@
}
&.error {
button {
border-bottom: 2px solid $support-error;
border-bottom: $spacing-01 solid $support-error;
}
}
&.warning {
button {
border-bottom: 2px solid $support-warning;
border-bottom: $spacing-01 solid $support-warning;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion canvas_modules/common-canvas/src/common-properties/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
@import "./properties-main/properties-main";

.properties-error-heading .properties-validation-message {
padding: 40px 10px 0;
padding: $spacing-08 10px 0;
align-items: left;
-webkit-box-align: left;
display: flex;
Expand Down
6 changes: 3 additions & 3 deletions canvas_modules/common-canvas/src/common-properties/panels/sub-panel/sub-panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@

button.properties-subpanel-button {
padding: 0; // override carbon
min-height: 2rem; // override carbon
height: 2rem;
width: 2rem;
min-height: $spacing-07; // override carbon
height: $spacing-07;
width: $spacing-07;
display: flex;
align-items: center;
}
Expand Down
Loading

0 comments on commit 4a50b51

Please sign in to comment.