Skip to content

Commit b131759

Browse files
OksamiesOksamies
authored
Merge pull request #1406 from thunderstore-io/03-14-combine_button_and_iconbutton_styles
Combine Button and IconButton styles
2 parents 90ebdd9 + 60f5bae commit b131759

File tree

16 files changed

+106
-517
lines changed

16 files changed

+106
-517
lines changed

‎apps/cyberstorm-remix/app/commonComponents/Navigation/Navigation.tsx

+12-6
Original file line numberDiff line numberDiff line change
@@ -160,13 +160,16 @@ export function Navigation(props: {
160160
{currentUser?.username ? (
161161
<span className="navigation-header__profile-actions">
162162
<NewButton
163-
icon={faUpload}
164163
primitiveType="link"
165164
href={`${domain}/package/create/`}
166165
csVariant="secondary"
167-
csModifiers={["ghost"]}
166+
csModifiers={["ghost", "only-icon"]}
168167
tooltipText="Upload"
169-
/>
168+
>
169+
<NewIcon csMode="inline" noWrapper>
170+
<FontAwesomeIcon icon={faUpload} />
171+
</NewIcon>
172+
</NewButton>
170173
</span>
171174
) : null}
172175

@@ -439,9 +442,12 @@ export function MobileNavigationMenu({ domain }: { domain: string }) {
439442
aria-label="Back to previous menu"
440443
csSize="medium"
441444
csVariant="secondary"
442-
csModifiers={["ghost"]}
443-
icon={faLongArrowLeft}
444-
/>
445+
csModifiers={["ghost", "only-icon"]}
446+
>
447+
<NewIcon csMode="inline" noWrapper>
448+
<FontAwesomeIcon icon={faLongArrowLeft} />
449+
</NewIcon>
450+
</NewButton>
445451
}
446452
>
447453
<nav className="mobile-navigation__popover__popover">

‎apps/cyberstorm-remix/app/p/packageListing.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -476,9 +476,12 @@ export default function PackageListing() {
476476
)
477477
}
478478
tooltipText="Like"
479-
icon={faThumbsUp}
480479
csVariant={isLiked ? "success" : "secondary"}
481-
/>
480+
>
481+
<NewIcon csMode="inline" noWrapper>
482+
<FontAwesomeIcon icon={faThumbsUp} />
483+
</NewIcon>
484+
</NewButton>
482485
{/* <ReportButton onClick={TODO} /> */}
483486
<NewButton
484487
primitiveType="cyberstormLink"

‎apps/cyberstorm-storybook/stories/newComponents/Button.stories.tsx

-87
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@ import {
77
ButtonModifiersList,
88
ButtonSizesList,
99
ButtonVariantsList,
10-
IconButtonModifiersList,
11-
IconButtonSizesList,
12-
IconButtonVariantsList,
1310
} from "@thunderstore/cyberstorm-theme/src/components";
1411

1512
const meta = {
@@ -117,88 +114,6 @@ const Template: StoryFn<typeof NewButton> = () => {
117114
);
118115
}
119116

120-
function genIconButtons(isLink: boolean) {
121-
const IconButtons = IconButtonSizesList.map((size) => {
122-
const variantBlock = IconButtonVariantsList.map((variant) => {
123-
const modifierBlock = IconButtonModifiersList.map((modifier) => {
124-
return isLink ? (
125-
<NewButton
126-
primitiveType={"link"}
127-
href="https://example.com"
128-
key={`${size}-${variant}-${modifier}`}
129-
csVariant={variant}
130-
csSize={size}
131-
csModifiers={[modifier]}
132-
icon={faChevronDown}
133-
/>
134-
) : (
135-
<NewButton
136-
key={`${size}-${variant}-${modifier}`}
137-
csVariant={variant}
138-
csSize={size}
139-
csModifiers={[modifier]}
140-
icon={faChevronDown}
141-
/>
142-
);
143-
});
144-
return (
145-
<div
146-
key={`${size}-${variant}`}
147-
style={{
148-
display: "flex",
149-
flexDirection: "row",
150-
gap: "0.5rem",
151-
}}
152-
>
153-
{isLink ? (
154-
<NewButton
155-
primitiveType={"link"}
156-
href="https://example.com"
157-
key={`${size}-${variant}-noModifier`}
158-
csVariant={variant}
159-
csSize={size}
160-
icon={faChevronDown}
161-
/>
162-
) : (
163-
<NewButton
164-
key={`${size}-${variant}-noModifier`}
165-
csVariant={variant}
166-
csSize={size}
167-
icon={faChevronDown}
168-
/>
169-
)}
170-
171-
{modifierBlock}
172-
</div>
173-
);
174-
});
175-
return (
176-
<div
177-
key={`${size}`}
178-
style={{
179-
display: "flex",
180-
flexDirection: "column",
181-
gap: "0.5rem",
182-
}}
183-
>
184-
{variantBlock}
185-
</div>
186-
);
187-
});
188-
189-
return (
190-
<div
191-
style={{
192-
display: "flex",
193-
flexDirection: "column",
194-
gap: "0.5rem",
195-
}}
196-
>
197-
{IconButtons}
198-
</div>
199-
);
200-
}
201-
202117
return (
203118
<div
204119
style={{
@@ -209,9 +124,7 @@ const Template: StoryFn<typeof NewButton> = () => {
209124
}}
210125
>
211126
{genButtons(false)}
212-
{genIconButtons(false)}
213127
{genButtons(true)}
214-
{genIconButtons(true)}
215128
</div>
216129
);
217130
};

‎packages/cyberstorm-theme/src/components.tsx

-8
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,6 @@ export {
66
type ButtonModifiers,
77
ButtonModifiersList,
88
} from "./components/Button/Button";
9-
export {
10-
type IconButtonVariants,
11-
IconButtonVariantsList,
12-
type IconButtonSizes,
13-
IconButtonSizesList,
14-
type IconButtonModifiers,
15-
IconButtonModifiersList,
16-
} from "./components/Button/IconButton";
179
export {
1810
type HeadingVariants,
1911
HeadingVariantsList,

‎packages/cyberstorm-theme/src/components/Button/Button.css

+54
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
--button-border-radius: var(--button-xs-border-radius);
1717
--button-font-size: var(--button-xs-font-size);
1818
--button-gap: var(--button-xs-gap);
19+
--button-icon-inline-size: var(--button-xs-icon-inline-size);
1920
}
2021

2122
.button:where(.button--size--small) {
@@ -25,6 +26,7 @@
2526
--button-border-radius: var(--button-sm-border-radius);
2627
--button-font-size: var(--button-sm-font-size);
2728
--button-gap: var(--button-sm-gap);
29+
--button-icon-inline-size: var(--button-sm-icon-inline-size);
2830
}
2931

3032
.button:where(.button--size--medium) {
@@ -34,6 +36,7 @@
3436
--button-border-radius: var(--button-md-border-radius);
3537
--button-font-size: var(--button-md-font-size);
3638
--button-gap: var(--button-md-gap);
39+
--button-icon-inline-size: var(--button-md-icon-inline-size);
3740
}
3841

3942
.button:where(.button--size--big) {
@@ -43,59 +46,70 @@
4346
--button-border-radius: var(--button-lg-border-radius);
4447
--button-font-size: var(--button-lg-font-size);
4548
--button-gap: var(--button-lg-gap);
49+
--button-icon-inline-size: var(--button-lg-icon-inline-size);
4650
}
4751

4852
/* VARIANTS DEFAULT STATE */
4953
.button:where(.button--variant--primary) {
5054
--button-background-color: var(--button-primary-bg-color--default);
5155
--button-text-color: var(--button-primary-text-color--default);
56+
--button-icon-color: var(--button-primary-icon-color--default);
5257

5358
&:where(:hover),
5459
&[data-state="open"] {
5560
--button-background-color: var(--button-primary-bg-color--hover);
5661
--button-text-color: var(--button-primary-text-color--hover);
62+
--button-icon-color: var(--button-primary-icon-color--hover);
5763
}
5864

5965
&:where(:active) {
6066
--button-background-color: var(--button-primary-bg-color--active);
6167
--button-text-color: var(--button-primary-text-color--active);
68+
--button-icon-color: var(--button-primary-icon-color--active);
6269
}
6370
}
6471

6572
.button:where(.button--variant--secondary) {
6673
--button-background-color: var(--button-secondary-bg-color--default);
6774
--button-text-color: var(--button-secondary-text-color--default);
75+
--button-icon-color: var(--button-secondary-icon-color--default);
6876

6977
&:where(:hover),
7078
&[data-state="open"] {
7179
--button-background-color: var(--button-secondary-bg-color--hover);
7280
--button-text-color: var(--button-secondary-text-color--hover);
81+
--button-icon-color: var(--button-secondary-icon-color--hover);
7382
}
7483

7584
&:where(:active) {
7685
--button-background-color: var(--button-secondary-bg-color--active);
7786
--button-text-color: var(--button-secondary-text-color--active);
87+
--button-icon-color: var(--button-secondary-icon-color--active);
7888
}
7989
}
8090

8191
.button:where(.button--variant--accent) {
8292
--button-background-color: var(--button-accent-bg-color--default);
8393
--button-text-color: var(--button-accent-text-color--default);
94+
--button-icon-color: var(--button-accent-icon-color--default);
8495

8596
&:where(:hover),
8697
&[data-state="open"] {
8798
--button-background-color: var(--button-accent-bg-color--hover);
8899
--button-text-color: var(--button-accent-text-color--hover);
100+
--button-icon-color: var(--button-accent-icon-color--hover);
89101
}
90102

91103
&:where(:active) {
92104
--button-background-color: var(--button-accent-bg-color--active);
93105
--button-text-color: var(--button-accent-text-color--active);
106+
--button-icon-color: var(--button-accent-icon-color--active);
94107
}
95108
}
96109

97110
.button:where(.button--variant--special) {
98111
--button-text-color: var(--button-special-text-color--default);
112+
--button-icon-color: var(--button-special-icon-color--default);
99113
--button-border: var(--button-special-border--default);
100114
--button-border-color: var(--button-special-border-color--default);
101115

@@ -104,6 +118,7 @@
104118
&:where(:hover),
105119
&[data-state="open"] {
106120
--button-text-color: var(--button-special-text-color--hover);
121+
--button-icon-color: var(--button-special-icon-color--hover);
107122
--button-border: var(--button-special-border--hover);
108123
--button-border-color: var(--button-special-border-color--hover);
109124

@@ -112,6 +127,7 @@
112127

113128
&:where(:active) {
114129
--button-text-color: var(--button-special-text-color--active);
130+
--button-icon-color: var(--button-special-icon-color--active);
115131
--button-border: var(--button-special-border--active);
116132
--button-border-color: var(--button-special-border-color--active);
117133

@@ -122,64 +138,76 @@
122138
.button:where(.button--variant--success) {
123139
--button-background-color: var(--button-success-bg-color--default);
124140
--button-text-color: var(--button-success-text-color--default);
141+
--button-icon-color: var(--button-success-icon-color--default);
125142

126143
&:where(:hover),
127144
&[data-state="open"] {
128145
--button-background-color: var(--button-success-bg-color--hover);
129146
--button-text-color: var(--button-success-text-color--hover);
147+
--button-icon-color: var(--button-success-icon-color--hover);
130148
}
131149

132150
&:where(:active) {
133151
--button-background-color: var(--button-success-bg-color--active);
134152
--button-text-color: var(--button-success-text-color--active);
153+
--button-icon-color: var(--button-success-icon-color--active);
135154
}
136155
}
137156

138157
.button:where(.button--variant--info) {
139158
--button-background-color: var(--button-info-bg-color--default);
140159
--button-text-color: var(--button-info-text-color--default);
160+
--button-icon-color: var(--button-info-icon-color--default);
141161

142162
&:where(:hover),
143163
&[data-state="open"] {
144164
--button-background-color: var(--button-info-bg-color--hover);
145165
--button-text-color: var(--button-info-text-color--hover);
166+
--button-icon-color: var(--button-info-icon-color--hover);
146167
}
147168

148169
&:where(:active) {
149170
--button-background-color: var(--button-info-bg-color--active);
150171
--button-text-color: var(--button-info-text-color--active);
172+
--button-icon-color: var(--button-info-icon-color--active);
151173
}
152174
}
153175

154176
.button:where(.button--variant--warning) {
155177
--button-background-color: var(--button-warning-bg-color--default);
156178
--button-text-color: var(--button-warning-text-color--default);
179+
--button-icon-color: var(--button-warning-icon-color--default);
157180

158181
&:where(:hover),
159182
&[data-state="open"] {
160183
--button-background-color: var(--button-warning-bg-color--hover);
161184
--button-text-color: var(--button-warning-text-color--hover);
185+
--button-icon-color: var(--button-warning-icon-color--hover);
162186
}
163187

164188
&:where(:active) {
165189
--button-background-color: var(--button-warning-bg-color--active);
166190
--button-text-color: var(--button-warning-text-color--active);
191+
--button-icon-color: var(--button-warning-icon-color--active);
167192
}
168193
}
169194

170195
.button:where(.button--variant--danger) {
171196
--button-background-color: var(--button-danger-bg-color--default);
172197
--button-text-color: var(--button-danger-text-color--default);
198+
--button-icon-color: var(--button-danger-icon-color--default);
173199

174200
&:where(:hover),
175201
&[data-state="open"] {
176202
--button-background-color: var(--button-danger-bg-color--hover);
177203
--button-text-color: var(--button-danger-text-color--hover);
204+
--button-icon-color: var(--button-danger-icon-color--hover);
178205
}
179206

180207
&:where(:active) {
181208
--button-background-color: var(--button-danger-bg-color--active);
182209
--button-text-color: var(--button-danger-text-color--active);
210+
--button-icon-color: var(--button-danger-icon-color--active);
183211
}
184212
}
185213

@@ -200,4 +228,30 @@
200228
opacity: 0.5;
201229
pointer-events: none;
202230
}
231+
232+
.button:where(.button--only-icon) {
233+
&:where(.button--size--xsmall) {
234+
--button-height: var(--button-xs-height);
235+
--button-width: var(--button-xs-height);
236+
--button-icon-inline-size: var(--button-xs-icon-inline-size--only-icon);
237+
}
238+
239+
&:where(.button--size--small) {
240+
--button-height: var(--button-sm-height);
241+
--button-width: var(--button-sm-height);
242+
--button-icon-inline-size: var(--button-sm-icon-inline-size--only-icon);
243+
}
244+
245+
&:where(.button--size--medium) {
246+
--button-height: var(--button-md-height);
247+
--button-width: var(--button-md-height);
248+
--button-icon-inline-size: var(--button-md-icon-inline-size--only-icon);
249+
}
250+
251+
&:where(.button--size--big) {
252+
--button-height: var(--button-lg-height);
253+
--button-width: var(--button-lg-height);
254+
--button-icon-inline-size: var(--button-lg-icon-inline-size--only-icon);
255+
}
256+
}
203257
}

0 commit comments

Comments
 (0)