Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(button, fab): adjust padding on 'l' scale button to accommodate 'm' scale icon without change in height #5659

Merged
merged 35 commits into from
Nov 9, 2022
Merged

fix(button, fab): adjust padding on 'l' scale button to accommodate 'm' scale icon without change in height #5659

Changes from 4 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
e08c1a1
fix(button, fab): adjust padding on large scale button to accomodate …
Elijbet Oct 27, 2022
58b2198
when icon on either side is present in the slotted content, shrink th…
Elijbet Oct 28, 2022
8db9d2a
for 'l' transparent buttons (w/t borders) shrink the padding if icon …
Elijbet Oct 28, 2022
8f44441
Merge branch 'master' into elijbet/5245-l-scale-button/fab-retain-exi…
Elijbet Oct 28, 2022
f96c512
new CSS properties
Elijbet Nov 1, 2022
64a5352
new classes to handle padding based on whether button has icons prese…
Elijbet Nov 1, 2022
286c805
css to handle default appearance and padding for buttons with icons a…
Elijbet Nov 1, 2022
ce395ca
not handling the invalid option for appearance, assuming user uses av…
Elijbet Nov 1, 2022
db4f791
cleanup
Elijbet Nov 1, 2022
75eca06
stepStory to cover visual scale variations
Elijbet Nov 1, 2022
b25b0ed
cleanup
Elijbet Nov 1, 2022
42d5b55
Merge branch 'master' of github.com:Esri/calcite-components
Elijbet Nov 1, 2022
c0fac2f
Merge branch 'master' into elijbet/5245-l-scale-button/fab-retain-exi…
Elijbet Nov 1, 2022
bf14dc6
remove addressing an invalid appearance option and simplify code
Elijbet Nov 2, 2022
656456a
Merge branch 'master' of github.com:Esri/calcite-components
Elijbet Nov 2, 2022
2e64913
Merge branch 'master' into elijbet/5245-l-scale-button/fab-retain-exi…
Elijbet Nov 2, 2022
381fbe1
Merge branch 'master' of github.com:Esri/calcite-components
Elijbet Nov 3, 2022
9867d4f
Merge branch 'master' into elijbet/5245-l-scale-button/fab-retain-exi…
Elijbet Nov 3, 2022
aec4c78
cleanup
Elijbet Nov 3, 2022
3509982
Merge branch 'master' of github.com:Esri/calcite-components
Elijbet Nov 3, 2022
87f6028
Merge branch 'master' into elijbet/5245-l-scale-button/fab-retain-exi…
Elijbet Nov 3, 2022
9695b2d
Merge branch 'master' of github.com:Esri/calcite-components
Elijbet Nov 3, 2022
d276f02
Merge branch 'master' of github.com:Esri/calcite-components
Elijbet Nov 4, 2022
5dd458d
Merge branch 'master' of github.com:Esri/calcite-components
Elijbet Nov 5, 2022
afdc8a6
Merge branch 'master' into elijbet/5245-l-scale-button/fab-retain-exi…
eriklharper Nov 7, 2022
70c880f
Merge branch 'master' of github.com:Esri/calcite-components
Elijbet Nov 8, 2022
ca8cdf0
Merge branch 'master' into elijbet/5245-l-scale-button/fab-retain-exi…
Elijbet Nov 8, 2022
9661413
Merge branch 'elijbet/5245-l-scale-button/fab-retain-existing-height-…
Elijbet Nov 8, 2022
b3bb9d0
Merge branch 'master' of github.com:Esri/calcite-components
Elijbet Nov 8, 2022
9f34cda
Merge branch 'master' into elijbet/5245-l-scale-button/fab-retain-exi…
Elijbet Nov 8, 2022
4467463
Merge branch 'master' of github.com:Esri/calcite-components
Elijbet Nov 8, 2022
0733df0
Merge branch 'master' into elijbet/5245-l-scale-button/fab-retain-exi…
Elijbet Nov 8, 2022
3d822c2
Merge branch 'master' into elijbet/5245-l-scale-button/fab-retain-exi…
Elijbet Nov 9, 2022
c002c17
cleanup
Elijbet Nov 9, 2022
f200cad
cleanup
Elijbet Nov 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions src/components/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -659,12 +659,26 @@
:host([scale="l"]:not([appearance="transparent"])) a.content--slotted {
--calcite-button-padding-y: 11px;
}
//for 'l' solid buttons shrink the padding if icon is present to preserve the height
:host([scale="l"][icon-start]:not([appearance="transparent"])) button.content--slotted,
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
:host([scale="l"][icon-end]:not([appearance="transparent"])) button.content--slotted,
:host([scale="l"][icon-start]:not([appearance="transparent"])) a.content--slotted,
:host([scale="l"][icon-end]:not([appearance="transparent"])) a.content--slotted {
--calcite-button-padding-y: 9px;
}
// accommodate for transparent buttons not having borders
:host([scale="l"][appearance="transparent"]) button.content--slotted,
:host([scale="l"][appearance="transparent"]) a.content--slotted {
--calcite-button-padding-x: theme("padding.4");
--calcite-button-padding-y: theme("padding.3");
}
//for 'l' transparent buttons (w/t borders) shrink the padding if icon is present to preserve the height
:host([scale="l"][icon-start][appearance="transparent"]) button.content--slotted,
:host([scale="l"][icon-end][appearance="transparent"]) button.content--slotted,
:host([scale="l"][icon-start][appearance="transparent"]) a.content--slotted,
:host([scale="l"][icon-end][appearance="transparent"]) a.content--slotted {
--calcite-button-padding-y: theme("padding[2.5]");
}

// generate fab scales (scenario: 1 icon, ie., should be square)
:host([scale="s"]) button:not(.content--slotted),
Expand Down