Skip to content

Commit 5b74d1f

Browse files
author
Cathy Siller
committed
chore(panels): deprecate custom elements within component
1 parent 55e499b commit 5b74d1f

File tree

15 files changed

+142
-195
lines changed

15 files changed

+142
-195
lines changed

‎docs/_data/nav.json5‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,6 @@
7878
{ label: '<hx-menu>', path: 'hx-menu' },
7979
{ label: '<hx-menuitem>', path: 'hx-menuitem' },
8080
{ label: '<hx-modal>', path: 'hx-modal' },
81-
{ label: '<hx-panel>', path: 'hx-panel' },
82-
{ label: '<hx-panelbody>', path: 'hx-panelbody' },
83-
{ label: '<hx-panelfoot>', path: 'hx-panelfoot' },
84-
{ label: '<hx-panelhead>', path: 'hx-panelhead' },
8581
{ label: '<hx-pill>', path: 'hx-pill' },
8682
{ label: '<hx-popover>', path: 'hx-popover' },
8783
{ label: '<hx-progress>', path: 'hx-progress' },

‎docs/components/layouts/horizontal-layout.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
</nav>
2020

2121
<main role="main" id="content">
22-
<hx-panel class="hxSpan-7-xs">
23-
<hx-panelbody class="hxBox hxMd">
22+
<div class="hxPanel hxSpan-7-xs">
23+
<hx-div class="hxBox hxMd">
2424
<nav class="hxBreadcrumb">
2525
<a href="#">Home</a>
2626
<hx-icon class="delimiter" type="angle-right"></hx-icon>
@@ -60,14 +60,14 @@ <h1>Primary Panel</h1>
6060
<span>Download Horizontal Template</span>
6161
</a>
6262
</p>
63-
</hx-panelbody>
64-
</hx-panel>
63+
</hx-div>
64+
</div>
6565

66-
<hx-panel class="hxSpan-5-xs">
67-
<hx-panelbody class="hxBox hxMd">
66+
<div class="hxPanel hxSpan-5-xs">
67+
<hx-div class="hxBox hxMd">
6868
<h2>Secondary Panel</h2>
69-
</hx-panelbody>
70-
</hx-panel>
69+
</hx-div>
70+
</div>
7171
</main>
7272
</div>
7373
</div>

‎docs/components/panels/index.html‎

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
---
22
title: Panels
33
minver: 0.2.0
4-
also:
5-
elements/hx-panel: <hx-panel>
6-
elements/hx-panelbody: <hx-panelbody>
7-
elements/hx-panelfoot: <hx-panelfoot>
8-
elements/hx-panelhead: <hx-panelhead>
94
---
105
{% extends 'component.njk' %}
116
{% block content %}
@@ -39,9 +34,9 @@ <h2 id="basic-panel">Basic Panel</h2>
3934
</header>
4035

4136
<div class="demo panel-demo">
42-
<hx-panel>
43-
<hx-panelhead v-if="hasHead">Panel Head</hx-panelhead>
44-
<hx-panelbody>
37+
<div class="hxPanel">
38+
<header v-if="hasHead">Panel Head</header>
39+
<hx-div>
4540
<p>Panel Body</p>
4641
<p>
4742
If it takes you too long to document the backlog PR bottleneck, then
@@ -53,42 +48,42 @@ <h2 id="basic-panel">Basic Panel</h2>
5348
emergence down the WIP colocation. If it takes you too long to release
5449
the lean MVP pattern, then you are not coding enough.
5550
</p>
56-
</hx-panelbody>
57-
<hx-panelfoot v-if="hasFoot">Panel Foot</hx-panelfoot>
58-
</hx-panel>
51+
</hx-div>
52+
<footer v-if="hasFoot">Panel Foot</footer>
53+
</div>
5954
</div>
6055

6156
<footer>
6257
<template v-if="hasHead && hasFoot">
6358
{% code 'html' %}
64-
<hx-panel>
65-
<hx-panelhead></hx-panelhead>
66-
<hx-panelbody></hx-panelbody>
67-
<hx-panelfoot></hx-panelfoot>
68-
</hx-panel>
59+
<div class="hxPanel">
60+
<header></header>
61+
<hx-div></hx-div>
62+
<footer></footer>
63+
</div>
6964
{% endcode %}
7065
</template>
7166
<template v-else-if="hasHead">
7267
{% code 'html' %}
73-
<hx-panel>
74-
<hx-panelhead></hx-panelhead>
75-
<hx-panelbody></hx-panelbody>
76-
</hx-panel>
68+
<div class="hxPanel">
69+
<header></header>
70+
<hx-div></hx-div>
71+
</div>
7772
{% endcode %}
7873
</template>
7974
<template v-else-if="hasFoot">
8075
{% code 'html' %}
81-
<hx-panel>
82-
<hx-panelbody></hx-panelbody>
83-
<hx-panelfoot></hx-panelfoot>
84-
</hx-panel>
76+
<div class="hxPanel">
77+
<hx-div></hx-div>
78+
<footer></footer>
79+
</div>
8580
{% endcode %}
8681
</template>
8782
<template v-else>
8883
{% code 'html' %}
89-
<hx-panel>
90-
<hx-panelbody></hx-panelbody>
91-
</hx-panel>
84+
<div class="hxPanel">
85+
<hx-div></hx-div>
86+
</div>
9287
{% endcode %}
9388
</template>
9489
</footer>

‎docs/elements/hx-panel/index.html‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎docs/elements/hx-panelbody/index.html‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎docs/elements/hx-panelfoot/index.html‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎docs/elements/hx-panelhead/index.html‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎docs/files/horizontal-layout-template.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,17 +53,17 @@
5353

5454
<!-- Accessibility: [role="main"] must be present on main#content -->
5555
<main role="main" id="content">
56-
<hx-panel class="hxSpan-7-xs">
57-
<hx-panelbody class="hxBox hxMd">
56+
<div class="hxPanel hxSpan-7-xs">
57+
<div class="hxBox hxMd">
5858
<h1>Primary Panel</h1>
59-
</hx-panelbody>
60-
</hx-panel>
59+
</div>
60+
</div>
6161

62-
<hx-panel class="hxSpan-5-xs">
63-
<hx-panelbody class="hxBox hxMd">
62+
<div class="hxPanel hxSpan-5-xs">
63+
<div class="hxBox hxMd">
6464
<h2>Secondary Panel</h2>
65-
</hx-panelbody>
66-
</hx-panel>
65+
</div>
66+
</div>
6767
</main>
6868
</div>
6969
</div>

‎docs/styles/demo/panel-docs.less‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,29 @@
55
overflow: hidden;
66
resize: vertical;
77

8+
.hxPanel {
9+
border: @demo-container-border;
10+
}
11+
12+
header {
13+
border-bottom: @demo-container-border;
14+
}
15+
16+
footer {
17+
border-top: @demo-container-border;
18+
}
19+
20+
// DEPRECATED, remove in v1.0.0
821
hx-panel {
922
border: @demo-container-border;
1023
}
1124

25+
// DEPRECATED, remove in v1.0.0
1226
hx-panelhead {
1327
border-bottom: @demo-container-border;
1428
}
1529

30+
// DEPRECATED, remove in v1.0.0
1631
hx-panelfoot {
1732
border-top: @demo-container-border;
1833
}

‎src/helix-ui/styles/components/layouts.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,11 @@ body.hxHorizontal {
179179
overflow-x: auto;
180180
overflow-y: hidden;
181181

182+
> .hxPanel + .hxPanel {
183+
border-left: 1px solid @gray-300;
184+
}
185+
186+
// DEPRECATED, remove in v1.0.0
182187
> hx-panel + hx-panel {
183188
border-left: 1px solid @gray-300;
184189
}

0 commit comments

Comments
 (0)