Skip to content

Commit 7b80b8f

Browse files
author
[ Cassondra ]
committed
feat Test adding resize properties and adjusting layout to use flex instead
1 parent b325cdb commit 7b80b8f

File tree

4 files changed

+120
-117
lines changed

4 files changed

+120
-117
lines changed

‎elements/pfe-cta/demo/demo.css‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ pfe-band[pfe-color="lightest"] pfe-card[pfe-color="lightest"] {
1616
display: flex;
1717
flex-flow: row nowrap;
1818
border: 1px solid #ddd;
19-
width: 500px;
19+
width: 305px;
2020
padding: 10px;
2121
}
2222

@@ -33,16 +33,20 @@ pfe-band[pfe-color="lightest"] pfe-card[pfe-color="lightest"] {
3333
.card-layout {
3434
display: flex;
3535
flex-flow: row wrap;
36-
display: grid;
37-
grid-gap: 10px;
38-
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
3936
margin-top: -10px;
4037
margin-left: -20px;
4138
}
4239

43-
.cta-layout > pfe-cta,
44-
.card-layout > pfe-cta,
45-
.card-layout .cta-align > pfe-cta {
40+
.cta-layout > *:not([class~="layout"]),
41+
.card-layout .cta-align > * {
42+
margin-top: 10px;
43+
margin-left: 20px;
44+
}
45+
46+
.card-layout > *:not([class~="layout"]) {
47+
width: min-content;
48+
min-width: 350px;
49+
flex-grow: 1;
4650
margin-top: 10px;
4751
margin-left: 20px;
4852
}

‎elements/pfe-cta/demo/index.html‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ <h1 slot="pfe-band--header"><code>&lt;pfe-cta&gt;</code> demo page</h1>
5050
<pfe-band pfe-color="lightest" style="--pfe-band--Border: 1px solid #ddd">
5151
<h2 slot="pfe-band--header">CTAs in light containers</h2>
5252
<div class="card-layout">
53-
<pfe-card pfe-color="lightest" pfe-size="small">
53+
<pfe-card class="resize" pfe-color="lightest" pfe-size="small">
5454
<h3 slot="pfe-card--header">No color attribute</h3>
5555
<div class="cta-align">
5656
<pfe-cta><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -61,7 +61,7 @@ <h3 slot="pfe-card--header">No color attribute</h3>
6161
</div>
6262
<div class="event-registry" slot="pfe-card--footer"></div>
6363
</pfe-card>
64-
<pfe-card pfe-color="lightest" pfe-size="small">
64+
<pfe-card class="resize" pfe-color="lightest" pfe-size="small">
6565
<h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
6666
<div class="cta-align">
6767
<pfe-cta pfe-color="base"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -75,7 +75,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
7575
</div>
7676
<div class="event-registry" slot="pfe-card--footer"></div>
7777
</pfe-card>
78-
<pfe-card pfe-color="lighter" pfe-size="small">
78+
<pfe-card class="resize" pfe-color="lighter" pfe-size="small">
7979
<h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
8080
<div class="cta-align">
8181
<pfe-cta pfe-color="accent"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -89,7 +89,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
8989
</div>
9090
<div class="event-registry" slot="pfe-card--footer"></div>
9191
</pfe-card>
92-
<pfe-card pfe-color="lighter" pfe-size="small">
92+
<pfe-card class="resize" pfe-color="lighter" pfe-size="small">
9393
<h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
9494
<div class="cta-align">
9595
<pfe-cta pfe-color="complement"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -109,7 +109,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
109109
<pfe-band pfe-color="lightest" style="--pfe-band--Border: 1px solid #ddd">
110110
<h2 slot="pfe-band--header">CTAs in dark containers</h2>
111111
<div class="card-layout">
112-
<pfe-card pfe-color="darkest" pfe-size="small">
112+
<pfe-card class="resize" pfe-color="darkest" pfe-size="small">
113113
<h3 slot="pfe-card--header">No color attribute</h3>
114114
<div class="cta-align">
115115
<pfe-cta><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -120,7 +120,7 @@ <h3 slot="pfe-card--header">No color attribute</h3>
120120
</div>
121121
<div class="event-registry" slot="pfe-card--footer"></div>
122122
</pfe-card>
123-
<pfe-card pfe-color="darkest" pfe-size="small">
123+
<pfe-card class="resize" pfe-color="darkest" pfe-size="small">
124124
<h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
125125
<div class="cta-align">
126126
<pfe-cta pfe-color="base"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -134,7 +134,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
134134
</div>
135135
<div class="event-registry" slot="pfe-card--footer"></div>
136136
</pfe-card>
137-
<pfe-card pfe-color="darker" pfe-size="small">
137+
<pfe-card class="resize" pfe-color="darker" pfe-size="small">
138138
<h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
139139
<div class="cta-align">
140140
<pfe-cta pfe-color="accent"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -148,7 +148,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
148148
</div>
149149
<div class="event-registry" slot="pfe-card--footer"></div>
150150
</pfe-card>
151-
<pfe-card pfe-color="darker" pfe-size="small">
151+
<pfe-card class="resize" pfe-color="darker" pfe-size="small">
152152
<h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
153153
<div class="cta-align">
154154
<pfe-cta pfe-color="complement"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -168,7 +168,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
168168
<pfe-band pfe-color="lightest" style="--pfe-band--Border: 1px solid #ddd">
169169
<h2 slot="pfe-band--header">CTAs in saturated containers</h2>
170170
<div class="card-layout">
171-
<pfe-card pfe-color="complement" pfe-size="small">
171+
<pfe-card class="resize" pfe-color="complement" pfe-size="small">
172172
<h3 slot="pfe-card--header">No color attribute</h3>
173173
<div class="cta-align">
174174
<pfe-cta><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -179,7 +179,7 @@ <h3 slot="pfe-card--header">No color attribute</h3>
179179
</div>
180180
<div class="event-registry" slot="pfe-card--footer"></div>
181181
</pfe-card>
182-
<pfe-card pfe-color="complement" pfe-size="small">
182+
<pfe-card class="resize" pfe-color="complement" pfe-size="small">
183183
<h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
184184
<div class="cta-align">
185185
<pfe-cta pfe-color="base"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -193,7 +193,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
193193
</div>
194194
<div class="event-registry" slot="pfe-card--footer"></div>
195195
</pfe-card>
196-
<pfe-card pfe-color="accent" pfe-size="small">
196+
<pfe-card class="resize" pfe-color="accent" pfe-size="small">
197197
<h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
198198
<div class="cta-align">
199199
<pfe-cta pfe-color="accent"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -207,7 +207,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
207207
</div>
208208
<div class="event-registry" slot="pfe-card--footer"></div>
209209
</pfe-card>
210-
<pfe-card pfe-color="accent" pfe-size="small">
210+
<pfe-card class="resize" pfe-color="accent" pfe-size="small">
211211
<h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
212212
<div class="cta-align">
213213
<pfe-cta pfe-color="complement"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -228,7 +228,6 @@ <h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
228228
<h2 slot="pfe-band--header">Force wrap to test arrow line-wrap</h2>
229229
<div class="default-link-test resize">
230230
<pfe-cta><a href="https://www.redhat.com#default">Default link cta with longer text</a></pfe-cta>
231-
<pfe-cta><button>Default button cta with longer text</button></pfe-cta>
232231
</div>
233232
</pfe-band>
234233

‎examples/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ <h1>Demo pages</h1>
5252
<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-badge/demo">pfe-badge</a></pfe-cta>
5353
<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-band/demo">pfe-band</a></pfe-cta>
5454
<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-card/demo">pfe-card</a></pfe-cta>
55+
<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-chip/demo">pfe-chip</a></pfe-cta>
5556
<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-collapse/demo">pfe-collapse</a></pfe-cta>
5657
<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-content-set/demo">pfe-content-set</a></pfe-cta>
5758
<pfe-cta pfe-priority="secondary" pfe-variant="wind"><a href="../elements/pfe-cta/demo">pfe-cta</a></pfe-cta>

0 commit comments

Comments
 (0)