Skip to content

Commit b19a9b3

Browse files
lazdlazd
committed
fix: update Rule token names, related #425
* this does not close the issue; we had to roll back DNA because of Typography changes
1 parent 869c5b7 commit b19a9b3

File tree

3 files changed

+42
-43
lines changed

3 files changed

+42
-43
lines changed

‎components/rule/index.css‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ governing permissions and limitations under the License.
1313
@import '../commons/index.css';
1414

1515
:root {
16-
--spectrum-rule-vertical-height: 100%;
16+
--spectrum-divider-vertical-height: 100%;
17+
18+
/* Work around DNA misspelling */
19+
--spectrum-divider-small-vertical-width: var(--spectrum-divider-small-vertical-width, var(--spectrum-divider-small-veritcal-width));
1720
}
1821

1922
.spectrum-Rule {
@@ -23,40 +26,40 @@ governing permissions and limitations under the License.
2326
overflow: visible;
2427

2528
border: none;
26-
border-width: var(--spectrum-rule-medium-height);
27-
border-radius: var(--spectrum-rule-medium-height);
29+
border-width: var(--spectrum-divider-medium-height);
30+
border-radius: var(--spectrum-divider-medium-height);
2831
}
2932

3033
.spectrum-Rule--large {
31-
height: var(--spectrum-rule-large-height);
34+
height: var(--spectrum-divider-large-height);
3235

33-
border-radius: var(--spectrum-rule-large-border-radius);
36+
border-radius: var(--spectrum-divider-large-border-radius);
3437
}
3538

3639
.spectrum-Rule--medium {
37-
height: var(--spectrum-rule-medium-height);
40+
height: var(--spectrum-divider-medium-height);
3841

39-
border-radius: var(--spectrum-rule-medium-border-radius);
42+
border-radius: var(--spectrum-divider-medium-border-radius);
4043
}
4144

4245
.spectrum-Rule--small {
43-
height: var(--spectrum-rule-small-height);
46+
height: var(--spectrum-divider-small-height);
4447

45-
border-radius: var(--spectrum-rule-small-border-radius);
48+
border-radius: var(--spectrum-divider-small-border-radius);
4649
}
4750

4851
.spectrum-Rule--vertical {
49-
height: var(--spectrum-rule-vertical-height);
52+
height: var(--spectrum-divider-vertical-height);
5053

5154
&.spectrum-Rule--large {
52-
width: var(--spectrum-rule-large-height);
55+
width: var(--spectrum-divider-large-vertical-width);
5356
}
5457

5558
&.spectrum-Rule--medium {
56-
width: var(--spectrum-rule-medium-height);
59+
width: var(--spectrum-divider-medium-vertical-width);
5760
}
5861

5962
&.spectrum-Rule--small {
60-
width: var(--spectrum-rule-small-height);
63+
width: var(--spectrum-divider-small-vertical-width);
6164
}
6265
}

‎components/rule/metadata/rule.yml‎

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -22,41 +22,36 @@ examples:
2222
<p class="spectrum-Body">Divide like-elements (tables, tool groups, elements within a panel, etc.)</p>
2323
- id: rule-vertical-small
2424
name: 'Vertical, Small'
25+
description: |
26+
When a vertical Rule is used inside of a flex container, use `align-self: stretch; height: auto` on the Rule.
27+
ButtonGroup automatically applies these styles to vertical Rules.
2528
markup: |
26-
<div style="display: flex; flex-direction: row; height: 32px">
27-
<div class="spectrum-ButtonGroup">
28-
<button class="spectrum-Tool">
29-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
30-
<use xlink:href="#spectrum-icon-18-Properties" />
31-
</svg>
32-
</button>
33-
</div>
29+
<div class="spectrum-ButtonGroup">
30+
<button class="spectrum-Tool">
31+
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
32+
<use xlink:href="#spectrum-icon-18-Properties" />
33+
</svg>
34+
</button>
3435
<div class="spectrum-Rule spectrum-Rule--small spectrum-Rule--vertical"></div>
35-
<div class="spectrum-ButtonGroup">
36-
<button class="spectrum-Tool">
37-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
38-
<use xlink:href="#spectrum-icon-18-Select" />
39-
</svg>
40-
</button>
41-
</div>
36+
<button class="spectrum-Tool">
37+
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
38+
<use xlink:href="#spectrum-icon-18-Select" />
39+
</svg>
40+
</button>
4241
</div>
4342
- id: rule-vertical-medium
4443
name: 'Vertical, Medium'
4544
markup: |
46-
<div style="display: flex; flex-direction: row; height: 32px">
47-
<div class="spectrum-ButtonGroup">
48-
<button class="spectrum-Tool">
49-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
50-
<use xlink:href="#spectrum-icon-18-Properties" />
51-
</svg>
52-
</button>
53-
</div>
45+
<div class="spectrum-ButtonGroup">
46+
<button class="spectrum-Tool">
47+
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
48+
<use xlink:href="#spectrum-icon-18-Properties" />
49+
</svg>
50+
</button>
5451
<div class="spectrum-Rule spectrum-Rule--medium spectrum-Rule--vertical"></div>
55-
<div class="spectrum-ButtonGroup">
56-
<button class="spectrum-Tool">
57-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
58-
<use xlink:href="#spectrum-icon-18-Select" />
59-
</svg>
60-
</button>
61-
</div>
52+
<button class="spectrum-Tool">
53+
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
54+
<use xlink:href="#spectrum-icon-18-Select" />
55+
</svg>
56+
</button>
6257
</div>

‎components/rule/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
},
2121
"devDependencies": {
2222
"@spectrum-css/button": "^2.0.3",
23+
"@spectrum-css/buttongroup": "^2.0.3",
2324
"@spectrum-css/component-builder": "^1.0.2",
2425
"@spectrum-css/vars": "^1.0.0-alpha.0",
2526
"gulp": "^4.0.0"

0 commit comments

Comments
 (0)