Skip to content

Commit 1cfe853

Browse files
brandonferruabrandonferrua
authored
Merge pull request #1468 from salesforce-ux/chore/grid-examples
Remove reference to col--padded for spacing utilities for grid gutters
2 parents 972c6fd + 857e88d commit 1cfe853

File tree

21 files changed

+156
-145
lines changed

21 files changed

+156
-145
lines changed

‎ui/components/app-launcher/flavors/default/index.react.example.jsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -47,37 +47,37 @@ let AppLauncherModal = props =>
4747
</div>
4848
<div className={pf('section__content')}>
4949
<ul className={pf('grid grid--pull-padded wrap')}>
50-
<li className={pf('col--padded grow-none size--1-of-1 medium-size--1-of-3')}>
50+
<li className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-3')}>
5151
<AppLauncherTile objectInitials="SC" figureClass={pf('icon-custom-27')} draggable>
5252
<span className={pf('text-link')}>Sales Cloud</span>
5353
<p>The primary internal Salesforce org. Used to run our...<span className={pf('text-link')}>More</span></p>
5454
</AppLauncherTile>
5555
</li>
56-
<li className={pf('col--padded grow-none size--1-of-1 medium-size--1-of-3')}>
56+
<li className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-3')}>
5757
<AppLauncherTile objectInitials="MC" figureClass={pf('icon-custom-59')} draggable>
5858
<span className={pf('text-link')}>Marketing Cloud</span>
5959
<p>Salesforce Marketing Cloud lets businesses of any size...<span className={pf('text-link')}>More</span></p>
6060
</AppLauncherTile>
6161
</li>
62-
<li className={pf('col--padded grow-none size--1-of-1 medium-size--1-of-3')}>
62+
<li className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-3')}>
6363
<AppLauncherTile objectInitials="HR" figureClass={pf('icon-custom-10')} draggable>
6464
<span className={pf('text-link')}>HR Concierge</span>
6565
<p>Community for managing employee benefits and time off.</p>
6666
</AppLauncherTile>
6767
</li>
68-
<li className={pf('col--padded grow-none size--1-of-1 medium-size--1-of-3')}>
68+
<li className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-3')}>
6969
<AppLauncherTile objectInitials="MM" figureClass={pf('icon-custom-6')} draggable>
7070
<span className={pf('text-link')}>My Money</span>
7171
<p>Manage your finances across multiple financial platforms...<span className={pf('text-link')}>More</span></p>
7272
</AppLauncherTile>
7373
</li>
74-
<li className={pf('col--padded grow-none size--1-of-1 medium-size--1-of-3')}>
74+
<li className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-3')}>
7575
<AppLauncherTile objectInitials="CC" figureClass={pf('icon-custom-91')} draggable>
7676
<span className={pf('text-link')}>Call Center</span>
7777
<p>The key to call center and contact center management is more...<span className={pf('text-link')}>More</span></p>
7878
</AppLauncherTile>
7979
</li>
80-
<li className={pf('col--padded grow-none size--1-of-1 medium-size--1-of-3')}>
80+
<li className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-3')}>
8181
<AppLauncherTile objectInitials="CS" figureClass={pf('icon-custom-50')} draggable>
8282
<span className={pf('text-link')}>Customer Support Communitiy</span>
8383
<p>Areas of Focus are used to track customer support for your...<span className={pf('text-link')}>More</span></p>
@@ -97,37 +97,37 @@ let AppLauncherModal = props =>
9797
</div>
9898
<div className={pf('section__content')}>
9999
<ul className={pf('grid grid--pull-padded wrap')}>
100-
<li className={pf('col--padded grow-none size--xx-small')}>
100+
<li className={pf('p-horizontal--small size--xx-small')}>
101101
<AppLauncherTile flavor="small" symbol="account">
102102
<p className={pf('truncate text-link')}>Accounts</p>
103103
</AppLauncherTile>
104104
</li>
105-
<li className={pf('col--padded grow-none size--xx-small')}>
105+
<li className={pf('p-horizontal--small size--xx-small')}>
106106
<AppLauncherTile flavor="small" symbol="announcement">
107107
<p className={pf('truncate text-link')}>Announcements</p>
108108
</AppLauncherTile>
109109
</li>
110-
<li className={pf('col--padded grow-none size--xx-small')}>
110+
<li className={pf('p-horizontal--small size--xx-small')}>
111111
<AppLauncherTile flavor="small" symbol="approval">
112112
<p className={pf('truncate text-link')}>Approvals</p>
113113
</AppLauncherTile>
114114
</li>
115-
<li className={pf('col--padded grow-none size--xx-small')}>
115+
<li className={pf('p-horizontal--small size--xx-small')}>
116116
<AppLauncherTile flavor="small" symbol="campaign">
117117
<p className={pf('truncate text-link')}>Campaigns</p>
118118
</AppLauncherTile>
119119
</li>
120-
<li className={pf('col--padded grow-none size--xx-small')}>
120+
<li className={pf('p-horizontal--small size--xx-small')}>
121121
<AppLauncherTile flavor="small" symbol="case">
122122
<p className={pf('truncate text-link')}>Cases</p>
123123
</AppLauncherTile>
124124
</li>
125-
<li className={pf('col--padded grow-none size--xx-small')}>
125+
<li className={pf('p-horizontal--small size--xx-small')}>
126126
<AppLauncherTile flavor="small" symbol="coaching">
127127
<p className={pf('truncate text-link')}>Coaching</p>
128128
</AppLauncherTile>
129129
</li>
130-
<li className={pf('col--padded grow-none size--xx-small')}>
130+
<li className={pf('p-horizontal--small size--xx-small')}>
131131
<AppLauncherTile flavor="small" symbol="contact">
132132
<p className={pf('truncate text-link')}>Contacts</p>
133133
</AppLauncherTile>

‎ui/components/app-launcher/flavors/search/index.react.example.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ let AppLauncherModal = props =>
4747
</div>
4848
<div className={pf('section__content')}>
4949
<ul className={pf('grid grid--pull-padded wrap')}>
50-
<li className={pf('col--padded grow-none size--1-of-1 medium-size--1-of-3')}>
50+
<li className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-3')}>
5151
<AppLauncherTile objectInitials="SC" figureClass={pf('icon-custom-27')} draggable>
5252
<span className={pf('text-link')}><mark>Sales</mark> Cloud</span>
5353
<p>The primary internal Salesforce org. Used to run our...<span className={pf('text-link')}>More</span></p>
@@ -67,12 +67,12 @@ let AppLauncherModal = props =>
6767
</div>
6868
<div className={pf('section__content')}>
6969
<ul className={pf('grid grid--pull-padded wrap')}>
70-
<li className={pf('col--padded grow-none size--xx-small')}>
70+
<li className={pf('p-horizontal--small size--xx-small')}>
7171
<AppLauncherTile flavor="small" symbol="account">
7272
<p className={pf('truncate text-link')}><mark>Sales</mark> Invoices</p>
7373
</AppLauncherTile>
7474
</li>
75-
<li className={pf('col--padded grow-none size--xx-small')}>
75+
<li className={pf('p-horizontal--small size--xx-small')}>
7676
<AppLauncherTile flavor="small" symbol="announcement">
7777
<p className={pf('truncate text-link')}><mark>Sales</mark> Objects</p>
7878
</AppLauncherTile>

‎ui/components/cards/flavors/related-list-with-tiles/index.react.example.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default (
3636
<CardHeader symbol="contact" actions><span className={pf('text-heading--small')}>Contacts (3)</span></CardHeader>
3737
<CardBody>
3838
<div className={pf('card__body--inner grid wrap grid--pull-padded')}>
39-
<TileMedia title="Related Record Title 1" media={ icon } actions className={pf('card__tile col--padded grow-none size--1-of-1 medium-size--1-of-3')}>
39+
<TileMedia title="Related Record Title 1" media={ icon } actions className={pf('card__tile p-horizontal--small size--1-of-1 medium-size--1-of-3')}>
4040
<dl className={pf('dl--horizontal')}>
4141
<dt className={pf('dl--horizontal__label')}>
4242
<span className={pf('truncate')} title="Type">Type:</span>
@@ -52,7 +52,7 @@ export default (
5252
</dd>
5353
</dl>
5454
</TileMedia>
55-
<TileMedia title="Related Record Title 1" media={ icon } actions className={pf('card__tile col--padded grow-none size--1-of-1 medium-size--1-of-3')}>
55+
<TileMedia title="Related Record Title 1" media={ icon } actions className={pf('card__tile p-horizontal--small size--1-of-1 medium-size--1-of-3')}>
5656
<dl className={pf('dl--horizontal')}>
5757
<dt className={pf('dl--horizontal__label')}>
5858
<span className={pf('truncate')} title="Type">Type:</span>
@@ -68,7 +68,7 @@ export default (
6868
</dd>
6969
</dl>
7070
</TileMedia>
71-
<TileMedia title="Related Record Title 1" media={ icon } actions className={pf('card__tile col--padded grow-none size--1-of-1 medium-size--1-of-3')}>
71+
<TileMedia title="Related Record Title 1" media={ icon } actions className={pf('card__tile p-horizontal--small size--1-of-1 medium-size--1-of-3')}>
7272
<dl className={pf('dl--horizontal')}>
7373
<dt className={pf('dl--horizontal__label')}>
7474
<span className={pf('truncate')} title="Type">Type:</span>

‎ui/components/cards/index.table.yml

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,3 @@ classes:
3131
class: card--narrow
3232
description: Modifies styles for card in a narrow column
3333
applied: <code>.{{cssPrefix}}card</code>
34-
-
35-
class: card--compact
36-
description: Modifies styles for a compact card, specific use is within Console
37-
applied: <code>.{{cssPrefix}}card</code>

‎ui/components/feeds/flavors/post-with-attachments/index.react.example.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,22 +54,22 @@ export let states = [
5454
</PostContent>
5555
<div className={pf('post__payload')}>
5656
<ul className={pf('grid grid--pull-padded')}>
57-
<li className={pf('col--padded grow-none size--1-of-2 medium-size--1-of-3')}>
57+
<li className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-3')}>
5858
<Image
5959
className={pf('image--card')}
6060
cropClass={pf('image__crop--16-by-9')}
6161
titleClass={pf('image__title--card')}
6262
symbol="image"
6363
image />
6464
</li>
65-
<li className={pf('col--padded grow-none size--1-of-2 medium-size--1-of-3 medium-show')}>
65+
<li className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-3 medium-show')}>
6666
<Image
6767
className={pf('image--card')}
6868
cropClass={pf('image__crop--16-by-9')}
6969
titleClass={pf('image__title--card')}
7070
symbol="pdf" />
7171
</li>
72-
<li className={pf('col--padded grow-none size--1-of-2 medium-size--1-of-3')}>
72+
<li className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-3')}>
7373
<Image
7474
className={pf('image--card')}
7575
cropClass={pf('image__crop--16-by-9')}

‎ui/components/files/flavors/multi-attachments/index.react.example.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@ export let states = [
2424
label: 'Files',
2525
element:
2626
<ul className={pf('grid grid--pull-padded')}>
27-
<li className={pf('col--padded grow-none size--1-of-2 medium-size--1-of-3')}>
27+
<li className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-3')}>
2828
<Image
2929
className={pf('image--card')}
3030
cropClass={pf('image__crop--16-by-9')}
3131
titleClass={pf('image__title--card')}
3232
symbol="image"
3333
image />
3434
</li>
35-
<li className={pf('col--padded grow-none size--1-of-2 medium-size--1-of-3')}>
35+
<li className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-3')}>
3636
<Image
3737
className={pf('image--card')}
3838
cropClass={pf('image__crop--16-by-9')}
@@ -46,22 +46,22 @@ export let states = [
4646
label: 'With overflow',
4747
element:
4848
<ul className={pf('grid grid--pull-padded')}>
49-
<li className={pf('col--padded grow-none size--1-of-2 medium-size--1-of-3')}>
49+
<li className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-3')}>
5050
<Image
5151
className={pf('image--card')}
5252
cropClass={pf('image__crop--16-by-9')}
5353
titleClass={pf('image__title--card')}
5454
symbol="image"
5555
image />
5656
</li>
57-
<li className={pf('col--padded grow-none size--1-of-2 medium-size--1-of-3 medium-show')}>
57+
<li className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-3 medium-show')}>
5858
<Image
5959
className={pf('image--card')}
6060
cropClass={pf('image__crop--16-by-9')}
6161
titleClass={pf('image__title--card')}
6262
symbol="pdf" />
6363
</li>
64-
<li className={pf('col--padded grow-none size--1-of-2 medium-size--1-of-3')}>
64+
<li className={pf('p-horizontal--small size--1-of-2 medium-size--1-of-3')}>
6565
<Image
6666
className={pf('image--card')}
6767
cropClass={pf('image__crop--16-by-9')}

‎ui/components/forms/index.docs.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@ export default (
3737
<p>When an <code>&lt;input&gt;</code> is required, add the HTML attribute required to it. Additionally, add the <CodeClass className="is-required" /> class on the <CodeClass className="form-element" /> wrapper.</p>
3838
<p>The native form elements, <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;select&gt;</code>, <code>&lt;input type='checkbox'&gt;</code>, and <code>&lt;input type='radio'&gt;</code>, receive validation styling for <code>disabled</code>, <code>checked</code>, and <code>checked disabled</code>, if applicable.</p>
3939
<h3 className={pf('text-heading--small')}>Form Example</h3>
40-
<form role="form" className={pf('form--stacked grid wrap grid--pull-padded-large m-top--large')}>
41-
<div className={pf('col--padded size--1-of-1 medium-size--1-of-2')}>
40+
<form role="form" className={pf('form--stacked grid wrap grid--pull-padded m-top--large')}>
41+
<div className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-2')}>
4242
<Input label="Opportunity Name" placeholder="Moderna 10k" assistiveText="Opportunity Name" />
4343
<Input label="Account Name" placeholder="Moderno Bistro" assistiveText="Account Name" />
4444
<Input label="Contact Name" placeholder="John Smith" assistiveText="Contact Name" />
4545
<Input label="Contact Email" placeholder="[email protected]" assistiveText="Contact Email" help="Example Form Element Help" />
4646
<Textarea label="Notes" assistiveText="textarea"></Textarea>
4747
</div>
48-
<div className={pf('col--padded size--1-of-1 medium-size--1-of-2')}>
48+
<div className={pf('p-horizontal--small size--1-of-1 medium-size--1-of-2')}>
4949
<div className={pf('form-element has-divider--bottom')}>
5050
<span className={pf('form-element__label')}>Opportunity Owner</span>
5151
<div className={pf('form-element__control')}>

‎ui/components/forms/index.table.yml

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -145,11 +145,6 @@ classes:
145145
description: Use to create rows of form elements in a compound form
146146
applied: <code>&lt;div&gt;</code>
147147
notes: Wrap form elements in this class
148-
-
149-
class: is-required
150-
description: Applied to <code>.{{cssPrefix}}form-element</code> when form element is required
151-
applied: <code>.{{cssPrefix}}form-element</code>
152-
required: true
153148
-
154149
class: required
155150
description: Class used on required asterick

‎ui/components/popovers/flavors/panels/index.react.example.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default (
4949
{/* Additional Info */}
5050
<div className={pf('grid wrap grid--pull-padded')}>
5151

52-
<div className={pf('col--padded size--1-of-2 p-bottom--x-small')}>
52+
<div className={pf('p-horizontal--small size--1-of-2 p-bottom--x-small')}>
5353
<dl>
5454
<dt><p className={pf('text-title--caps truncate')}>Billing Address</p></dt>
5555
<dd>
@@ -59,21 +59,21 @@ export default (
5959
</dl>
6060
</div>
6161

62-
<div className={pf('col--padded size--1-of-2 p-bottom--x-small')}>
62+
<div className={pf('p-horizontal--small size--1-of-2 p-bottom--x-small')}>
6363
<dl>
6464
<dt><p className={pf('text-title--caps truncate')}>Phone</p></dt>
6565
<dd><a href="javascript:void(0);">212-345-3485</a></dd>
6666
</dl>
6767
</div>
6868

69-
<div className={pf('col--padded size--1-of-2 p-bottom--x-small')}>
69+
<div className={pf('p-horizontal--small size--1-of-2 p-bottom--x-small')}>
7070
<dl>
7171
<dt><p className={pf('text-title--caps truncate')}>Website</p></dt>
7272
<dd><a href="javascript:void(0);">teslamotors.com</a></dd>
7373
</dl>
7474
</div>
7575

76-
<div className={pf('col--padded size--1-of-2 p-bottom--x-small')}>
76+
<div className={pf('p-horizontal--small size--1-of-2 p-bottom--x-small')}>
7777
<dl>
7878
<dt><p className={pf('text-title--caps truncate')}>Account Owner</p></dt>
7979
<dd><a href="javascript:void(0);">Jeff Maguire</a></dd>

‎ui/utilities/grid/flavors/automatic-sizing/_index.scss

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -33,42 +33,44 @@
3333
}
3434
}
3535

36-
.#{$css-prefix}col,
37-
// Catch all for col--padded variants
38-
[class*="#{$css-prefix}col--padded"] {
39-
@include flex-item(expand);
40-
}
41-
42-
.#{$css-prefix}col--padded {
43-
padding: {
44-
right: $spacing-small;
45-
left: $spacing-small;
36+
@include deprecate('4.0.0', 'Use spacing utilities instead') {
37+
.#{$css-prefix}col,
38+
// Catch all for col--padded variants
39+
[class*="#{$css-prefix}col--padded"] {
40+
@include flex-item(expand);
4641
}
4742

48-
&-medium {
43+
.#{$css-prefix}col--padded {
4944
padding: {
50-
right: $spacing-medium;
51-
left: $spacing-medium;
45+
right: $spacing-small;
46+
left: $spacing-small;
5247
}
53-
}
5448

55-
&-large {
56-
padding: {
57-
right: $spacing-large;
58-
left: $spacing-large;
49+
&-medium {
50+
padding: {
51+
right: $spacing-medium;
52+
left: $spacing-medium;
53+
}
5954
}
60-
}
6155

62-
&-around {
63-
padding: $spacing-small;
64-
}
56+
&-large {
57+
padding: {
58+
right: $spacing-large;
59+
left: $spacing-large;
60+
}
61+
}
6562

66-
&-around-medium {
67-
padding: $spacing-medium;
68-
}
63+
&-around {
64+
padding: $spacing-small;
65+
}
66+
67+
&-around-medium {
68+
padding: $spacing-medium;
69+
}
6970

70-
&-around-large {
71-
padding: $spacing-large;
71+
&-around-large {
72+
padding: $spacing-large;
73+
}
7274
}
7375
}
7476

‎ui/utilities/grid/flavors/automatic-sizing/index.markup.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
**Note**: The `<div>` with class `slds-box` is for demo purposes only.
2+
13
By default, the grid items within a `.{{cssPrefix}}grid` do not stretch to take up that available white-space on the main axis. Apply `.{{cssPrefix}}col` to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region.
24

3-
To apply gutters between each grid item, the following classes are available to add your intended gutters, `.{{cssPrefix}}col--padded`, `.{{cssPrefix}}col--padded-medium` and `.{{cssPrefix}}col--padded-large`.
5+
To apply gutters between each grid item, the following spacing classes are available to add your intended gutters, `.{{cssPrefix}}p-horizontal--small`, `.{{cssPrefix}}p-horizontal--medium`, `.{{cssPrefix}}p-horizontal--large`, `.{{cssPrefix}}p-around--small`, `.{{cssPrefix}}p-around--medium` and `.{{cssPrefix}}p-around--large`.
46

57
You may need to pull the grid items back to their original grid boundaries of the grid container, apply the classes `.{{cssPrefix}}grid--pull-padded`, `.{{cssPrefix}}grid--pull-padded-medium` or `.{{cssPrefix}}grid--pull-padded-large` to the `.{{cssPrefix}}grid`.

0 commit comments

Comments
 (0)