Skip to content

Commit

Permalink
feat: make Tabs support RTL
Browse files Browse the repository at this point in the history
  • Loading branch information
@lazd
lazd committed Feb 25, 2020
1 parent b41132e commit e39628a
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 36 deletions.
66 changes: 34 additions & 32 deletions components/tabs/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ governing permissions and limitations under the License.
z-index: 0;

margin: 0;
padding: 0 var(--spectrum-tabs-focus-ring-padding-x);
padding-block: 0;
padding-inline: var(--spectrum-tabs-focus-ring-padding-x);

/* Friends should align to the top of the tabs */
vertical-align: top;
Expand All @@ -37,7 +38,7 @@ governing permissions and limitations under the License.

box-sizing: border-box;

height: var(--spectrum-tabs-item-height);
block-size: var(--spectrum-tabs-item-height);
line-height: var(--spectrum-tabs-item-height);

/* Float above the tab line */
Expand All @@ -60,26 +61,26 @@ governing permissions and limitations under the License.

.spectrum-Icon {
/* Vertical centering */
height: var(--spectrum-tabs-item-height);
block-size: var(--spectrum-tabs-item-height);

& + .spectrum-Tabs-itemLabel {
/* icons are inexplicably offset by 3px. Subtract this value from the icon-gap
to correct the gap in CSS */
margin-left: calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40));
margin-inline-start: calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40));
}
}

&::before {
content: '';
position: absolute;
top: 50%;
inset-block-start: 50%;

box-sizing: border-box;

height: var(--spectrum-tabs-focus-ring-height);
margin-top: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2) + calc(var(--spectrum-tabs-rule-height) / 2));
left: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x));
right: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x));
block-size: var(--spectrum-tabs-focus-ring-height);
margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2) + calc(var(--spectrum-tabs-rule-height) / 2));
inset-inline-start: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x));
inset-inline-end: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x));
border: var(--spectrum-tabs-focus-ring-size) solid transparent;
border-radius: var(--spectrum-tabs-focus-ring-border-radius);

Expand All @@ -103,7 +104,7 @@ governing permissions and limitations under the License.

.spectrum-Tabs-selectionIndicator {
position: absolute;
left: 0;
inset-inline-start: 0;

/* Be below the tab */
z-index: 0;
Expand All @@ -116,43 +117,43 @@ governing permissions and limitations under the License.

.spectrum-Tabs--compact {
.spectrum-Tabs-item {
height: var(--spectrum-tabs-compact-item-height);
block-size: var(--spectrum-tabs-compact-item-height);
line-height: var(--spectrum-tabs-compact-item-height);

.spectrum-Icon {
/* Vertical centering */
height: var(--spectrum-tabs-compact-item-height);
block-size: var(--spectrum-tabs-compact-item-height);
}
}
}

.spectrum-Tabs--horizontal {
align-items: center;

border-bottom: var(--spectrum-tabs-rule-height) solid;
border-block-end: var(--spectrum-tabs-rule-height) solid;

.spectrum-Tabs-item {
vertical-align: top;

/* Target anything since React likes to add lots of happy <div>s around all things */
& + *:not(.spectrum-Tabs-selectionIndicator) {
margin-left: var(--spectrum-tabs-item-gap);
margin-inline-start: var(--spectrum-tabs-item-gap);
}
}

.spectrum-Tabs-selectionIndicator {
position: absolute;
bottom: 0;
height: var(--spectrum-tabs-rule-height);
inset-block-end: 0;
block-size: var(--spectrum-tabs-rule-height);

bottom: calc(-1 * var(--spectrum-tabs-rule-height));
inset-block-end: calc(-1 * var(--spectrum-tabs-rule-height));
}


&.spectrum-Tabs--compact {
/* The ActionButton is taller than the tabs, so don't push tabs around */
box-sizing: content-box;
height: var(--spectrum-tabs-compact-item-height);
block-size: var(--spectrum-tabs-compact-item-height);
align-items: end;
}
}
Expand All @@ -166,41 +167,42 @@ governing permissions and limitations under the License.
display: inline-flex;
flex-direction: column;
padding: 0;
border-left: var(--spectrum-tabs-vertical-rule-width) solid;
border-inline-start: var(--spectrum-tabs-vertical-rule-width) solid;

.spectrum-Tabs-item {
height: var(--spectrum-tabs-vertical-item-height);
padding: 0 var(--spectrum-tabs-focus-ring-padding-x);
block-size: var(--spectrum-tabs-vertical-item-height);
padding-block: 0;
padding-inline: var(--spectrum-tabs-focus-ring-padding-x);
/* Subtract focus ring padding from margin-left since the padding value already offsets tabs-items */
margin-left: calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x));
margin-bottom: var(--spectrum-tabs-vertical-item-gap);
margin-inline-start: calc(var(--spectrum-tabs-vertical-item-margin-left) - var(--spectrum-tabs-focus-ring-padding-x));
margin-block-end: var(--spectrum-tabs-vertical-item-gap);

&::before {
/* padding is included in click area of tab items, so only need to offset by the size of the focus ring's border */
left: calc(-1 * var(--spectrum-tabs-focus-ring-size));
right: calc(-1 * var(--spectrum-tabs-focus-ring-size));
margin-top: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2));
inset-inline-start: calc(-1 * var(--spectrum-tabs-focus-ring-size));
inset-inline-end: calc(-1 * var(--spectrum-tabs-focus-ring-size));
margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2));
}
}

&.spectrum-Tabs--compact {
.spectrum-Tabs-item {
height: var(--spectrum-tabs-compact-vertical-item-height);
block-size: var(--spectrum-tabs-compact-vertical-item-height);
line-height: var(--spectrum-tabs-compact-vertical-item-height);
margin-bottom: var(--spectrum-tabs-compact-vertical-item-gap);
margin-block-end: var(--spectrum-tabs-compact-vertical-item-gap);

.spectrum-Icon {
/* Vertical centering */
height: var(--spectrum-tabs-compact-vertical-item-height);
block-size: var(--spectrum-tabs-compact-vertical-item-height);
}
}
}

.spectrum-Tabs-selectionIndicator {
position: absolute;
left: 0px;
width: var(--spectrum-tabs-vertical-rule-width);
inset-inline-start: 0px;
inline-size: var(--spectrum-tabs-vertical-rule-width);

left: calc(-1 * var(--spectrum-tabs-vertical-rule-width));
inset-inline-start: calc(-1 * var(--spectrum-tabs-vertical-rule-width));
}
}
8 changes: 4 additions & 4 deletions components/tabs/skin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ governing permissions and limitations under the License.
*/

.spectrum-Tabs {
border-bottom-color: var(--spectrum-tabs-rule-color);
border-block-end-color: var(--spectrum-tabs-rule-color);
}

.spectrum-Tabs--vertical {
border-left-color: var(--spectrum-tabs-vertical-rule-color);
border-inline-start-color: var(--spectrum-tabs-vertical-rule-color);
}

.spectrum-Tabs-selectionIndicator {
Expand Down Expand Up @@ -67,7 +67,7 @@ governing permissions and limitations under the License.
}

.spectrum-Tabs--quiet {
border-bottom-color: var(--spectrum-tabs-quiet-rule-color);
border-block-end-color: var(--spectrum-tabs-quiet-rule-color);

.spectrum-Tabs-selectionIndicator {
background-color: var(--spectrum-tabs-quiet-selection-indicator-color);
Expand All @@ -77,7 +77,7 @@ governing permissions and limitations under the License.
.spectrum-Tabs--vertical {
&.spectrum-Tabs--quiet,
&.spectrum-Tabs--compact {
border-left-color: var(--spectrum-tabs-quiet-vertical-rule-color);
border-inline-start-color: var(--spectrum-tabs-quiet-vertical-rule-color);

.spectrum-Tabs-selectionIndicator {
background-color: var(--spectrum-tabs-quiet-selection-indicator-color);
Expand Down

0 comments on commit e39628a

Please sign in to comment.