Skip to content

Commit

Permalink
fix: replacing deprecated tokens from menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@GarthDB
GarthDB committed Aug 11, 2020
1 parent 012f083 commit 6281862
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 57 deletions.
110 changes: 68 additions & 42 deletions components/menu/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,38 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/

@import '../commons/index.css';
@import "../commons/index.css";

:root {
--spectrum-menu-margin-x: var(--spectrum-global-dimension-size-40);
--spectrum-selectlist-heading-text-size: var(--spectrum-global-dimension-font-size-50);
--spectrum-selectlist-heading-text-font-weight: 400;
--spectrum-selectlist-heading-text-transform: uppercase;
--spectrum-selectlist-heading-letter-spacing: 0.06em;
--spectrum-selectlist-heading-margin: var(--spectrum-global-dimension-size-75) 0 0 0;
--spectrum-selectlist-heading-padding: 0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);

--spectrum-selectlist-option-padding-y: var(--spectrum-global-dimension-size-85);
--spectrum-listitem-heading-text-size: var(
--spectrum-global-dimension-font-size-50
);
--spectrum-listitem-heading-text-font-weight: 400;
--spectrum-listitem-heading-text-transform: uppercase;
--spectrum-listitem-heading-letter-spacing: 0.06em;
--spectrum-listitem-heading-margin: var(--spectrum-global-dimension-size-75) 0
0 0;
--spectrum-listitem-heading-padding: 0
var(--spectrum-global-dimension-size-450) 0
var(--spectrum-global-dimension-size-150);

--spectrum-listitem-option-padding-y: var(
--spectrum-global-dimension-size-85
);

--spectrum-selectlist-option-selectable-padding-right: calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-selectlist-option-icon-padding-x));
--spectrum-listitem-option-selectable-padding-right: calc(
var(--spectrum-global-dimension-size-100) +
var(--spectrum-icon-checkmark-medium-width) +
var(--spectrum-listitem-option-icon-padding-x)
);

--spectrum-selectlist-option-icon-margin-top: var(--spectrum-global-dimension-size-50);
--spectrum-listitem-option-icon-margin-top: var(
--spectrum-global-dimension-size-50
);

/* Hardcoded for wrapping study */
--spectrum-selectlist-option-label-line-height: 1.3;
--spectrum-listitem-option-label-line-height: 1.3;
}

.spectrum-Menu {
Expand All @@ -52,10 +65,15 @@ governing permissions and limitations under the License.

&.is-selectable {
.spectrum-Menu-item {
padding-inline-end: var(--spectrum-selectlist-option-selectable-padding-right);
padding-inline-end: var(
--spectrum-listitem-option-selectable-padding-right
);

&.is-selected {
padding-inline-end: calc(var(--spectrum-selectlist-option-padding) - var(--spectrum-popover-border-size));
padding-inline-end: calc(
var(--spectrum-listitem-option-padding) -
var(--spectrum-popover-border-size)
);
}
}
}
Expand All @@ -74,16 +92,23 @@ governing permissions and limitations under the License.

box-sizing: border-box;

padding: var(--spectrum-selectlist-option-padding-y) var(--spectrum-selectlist-option-padding) var(--spectrum-selectlist-option-padding-y) calc(var(--spectrum-selectlist-option-padding) - var(--spectrum-selectlist-border-size-key-focus));
padding: var(--spectrum-listitem-option-padding-y)
var(--spectrum-listitem-option-padding)
var(--spectrum-listitem-option-padding-y)
calc(
var(--spectrum-listitem-option-padding) -
var(--spectrum-listitem-border-size-key-focus)
);

margin: 0;

border-inline-start: var(--spectrum-selectlist-border-size-key-focus) solid transparent;
border-inline-start: var(--spectrum-listitem-border-size-key-focus) solid
transparent;

min-block-size: var(--spectrum-selectlist-option-height);
min-block-size: var(--spectrum-listitem-option-height);

font-size: var(--spectrum-selectlist-option-text-size);
font-weight: var(--spectrum-selectlist-option-text-font-weight);
font-size: var(--spectrum-listitem-option-text-size);
font-weight: var(--spectrum-listitem-option-text-font-weight);
font-style: normal;
text-decoration: none;

Expand All @@ -93,7 +118,10 @@ governing permissions and limitations under the License.

&.is-selected {
/* Redundant, but included for backwards compatibility */
padding-inline-end: calc(var(--spectrum-selectlist-option-padding) - var(--spectrum-popover-border-size));
padding-inline-end: calc(
var(--spectrum-listitem-option-padding) -
var(--spectrum-popover-border-size)
);

.spectrum-Menu-checkmark {
display: block;
Expand All @@ -108,28 +136,26 @@ governing permissions and limitations under the License.
}

.spectrum-Icon + .spectrum-Menu-itemLabel,
.spectrum-Menu-itemIcon + .spectrum-Menu-itemLabel {
margin-inline-start: var(--spectrum-selectlist-thumbnail-image-padding-x);
.spectrum-Menu-itemIcon + .spectrum-Menu-itemLabel {
margin-inline-start: var(--spectrum-listitem-thumbnail-image-padding-x);

inline-size: calc(
100%
- var(--spectrum-icon-checkmark-medium-width)
- var(--spectrum-selectlist-option-icon-padding-x)
- var(--spectrum-selectlist-thumbnail-image-padding-x)
- var(--spectrum-alias-workflow-icon-size)
100% - var(--spectrum-icon-checkmark-medium-width) -
var(--spectrum-listitem-option-icon-padding-x) -
var(--spectrum-listitem-thumbnail-image-padding-x) -
var(--spectrum-alias-workflow-icon-size)
);
}
}

.spectrum-Menu-itemLabel {
flex: 1 1 auto;
line-height: var(--spectrum-selectlist-option-label-line-height);
line-height: var(--spectrum-listitem-option-label-line-height);
hyphens: auto;
overflow-wrap: break-word;
inline-size: calc(
100%
- var(--spectrum-icon-checkmark-medium-width)
- var(--spectrum-selectlist-option-icon-padding-x)
100% - var(--spectrum-icon-checkmark-medium-width) -
var(--spectrum-listitem-option-icon-padding-x)
);
}

Expand All @@ -147,8 +173,8 @@ governing permissions and limitations under the License.
.spectrum-Menu-checkmark,
.spectrum-Menu-chevron {
flex-grow: 0;
margin-inline-start: var(--spectrum-selectlist-option-icon-padding-x);
margin-block-start: var(--spectrum-selectlist-option-icon-margin-top);
margin-inline-start: var(--spectrum-listitem-option-icon-padding-x);
margin-block-start: var(--spectrum-listitem-option-icon-margin-top);
}

.spectrum-Menu-chevron {
Expand All @@ -162,23 +188,23 @@ governing permissions and limitations under the License.
/* Show the overflow for hr in Edge and IE. */
overflow: visible;

block-size: var(--spectrum-selectlist-divider-size);
margin-block: calc(var(--spectrum-selectlist-divider-padding) / 2);
margin-inline: var(--spectrum-selectlist-option-padding);
block-size: var(--spectrum-listitem-divider-size);
margin-block: calc(var(--spectrum-listitem-divider-padding) / 2);
margin-inline: var(--spectrum-listitem-option-padding);
padding: 0;
border: none;
}

.spectrum-Menu-sectionHeading {
display: block;
margin: var(--spectrum-selectlist-heading-margin);
padding: var(--spectrum-selectlist-heading-padding);
margin: var(--spectrum-listitem-heading-margin);
padding: var(--spectrum-listitem-heading-padding);

font-size: var(--spectrum-selectlist-heading-text-size);
font-weight: var(--spectrum-selectlist-heading-text-font-weight);
font-size: var(--spectrum-listitem-heading-text-size);
font-weight: var(--spectrum-listitem-heading-text-font-weight);
line-height: var(--spectrum-text-body-line-height);
text-transform: var(--spectrum-selectlist-heading-text-transform);
letter-spacing: var(--spectrum-selectlist-heading-letter-spacing);
text-transform: var(--spectrum-listitem-heading-text-transform);
letter-spacing: var(--spectrum-listitem-heading-letter-spacing);
}

.spectrum-Menu .spectrum-Menu {
Expand Down
39 changes: 24 additions & 15 deletions components/menu/skin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,54 +10,63 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/

:root {
/* these need to be removed but we don't have a full design spec */
--spectrum-listheading-text-color: var(--spectrum-global-color-gray-700);
}

.spectrum-Menu {
background-color: var(--spectrum-selectlist-background-color);
background-color: var(--spectrum-listitem-background-color);
}

.spectrum-Menu-item {
background-color: var(--spectrum-selectlist-option-background-color);
color: var(--spectrum-selectlist-option-text-color);
background-color: var(--spectrum-listitem-option-background-color);
color: var(--spectrum-listitem-option-text-color);

&:focus-ring,
&.is-focused {
background-color: var(--spectrum-selectlist-option-background-color-key-focus);
color: var(--spectrum-selectlist-option-text-color-key-focus);
border-inline-start-color: var(--spectrum-selectlist-option-focus-indicator-color);
background-color: var(
--spectrum-listitem-option-background-color-key-focus
);
color: var(--spectrum-listitem-option-text-color-key-focus);
border-inline-start-color: var(
--spectrum-listitem-option-focus-indicator-color
);
}

&:hover,
&:focus,
&.is-highlighted,
&.is-open {
background-color: var(--spectrum-selectlist-option-background-color-hover);
color: var(--spectrum-selectlist-option-text-color-hover);
background-color: var(--spectrum-listitem-option-background-color-hover);
color: var(--spectrum-listitem-option-text-color-hover);
}

&.is-selected {
color: var(--spectrum-selectlist-option-text-color-selected);
color: var(--spectrum-listitem-option-text-color-selected);

.spectrum-Menu-checkmark {
color: var(--spectrum-selectlist-option-icon-color-selected);
color: var(--spectrum-listitem-option-icon-color-selected);
}
}

.is-active,
&:active {
background-color: var(--spectrum-selectlist-option-background-color-down);
background-color: var(--spectrum-listitem-option-background-color-down);
}

&.is-disabled {
background-color: var(--spectrum-selectlist-option-background-color-disabled);
background-color: var(--spectrum-listitem-option-background-color-disabled);
background-image: none;
color: var(--spectrum-selectlist-option-text-color-disabled);
color: var(--spectrum-listitem-option-text-color-disabled);
cursor: default;
}
}

.spectrum-Menu-sectionHeading {
color: var(--spectrum-heading-subtitle3-text-color);
color: var(--spectrum-listheading-text-color);
}

.spectrum-Menu-divider {
background-color: var(--spectrum-selectlist-divider-color);
background-color: var(--spectrum-listitem-divider-color);
}

0 comments on commit 6281862

Please sign in to comment.