Skip to content

Commit ce1c587

Browse files
mrholekmrholek
committed
refactor(CButton): remove the default color
1 parent 805da02 commit ce1c587

File tree

17 files changed

+157
-132
lines changed

17 files changed

+157
-132
lines changed

‎packages/coreui-react/src/components/button/CButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const CButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, CButton
6464
{
6565
children,
6666
className,
67-
color = 'primary',
67+
color,
6868
component = 'button',
6969
shape,
7070
size,

‎packages/docs/content/components/card.mdx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ Below is an example of a basic card with mixed content and a fixed width. Cards
5050
<CCardText>
5151
Some quick example text to build on the card title and make up the bulk of the card's content.
5252
</CCardText>
53-
<CButton href="#">Go somewhere</CButton>
53+
<CButton color="primary" href="#">Go somewhere</CButton>
5454
</CCardBody>
5555
</CCard>
5656
```
@@ -175,7 +175,7 @@ Add an optional header and/or footer within a card.
175175
<CCardBody>
176176
<CCardTitle>Special title treatment</CCardTitle>
177177
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
178-
<CButton href="#">Go somewhere</CButton>
178+
<CButton color="primary" href="#">Go somewhere</CButton>
179179
</CCardBody>
180180
</CCard>
181181
```
@@ -188,7 +188,7 @@ Card headers can be styled by adding ex. `component="h5"`.
188188
<CCardBody>
189189
<CCardTitle>Special title treatment</CCardTitle>
190190
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
191-
<CButton href="#">Go somewhere</CButton>
191+
<CButton color="primary" href="#">Go somewhere</CButton>
192192
</CCardBody>
193193
</CCard>
194194
```
@@ -213,7 +213,7 @@ Card headers can be styled by adding ex. `component="h5"`.
213213
<CCardBody>
214214
<CCardTitle>Special title treatment</CCardTitle>
215215
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
216-
<CButton href="#">Go somewhere</CButton>
216+
<CButton color="primary" href="#">Go somewhere</CButton>
217217
</CCardBody>
218218
<CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
219219
</CCard>
@@ -236,7 +236,7 @@ Using the grid, wrap cards in columns and rows as needed.
236236
<CCardText>
237237
With supporting text below as a natural lead-in to additional content.
238238
</CCardText>
239-
<CButton href="#">Go somewhere</CButton>
239+
<CButton color="primary" href="#">Go somewhere</CButton>
240240
</CCardBody>
241241
</CCard>
242242
</CCol>
@@ -247,7 +247,7 @@ Using the grid, wrap cards in columns and rows as needed.
247247
<CCardText>
248248
With supporting text below as a natural lead-in to additional content.
249249
</CCardText>
250-
<CButton href="#">Go somewhere</CButton>
250+
<CButton color="primary" href="#">Go somewhere</CButton>
251251
</CCardBody>
252252
</CCard>
253253
</CCol>
@@ -263,14 +263,14 @@ Use some of [available sizing utilities](https://coreui.io/docs/utilities/sizing
263263
<CCardBody>
264264
<CCardTitle>Card title</CCardTitle>
265265
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
266-
<CButton href="#">Go somewhere</CButton>
266+
<CButton color="primary" href="#">Go somewhere</CButton>
267267
</CCardBody>
268268
</CCard>
269269
<CCard className="w-50">
270270
<CCardBody>
271271
<CCardTitle>Card title</CCardTitle>
272272
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
273-
<CButton href="#">Go somewhere</CButton>
273+
<CButton color="primary" href="#">Go somewhere</CButton>
274274
</CCardBody>
275275
</CCard>
276276
```
@@ -284,7 +284,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
284284
<CCardBody>
285285
<CCardTitle>Special title treatment</CCardTitle>
286286
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
287-
<CButton href="#">Go somewhere</CButton>
287+
<CButton color="primary" href="#">Go somewhere</CButton>
288288
</CCardBody>
289289
</CCard>
290290
```
@@ -298,21 +298,21 @@ You can instantly change the text arrangement of any card—in its whole or spec
298298
<CCardBody>
299299
<CCardTitle>Special title treatment</CCardTitle>
300300
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
301-
<CButton href="#">Go somewhere</CButton>
301+
<CButton color="primary" href="#">Go somewhere</CButton>
302302
</CCardBody>
303303
</CCard>
304304
<CCard className="text-center" style={{width: '18rem'}}>
305305
<CCardBody>
306306
<CCardTitle>Special title treatment</CCardTitle>
307307
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
308-
<CButton href="#">Go somewhere</CButton>
308+
<CButton color="primary" href="#">Go somewhere</CButton>
309309
</CCardBody>
310310
</CCard>
311311
<CCard className="text-end" style={{width: '18rem'}}>
312312
<CCardBody>
313313
<CCardTitle>Special title treatment</CCardTitle>
314314
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
315-
<CButton href="#">Go somewhere</CButton>
315+
<CButton color="primary" href="#">Go somewhere</CButton>
316316
</CCardBody>
317317
</CCard>
318318
```
@@ -339,7 +339,7 @@ Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
339339
<CCardBody>
340340
<CCardTitle>Special title treatment</CCardTitle>
341341
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
342-
<CButton href="#">Go somewhere</CButton>
342+
<CButton color="primary" href="#">Go somewhere</CButton>
343343
</CCardBody>
344344
</CCard>
345345
```
@@ -362,7 +362,7 @@ Add some navigation to a `<CCardHeader>` with our `<CNav>` component.
362362
<CCardBody>
363363
<CCardTitle>Special title treatment</CCardTitle>
364364
<CCardText>With supporting text below as a natural lead-in to additional content.</CCardText>
365-
<CButton href="#">Go somewhere</CButton>
365+
<CButton color="primary" href="#">Go somewhere</CButton>
366366
</CCardBody>
367367
</CCard>
368368
```

‎packages/docs/content/components/collapse.mdx

Lines changed: 61 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,19 @@ export const BasicExample = () => {
3131
const [visible, setVisible] = useState(false)
3232
return (
3333
<>
34-
<CButton href="#" onClick={(event) => {
35-
event.preventDefault()
36-
setVisible(!visible)
37-
}}>
34+
<CButton
35+
color="primary"
36+
href="#"
37+
onClick={(event) => {
38+
event.preventDefault()
39+
setVisible(!visible)
40+
}}
41+
>
3842
Link
3943
</CButton>
40-
<CButton onClick={() => setVisible(!visible)}>Button</CButton>
44+
<CButton color="primary" onClick={() => setVisible(!visible)}>
45+
Button
46+
</CButton>
4147
<CCollapse visible={visible}>
4248
<CCard className="mt-3">
4349
<CCardBody>
@@ -59,13 +65,19 @@ export const BasicExample = () => {
5965
const [visible, setVisible] = useState(false)
6066
return (
6167
<>
62-
<CButton href="#" onClick={(event) => {
63-
event.preventDefault()
64-
setVisible(!visible)
65-
}}>
68+
<CButton
69+
color="primary"
70+
href="#"
71+
onClick={(event) => {
72+
event.preventDefault()
73+
setVisible(!visible)
74+
}}
75+
>
6676
Link
6777
</CButton>
68-
<CButton onClick={() => setVisible(!visible)}>Button</CButton>
78+
<CButton color="primary" onClick={() => setVisible(!visible)}>
79+
Button
80+
</CButton>
6981
<CCollapse visible={visible}>
7082
<CCard className="mt-3">
7183
<CCardBody>
@@ -87,12 +99,21 @@ export const HorizontalExample = () => {
8799
const [visible, setVisible] = useState(false)
88100
return (
89101
<>
90-
<CButton className="mb-3" onClick={() => setVisible(!visible)} aria-expanded={visible} aria-controls="collapseWidthExample">Button</CButton>
91-
<div style={{ minHeight: '120px'}}>
102+
<CButton
103+
color="primary"
104+
className="mb-3"
105+
onClick={() => setVisible(!visible)}
106+
aria-expanded={visible}
107+
aria-controls="collapseWidthExample"
108+
>
109+
Button
110+
</CButton>
111+
<div style={{ minHeight: '120px' }}>
92112
<CCollapse id="collapseWidthExample" horizontal visible={visible}>
93-
<CCard style={{width: '300px'}}>
113+
<CCard style={{ width: '300px' }}>
94114
<CCardBody>
95-
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
115+
This is some placeholder content for a horizontal collapse. It's hidden by default and
116+
shown when triggered.
96117
</CCardBody>
97118
</CCard>
98119
</CCollapse>
@@ -109,12 +130,20 @@ export const HorizontalExample = () => {
109130
const [visible, setVisible] = useState(false)
110131
return (
111132
<>
112-
<CButton className="mb-3" onClick={() => setVisible(!visible)} aria-expanded={visible} aria-controls="collapseWidthExample">Button</CButton>
113-
<div style={{ minHeight: '120px'}}>
133+
<CButton
134+
className="mb-3"
135+
onClick={() => setVisible(!visible)}
136+
aria-expanded={visible}
137+
aria-controls="collapseWidthExample"
138+
>
139+
Button
140+
</CButton>
141+
<div style={{ minHeight: '120px' }}>
114142
<CCollapse id="collapseWidthExample" horizontal visible={visible}>
115-
<CCard style={{width: '300px'}}>
143+
<CCard style={{ width: '300px' }}>
116144
<CCardBody>
117-
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
145+
This is some placeholder content for a horizontal collapse. It's hidden by default and
146+
shown when triggered.
118147
</CCardBody>
119148
</CCard>
120149
</CCollapse>
@@ -132,9 +161,14 @@ export const MultipleTargetsExample = () => {
132161
const [visibleB, setVisibleB] = useState(false)
133162
return (
134163
<>
135-
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
136-
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
164+
<CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
165+
Toggle first element
166+
</CButton>
167+
<CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
168+
Toggle second element
169+
</CButton>
137170
<CButton
171+
color="primary"
138172
onClick={() => {
139173
setVisibleA(!visibleA)
140174
setVisibleB(!visibleB)
@@ -179,9 +213,14 @@ const [visibleA, setVisibleA] = useState(false)
179213
const [visibleB, setVisibleB] = useState(false)
180214
return (
181215
<>
182-
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
183-
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
216+
<CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
217+
Toggle first element
218+
</CButton>
219+
<CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
220+
Toggle second element
221+
</CButton>
184222
<CButton
223+
color="primary"
185224
onClick={() => {
186225
setVisibleA(!visibleA)
187226
setVisibleB(!visibleB)

‎packages/docs/content/components/dropdown.mdx

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -528,29 +528,7 @@ Place any freeform text within a dropdown menu with text. Note that you'll likel
528528
529529
Put a form within a dropdown menu, or make it into a dropdown menu.
530530
531-
<Example>
532-
<CDropdownMenu>
533-
<CForm className="px-4 py-4">
534-
<div className="mb-3">
535-
<CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
536-
<CFormInput type="email" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
537-
</div>
538-
<div className="mb-3">
539-
<CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
540-
<CFormInput type="password" id="exampleDropdownFormPassword1" placeholder="Password" />
541-
</div>
542-
<div className="mb-3">
543-
<CFormCheck id="dropdownCheck" label="Remember me" />
544-
</div>
545-
<CButton type="submit">Sign in</CButton>
546-
</CForm>
547-
<CDropdownDivider />
548-
<CDropdownItem href="#">New around here? Sign up</CDropdownItem>
549-
<CDropdownItem href="#">Forgot password?</CDropdownItem>
550-
</CDropdownMenu>
551-
</Example>
552-
553-
```jsx
531+
```jsx preview
554532
<CDropdownMenu>
555533
<CForm className="px-4 py-4">
556534
<div className="mb-3">
@@ -564,7 +542,7 @@ Put a form within a dropdown menu, or make it into a dropdown menu.
564542
<div className="mb-3">
565543
<CFormCheck id="dropdownCheck" label="Remember me" />
566544
</div>
567-
<CButton type="submit">Sign in</CButton>
545+
<CButton color="primary" type="submit">Sign in</CButton>
568546
</CForm>
569547
<CDropdownDivider />
570548
<CDropdownItem href="#">New around here? Sign up</CDropdownItem>

0 commit comments

Comments
 (0)