Skip to content

Commit 9d3a305

Browse files
GarthDBGarthDB
authored
feat: renamed Rule to Divider; closes #193 (#751)
1 parent 8d4a61f commit 9d3a305

8 files changed

Lines changed: 32 additions & 32 deletions

File tree

components/rule/.npmignore renamed to components/divider/.npmignore

File renamed without changes.

components/rule/CHANGELOG.md renamed to components/divider/CHANGELOG.md

File renamed without changes.

components/rule/README.md renamed to components/divider/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# @spectrum-css/rule
1+
# @spectrum-css/divider
22
> The Spectrum CSS rule component
33
44
This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).

components/rule/gulpfile.js renamed to components/divider/gulpfile.js

File renamed without changes.

components/rule/index.css renamed to components/divider/index.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ governing permissions and limitations under the License.
1919
--spectrum-divider-small-vertical-width: var(--spectrum-divider-small-vertical-width, var(--spectrum-divider-small-veritcal-width));
2020
}
2121

22-
.spectrum-Rule {
22+
.spectrum-Divider {
2323
inline-size: 100%;
2424

2525
/* Show the overflow for hr in Edge and IE. */
@@ -30,36 +30,36 @@ governing permissions and limitations under the License.
3030
border-radius: var(--spectrum-divider-medium-height);
3131
}
3232

33-
.spectrum-Rule--large {
33+
.spectrum-Divider--large {
3434
block-size: var(--spectrum-divider-large-height);
3535

3636
border-radius: var(--spectrum-divider-large-border-radius);
3737
}
3838

39-
.spectrum-Rule--medium {
39+
.spectrum-Divider--medium {
4040
block-size: var(--spectrum-divider-medium-height);
4141

4242
border-radius: var(--spectrum-divider-medium-border-radius);
4343
}
4444

45-
.spectrum-Rule--small {
45+
.spectrum-Divider--small {
4646
block-size: var(--spectrum-divider-small-height);
4747

4848
border-radius: var(--spectrum-divider-small-border-radius);
4949
}
5050

51-
.spectrum-Rule--vertical {
51+
.spectrum-Divider--vertical {
5252
block-size: var(--spectrum-divider-vertical-height);
5353

54-
&.spectrum-Rule--large {
54+
&.spectrum-Divider--large {
5555
inline-size: var(--spectrum-divider-large-vertical-width);
5656
}
5757

58-
&.spectrum-Rule--medium {
58+
&.spectrum-Divider--medium {
5959
inline-size: var(--spectrum-divider-medium-vertical-width);
6060
}
6161

62-
&.spectrum-Rule--small {
62+
&.spectrum-Divider--small {
6363
inline-size: var(--spectrum-divider-small-vertical-width);
6464
}
6565
}

components/rule/metadata/rule.yml renamed to components/divider/metadata/divider.yml

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,45 @@
1-
name: Rule
1+
name: Divider
22
status: Verified
33
SpectrumSiteSlug: https://spectrum.adobe.com/page/divider/
44
examples:
5-
- id: rule-large
5+
- id: divider-large
66
name: 'Large'
77
markup: |
88
<h2 class="spectrum-Heading--subtitle1">Large</h2>
9-
<hr class="spectrum-Rule spectrum-Rule--large">
9+
<hr class="spectrum-Divider spectrum-Divider--large">
1010
<p class="spectrum-Body">Page or Section Titles.</p>
11-
- id: rule-medium
11+
- id: divider-medium
1212
name: 'Medium'
1313
markup: |
1414
<h3 class="spectrum-Heading--subtitle2">Medium</h3>
15-
<hr class="spectrum-Rule spectrum-Rule--medium">
15+
<hr class="spectrum-Divider spectrum-Divider--medium">
1616
<p class="spectrum-Body">Divide subsections, or divide different groups of elements (between panels, rails, etc.)</p>
17-
- id: rule-small
17+
- id: divider-small
1818
name: 'Small'
1919
markup: |
2020
<h4 class="spectrum-Heading--subtitle3">Small</h4>
21-
<hr class="spectrum-Rule spectrum-Rule--small">
21+
<hr class="spectrum-Divider spectrum-Divider--small">
2222
<p class="spectrum-Body">Divide like-elements (tables, tool groups, elements within a panel, etc.)</p>
23-
- id: rule-vertical-small
23+
- id: divider-vertical-small
2424
name: 'Vertical, Small'
2525
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.
26+
When a vertical Divider is used inside of a flex container, use `align-self: stretch; height: auto` on the Divider.
27+
ButtonGroup automatically applies these styles to vertical Dividers.
2828
markup: |
2929
<div class="spectrum-ButtonGroup">
3030
<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
3131
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Properties">
3232
<use xlink:href="#spectrum-icon-18-Properties" />
3333
</svg>
3434
</button>
35-
<div class="spectrum-Rule spectrum-Rule--small spectrum-Rule--vertical"></div>
35+
<div class="spectrum-Divider spectrum-Divider--small spectrum-Divider--vertical" style="height: auto; align-self: stretch;"></div>
3636
<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
3737
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
3838
<use xlink:href="#spectrum-icon-18-Select" />
3939
</svg>
4040
</button>
4141
</div>
42-
- id: rule-vertical-medium
42+
- id: divider-vertical-medium
4343
name: 'Vertical, Medium'
4444
markup: |
4545
<div class="spectrum-ButtonGroup">
@@ -48,7 +48,7 @@ examples:
4848
<use xlink:href="#spectrum-icon-18-Properties" />
4949
</svg>
5050
</button>
51-
<div class="spectrum-Rule spectrum-Rule--medium spectrum-Rule--vertical"></div>
51+
<div class="spectrum-Divider spectrum-Divider--medium spectrum-Divider--vertical" style="height: auto; align-self: stretch;"></div>
5252
<button class="spectrum-ActionButton spectrum-ActionButton--quiet">
5353
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Select">
5454
<use xlink:href="#spectrum-icon-18-Select" />

components/rule/package.json renamed to components/divider/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
2-
"name": "@spectrum-css/rule",
3-
"version": "3.0.0-beta.3",
4-
"description": "The Spectrum CSS rule component",
2+
"name": "@spectrum-css/divider",
3+
"version": "1.0.0-beta1",
4+
"description": "The Spectrum CSS divider component",
55
"license": "Apache-2.0",
66
"main": "dist/index-vars.css",
77
"repository": {
88
"type": "git",
99
"url": "https://github.com/adobe/spectrum-css.git",
10-
"directory": "components/rule"
10+
"directory": "components/divider"
1111
},
1212
"bugs": {
1313
"url": "https://github.com/adobe/spectrum-css/issues"

components/rule/skin.css renamed to components/divider/skin.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
.spectrum-Rule--large {
14-
background-color: var(--spectrum-rule-large-background-color);
13+
.spectrum-Divider--large {
14+
background-color: var(--spectrum-divider-large-background-color);
1515
}
1616

17-
.spectrum-Rule--medium {
18-
background-color: var(--spectrum-rule-medium-background-color);
17+
.spectrum-Divider--medium {
18+
background-color: var(--spectrum-divider-medium-background-color);
1919
}
2020

21-
.spectrum-Rule--small {
22-
background-color: var(--spectrum-rule-small-background-color);
21+
.spectrum-Divider--small {
22+
background-color: var(--spectrum-divider-small-background-color);
2323
}

0 commit comments

Comments
 (0)