Skip to content

Commit 3ce19f4

Browse files
greenstephstephanie greenstephanie green
authored
fix(button icon): add large variant for icon buttons (#5016)
* fix(button icon): add large variant for icon buttons * fix(button icon): remove duplicate class * fix(button icon): fix linting errors * fix(button icon): remove duplicate example Co-authored-by: stephanie green <[email protected]> Co-authored-by: stephanie green <[email protected]>
1 parent bec3810 commit 3ce19f4

File tree

11 files changed

+227
-3
lines changed

11 files changed

+227
-3
lines changed

‎RELEASENOTES.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
- Removed `&_` shorthand from numerous selectors in SCSS files
77

88
## Components
9+
### [Button Icons](https://www.lightningdesignsystem.com/components/button-icons)
10+
#### Added
11+
- Added `slds-button_icon-large` to support a Large variant for contained button icons
12+
913
### [Buttons](https://www.lightningdesignsystem.com/components/buttons)
1014
#### Changed
1115
- Removed `vertical-align` from button non-base variants to create vertical alignment consistency among all the buttons.

‎ui/components/button-icons/RELEASENOTES.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44

55
<!-- ## [Unreleased] -->
66

7+
## 2.18.0
8+
9+
### Added
10+
11+
- Added `slds-button_icon-large` to support a Large variant for contained button icons
12+
713
## 2.15.0
814

915
### Added

‎ui/components/button-icons/base/_index.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,22 @@
193193
color: currentColor;
194194
}
195195

196+
/**
197+
* @summary Changes a button icon container to be 48x48px
198+
* @name large
199+
* @selector .slds-button_icon-large
200+
* @restrict .slds-button_icon
201+
* @group size
202+
*/
203+
.slds-button_icon-large,
204+
.slds-button--icon-large {
205+
@include square($square-icon-large-boundary);
206+
207+
.slds-button__icon {
208+
@include square($square-icon-utility-large);
209+
}
210+
}
211+
196212
/**
197213
* @summary Changes a button icon container to be 24x24px
198214
* @name small

‎ui/components/button-icons/base/_touch.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@
3333
@include square($button-icon-boundary-touch);
3434
}
3535

36+
.slds-button_icon-large,
37+
.slds-button--icon-large {
38+
@include square($button-icon-boundary-touch);
39+
}
40+
3641
.slds-button_icon-small,
3742
.slds-button--icon-small {
3843
@include square($button-icon-boundary-touch);

‎ui/components/button-icons/docs.mdx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,11 @@ import { MobileNotice, MobileBlurb } from '../../shared/doc-text';
4444

4545
## About Button Icons
4646

47-
Button icons are button elements that represent their behavior with an [icon](/components/icons) instead of text. The button itself should have the classes `slds-button` and `slds-button_icon`, while the svg icon has `slds-button__icon` on it.
47+
Button icons are button elements that represent their behavior with an [icon](/components/icons) instead of text. The button itself should have the classes `slds-button` and `slds-button_icon`, while the svg icon has `slds-button__icon` on it. Size modifiers can be added, the default sizing represents a medium variant.
4848

4949
Some styling variations require the button to receive additional 'container' classes that remove the button styling and/or add borders. See below for more detail.
5050

51+
5152
### Accessibility
5253

5354
If an icon button doesn’t include a label, use a `title` attribute to show on hover for sighted users, and a span with class `slds-assistive-text` to describe the button's action for screen readers.
@@ -213,7 +214,7 @@ The bare variant can be displayed in three other sizes—`large`, `small`, `x-sm
213214

214215
### Icon Container
215216

216-
Contained variants can be displayed in three smaller sizes—`small`, `x-small`, `xx-small`—by adding a sizing class on the `<button>`.
217+
Contained variants can be displayed in four other sizes—`large`, `small`, `x-small`, `xx-small`—by adding a sizing class on the `<button>`.
217218

218219
<CodeBlock toggleCode={false}>
219220
<button className="... slds-button_icon-{size}">...</button>
@@ -222,6 +223,11 @@ Contained variants can be displayed in three smaller sizes—`small`, `x-small`,
222223
<Example title="Sizes">
223224
<CodeView>
224225
<Fragment>
226+
<ButtonIcon
227+
className="slds-button_icon-border slds-button_icon-large"
228+
assistiveText="More options"
229+
title="More Options"
230+
/>
225231
<ButtonIcon
226232
className="slds-button_icon-border slds-button_icon-small"
227233
assistiveText="More options"

‎ui/components/button-icons/index.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ class ButtonIcon extends Component {
9696
},
9797
{
9898
'slds-button_icon-container': size === 'medium',
99+
'slds-button_icon-large': size === 'large',
99100
'slds-button_icon-small': size === 'small',
100101
'slds-button_icon-x-small': size === 'x-small',
101102
'slds-button_icon-xx-small': size === 'xx-small'

‎ui/components/button-icons/index.stories.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import * as BrandExamples from './brand/example';
66
import * as ButtonMenuExamples from './menu/example';
77
import * as InverseExamples from './inverse/example';
88
import * as StatefulExamples from './stateful/example';
9+
import * as SizingExamples from './sizing/example';
910
import * as TransparentContainerExamples from './transparent-container/example';
1011
import { generateStories } from '../../shared/helpers';
1112
import Docs from './docs.mdx';
@@ -18,6 +19,7 @@ const examples = [
1819
BrandExamples,
1920
ButtonMenuExamples,
2021
InverseExamples,
22+
SizingExamples,
2123
StatefulExamples,
2224
TransparentContainerExamples
2325
];

‎ui/components/button-icons/sizing/_index.scss

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
2+
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
3+
4+
/**
5+
* @summary Large size for button icon svg
6+
*
7+
* @name large
8+
* @selector .slds-button__icon_large
9+
* @restrict .slds-button__icon
10+
* @support dev-ready
11+
* @modifier
12+
* @group size
13+
*/
14+
15+
/**
16+
* @summary Small size for button icon svg
17+
*
18+
* @name small
19+
* @selector .slds-button__icon_small
20+
* @restrict .slds-button__icon
21+
* @support dev-ready
22+
* @modifier
23+
* @group size
24+
*/
25+
26+
/**
27+
* @summary X-Small size for button icon svg
28+
*
29+
* @name x-small
30+
* @selector .slds-button__icon_x-small
31+
* @restrict .slds-button__icon
32+
* @support dev-ready
33+
* @modifier
34+
* @group size
35+
*/
36+
37+
// CSS found in button-icons/base/_index.scss

‎ui/components/button-icons/sizing/example.jsx

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
2+
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
3+
4+
import React from 'react';
5+
import {Button} from '../../buttons/base/example';
6+
import SvgIcon from '../../../shared/svg-icon';
7+
8+
export default [
9+
{
10+
id: 'default',
11+
label: 'Button Icon – Default',
12+
element: (
13+
<Button className="slds-button slds-button_icon" title="More Options">
14+
<SvgIcon
15+
sprite="utility"
16+
symbol="settings"
17+
className="slds-button__icon"
18+
/>
19+
</Button>
20+
)
21+
}
22+
];
23+
24+
export let examples = [
25+
{
26+
id: 'button-icon-large',
27+
label: 'Bare - Size Large',
28+
element: (
29+
<Button className="slds-button slds-button_icon" title="More Options">
30+
<SvgIcon
31+
sprite="utility"
32+
symbol="settings"
33+
className="slds-button__icon slds-button__icon_large"
34+
/>
35+
</Button>
36+
)
37+
},
38+
{
39+
id: 'button-icon-small',
40+
label: 'Bare - Size Small',
41+
element: (
42+
<Button className="slds-button slds-button_icon" title="More Options">
43+
<SvgIcon
44+
sprite="utility"
45+
symbol="settings"
46+
className="slds-button__icon slds-button__icon_small"
47+
/>
48+
</Button>
49+
)
50+
},
51+
{
52+
id: 'button-icon-x-small',
53+
label: 'Bare - Size Extra Small',
54+
element: (
55+
<Button className="slds-button slds-button_icon" title="More Options">
56+
<SvgIcon
57+
sprite="utility"
58+
symbol="settings"
59+
className="slds-button__icon slds-button__icon_x-small"
60+
/>
61+
</Button>
62+
)
63+
},
64+
{
65+
id: 'button-icon-contained-large',
66+
label: 'Contained - Size Large',
67+
element: (
68+
<Button className="slds-button slds-button_icon slds-button_icon-border slds-button_icon-large" title="More Options">
69+
<SvgIcon
70+
sprite="utility"
71+
symbol="settings"
72+
className="slds-button__icon"
73+
/>
74+
</Button>
75+
)
76+
},
77+
{
78+
id: 'button-icon-contained-small',
79+
label: 'Contained - Size Small',
80+
element: (
81+
<Button className="slds-button slds-button_icon slds-button_icon-border slds-button_icon-small" title="More Options">
82+
<SvgIcon
83+
sprite="utility"
84+
symbol="settings"
85+
className="slds-button__icon"
86+
/>
87+
</Button>
88+
)
89+
},
90+
{
91+
id: 'button-icon-contained-x-small',
92+
label: 'Contained - Size Extra Small',
93+
element: (
94+
<Button className="slds-button slds-button_icon slds-button_icon-border slds-button_icon-x-small" title="More Options">
95+
<SvgIcon
96+
sprite="utility"
97+
symbol="settings"
98+
className="slds-button__icon"
99+
/>
100+
</Button>
101+
)
102+
},
103+
{
104+
id: 'button-icon-contained-xx-small',
105+
label: 'Contained - Size Extra Extra Small',
106+
element: (
107+
<Button className="slds-button slds-button_icon slds-button_icon-border slds-button_icon-xx-small" title="More Options">
108+
<SvgIcon
109+
sprite="utility"
110+
symbol="settings"
111+
className="slds-button__icon"
112+
/>
113+
</Button>
114+
)
115+
}
116+
];

‎ui/components/menus/dropdown/example.jsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -466,6 +466,37 @@ export default (
466466
);
467467

468468
export let examples = [
469+
{
470+
id: 'dropdown-menu-icon-large',
471+
label: 'Base - Size large',
472+
element: (
473+
<div style={{ width: '10rem' }}>
474+
<Trigger isOpen
475+
triggerIcon={
476+
<ButtonIcon
477+
className="slds-button_icon-border-filled"
478+
symbol="down"
479+
assistiveText="Show More"
480+
aria-haspopup="true"
481+
aria-expanded="true"
482+
title="Show More"
483+
size="large"
484+
/>
485+
}
486+
>
487+
<Menu className="slds-dropdown_left">
488+
<MenuList ariaLabel="Show More">
489+
<MenuItem tabIndex="0">Menu Item One</MenuItem>
490+
<MenuItem>Menu Item Two</MenuItem>
491+
<MenuItem>Menu Item Three</MenuItem>
492+
<li className="slds-has-divider_top-space" role="separator" />
493+
<MenuItem>Menu Item Four</MenuItem>
494+
</MenuList>
495+
</Menu>
496+
</Trigger>
497+
</div>
498+
)
499+
},
469500
{
470501
id: 'dropdown-menu-header',
471502
label: 'Sub Heading',

0 commit comments

Comments
 (0)