Skip to content

Commit e3dc23c

Browse files
gvreddy04gvreddy04
authored
Callout updates (#589)
* Callout updates.
1 parent 1aa3412 commit e3dc23c

File tree

12 files changed

+180
-169
lines changed

12 files changed

+180
-169
lines changed

‎BlazorBootstrap.Demo.RCL/Pages/Callout/CalloutDocumentation.razor‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,18 @@
1414
<SectionHeading Size="HeadingSize.H4" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
1515
<Demo Type="typeof(Callout_Demo_01_Examples)" />
1616

17-
<SectionHeading Size="HeadingSize.H4" Text="Custom callout heading" PageUrl="@pageUrl" HashTagName="custom-callout-heading" />
17+
<SectionHeading Size="HeadingSize.H4" Text="Custom heading" PageUrl="@pageUrl" HashTagName="custom-heading" />
1818
<Demo Type="typeof(Callout_Demo_02_Change_Heading)" />
1919

2020
<SectionHeading Size="HeadingSize.H4" Text="Large text" PageUrl="@pageUrl" HashTagName="large-text" />
2121
<Demo Type="typeof(Callout_Demo_03_Large_Text)" />
2222

23+
<SectionHeading Size="HeadingSize.H4" Text="Hide heading" PageUrl="@pageUrl" HashTagName="hide-heading" />
24+
<Demo Type="typeof(Callout_Demo_04_Hide_Heading)" />
25+
2326
@code {
2427
private string pageUrl = "/callout";
2528
private string title = "Blazor Callout Component";
2629
private string description = "Blazor Bootstrap callout component provides content presentation in a visually distinct manner.";
27-
private string imageUrl = "https://i.imgur.com/e9wy7fg.jpg";
30+
private string imageUrl = "https://i.imgur.com/y2jI9ix.png";
2831
}

‎BlazorBootstrap.Demo.RCL/Pages/Callout/Callout_Demo_01_Examples.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<Callout>
2-
<strong>This is an default callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
2+
<strong>This is a default callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
33
</Callout>
44

55
<Callout Type="CalloutType.Danger">

‎BlazorBootstrap.Demo.RCL/Pages/Callout/Callout_Demo_02_Change_Heading.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<Callout Heading="Important">
2-
<strong>This is an default callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
2+
<strong>This is a default callout</strong>. Example text to show it in action. See <a href="https://blazorbootstrap.com/docs/components/callout">callout documentation</a>.
33
</Callout>
44

55
<Callout Type="CalloutType.Danger" Heading="Important">

‎BlazorBootstrap.Demo.RCL/Pages/Callout/Callout_Demo_04_Hide_Heading.razor‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Callout HideHeading="true">
2+
<h4>Conveying meaning to assistive technologies</h4>
3+
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
4+
</Callout>
5+
6+
<Callout Type="CalloutType.Danger" HideHeading="true">
7+
<h4>Conveying meaning to assistive technologies</h4>
8+
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
9+
</Callout>
10+
11+
<Callout Type="CalloutType.Warning" HideHeading="true">
12+
<h4>Conveying meaning to assistive technologies</h4>
13+
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
14+
</Callout>
15+
16+
<Callout Type="CalloutType.Info" HideHeading="true">
17+
<h4>Conveying meaning to assistive technologies</h4>
18+
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
19+
</Callout>
20+
21+
<Callout Type="CalloutType.Tip" HideHeading="true">
22+
<h4>Conveying meaning to assistive technologies</h4>
23+
<p>Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the <code>.visually-hidden</code> class.</p>
24+
</Callout>

‎blazorbootstrap/Components/Callout/Callout.razor‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
@inherits BlazorBootstrapComponentBase
33

44
<div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" tabindex="-1" @attributes="@Attributes">
5-
<div class="@CalloutHeadingCSSClass mb-2">
6-
<strong>
7-
<Icon Name="iconName" class="me-2"></Icon>@heading
8-
</strong>
9-
</div>
5+
@if (!HideHeading)
6+
{
7+
<div class="@CalloutHeadingCssClass mb-2">
8+
<strong>
9+
<Icon Name="iconName" class="me-2"></Icon>@heading
10+
</strong>
11+
</div>
12+
}
1013
<div>
1114
@ChildContent
1215
</div>

‎blazorbootstrap/Components/Callout/Callout.razor.cs‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,21 @@ protected override void BuildClasses()
1818
base.BuildClasses();
1919
}
2020

21-
private string GetHeading() =>
22-
string.IsNullOrWhiteSpace(Heading)
23-
? type switch
24-
{
25-
CalloutType.Default => "NOTE",
26-
CalloutType.Info => "INFO",
27-
CalloutType.Warning => "WARNING",
28-
CalloutType.Danger => "DANGER",
29-
CalloutType.Tip => "TIP",
30-
_ => ""
31-
}
32-
: Heading;
21+
private string GetHeading()
22+
{
23+
if (!string.IsNullOrWhiteSpace(Heading))
24+
return Heading;
25+
26+
return type switch
27+
{
28+
CalloutType.Default => "NOTE",
29+
CalloutType.Info => "INFO",
30+
CalloutType.Warning => "WARNING",
31+
CalloutType.Danger => "DANGER",
32+
CalloutType.Tip or CalloutType.Success => "TIP",
33+
_ => ""
34+
};
35+
}
3336

3437
private IconName GetIconName() =>
3538
type switch
@@ -38,7 +41,7 @@ private IconName GetIconName() =>
3841
CalloutType.Info => IconName.InfoCircleFill,
3942
CalloutType.Warning => IconName.ExclamationTriangleFill,
4043
CalloutType.Danger => IconName.Fire,
41-
CalloutType.Tip => IconName.Lightbulb,
44+
CalloutType.Tip or CalloutType.Success => IconName.Lightbulb,
4245
_ => IconName.InfoCircleFill
4346
};
4447

@@ -49,7 +52,7 @@ private IconName GetIconName() =>
4952
/// <inheritdoc />
5053
protected override bool ShouldAutoGenerateId => true;
5154

52-
private string CalloutHeadingCSSClass => BootstrapClassProvider.CalloutHeading;
55+
private string CalloutHeadingCssClass => BootstrapClassProvider.CalloutHeading;
5356

5457
/// <summary>
5558
/// Specifies the content to be rendered inside this.
@@ -65,6 +68,12 @@ private IconName GetIconName() =>
6568
[Parameter]
6669
public string? Heading { get; set; }
6770

71+
/// <summary>
72+
/// Gets or sets a value indicating whether to hide the callout heading.
73+
/// </summary>
74+
[Parameter]
75+
public bool HideHeading { get; set; }
76+
6877
private IconName iconName => GetIconName();
6978

7079
/// <summary>

‎blazorbootstrap/Components/Callout/Callout.razor.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.bb-callout {
2+
--bs-link-color-rgb: var(--bb-callout-link);
3+
--bs-code-color: var(--bb-callout-code-color);
4+
padding: 1.25rem;
5+
margin-top: 1.25rem;
6+
margin-bottom: 1.25rem;
7+
color: var(--bb-callout-color, inherit);
8+
background-color: var(--bb-callout-bg, var(--bs-gray-100));
9+
border-left: 0.25rem solid var(--bb-callout-border, var(--bs-gray-300))
10+
}
11+
12+
.bb-callout h4 {
13+
margin-bottom: .25rem;
14+
}
15+
16+
.bb-callout > :last-child {
17+
margin-bottom: 0 !important;
18+
}
19+
20+
.bb-callout + .bb-callout {
21+
margin-top: -.25rem;
22+
}
23+
24+
.bb-callout .highlight {
25+
background-color: rgba(0,0,0,0.05)
26+
}
27+
28+
.bb-callout-info {
29+
--bb-callout-color: var(--bs-info-text-emphasis);
30+
--bb-callout-bg: var(--bs-info-bg-subtle);
31+
--bb-callout-border: var(--bs-info-border-subtle)
32+
}
33+
34+
.bb-callout-warning {
35+
--bb-callout-color: var(--bs-warning-text-emphasis);
36+
--bb-callout-bg: var(--bs-warning-bg-subtle);
37+
--bb-callout-border: var(--bs-warning-border-subtle)
38+
}
39+
40+
.bb-callout-danger {
41+
--bb-callout-color: var(--bs-danger-text-emphasis);
42+
--bb-callout-bg: var(--bs-danger-bg-subtle);
43+
--bb-callout-border: var(--bs-danger-border-subtle)
44+
}
45+
46+
.bb-callout-success {
47+
--bb-callout-color: var(--bs-success-text-emphasis);
48+
--bb-callout-bg: var(--bs-success-bg-subtle);
49+
--bb-callout-border: var(--bs-success-border-subtle)
50+
}

‎blazorbootstrap/Enums/Color/CalloutColor.cs‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,11 @@ public enum CalloutType
2828
/// <summary>
2929
/// Success color.
3030
/// </summary>
31-
Tip
31+
[Obsolete("This enum value is obsolete. Use `Success` instead.")]
32+
Tip,
33+
34+
/// <summary>
35+
/// Success color.
36+
/// </summary>
37+
Success
3238
}

‎blazorbootstrap/Utilities/BootstrapClassProvider.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ public static string ToCalloutType(CalloutType type) =>
237237
BlazorBootstrap.CalloutType.Danger => $"{Callout}-danger",
238238
BlazorBootstrap.CalloutType.Warning => $"{Callout}-warning",
239239
BlazorBootstrap.CalloutType.Info => $"{Callout}-info",
240-
BlazorBootstrap.CalloutType.Tip => $"{Callout}-success",
240+
BlazorBootstrap.CalloutType.Tip or BlazorBootstrap.CalloutType.Success => $"{Callout}-success",
241241
_ => ""
242242
};
243243

‎blazorbootstrap/wwwroot/blazor.bootstrap.css‎

Lines changed: 7 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@
5050
/* table */
5151
--bb-table-sticky-background-color: #fff;
5252
--bb-table-freeze-column-background-color: #efefef;
53+
/* callout */
54+
--bb-callout-link: 10, 88, 202;
55+
--bb-callout-code-color: #ab296a;
5356
}
5457

5558
/* preload */
@@ -75,120 +78,6 @@
7578
z-index: var(--bb-confirm-dialog-backdrop-z-index) !important;
7679
}
7780

78-
/* callout */
79-
.bb-callout {
80-
padding: 1.25rem;
81-
margin-top: 1.25rem;
82-
margin-bottom: 1.25rem;
83-
border-left: 0.25rem solid rgba(var(--bs-dark-rgb), .5);
84-
background-color: rgba(var(--bs-dark-rgb), .075);
85-
border-radius: .25rem;
86-
}
87-
88-
.bb-callout h4 {
89-
margin-bottom: .25rem;
90-
}
91-
92-
.bb-callout p:last-child {
93-
margin-bottom: 0 !important;
94-
}
95-
96-
.bb-callout code {
97-
border: 0.1rem solid rgba(0, 0, 0, .05);
98-
color: rgba(var(--bs-dark-rgb), 1);
99-
background-color: rgba(var(--bs-dark-rgb), .15);
100-
border-radius: .25rem;
101-
padding: 0.1rem;
102-
padding-left: 0.3rem;
103-
padding-right: 0.3rem;
104-
}
105-
106-
.bb-callout a {
107-
color: rgba(var(--bs-dark-rgb), 1);
108-
font-weight: 600;
109-
text-decoration: none;
110-
}
111-
112-
.bb-callout a:hover {
113-
text-decoration: underline;
114-
}
115-
116-
.bb-callout + .bb-callout {
117-
margin-top: -.25rem;
118-
}
119-
120-
.bb-callout-info {
121-
border-left: 0.25rem solid rgba(var(--bs-info-rgb), .5);
122-
background-color: rgba(var(--bs-info-rgb), .075);
123-
}
124-
125-
.bb-callout-info .bb-callout-heading {
126-
color: rgba(var(--bs-info-rgb), 0.75);
127-
}
128-
129-
.bb-callout-info code {
130-
color: rgba(var(--bs-info-rgb), 1);
131-
background-color: rgba(var(--bs-info-rgb), .15);
132-
}
133-
134-
.bb-callout-info a {
135-
color: rgba(var(--bs-info-rgb), 1);
136-
}
137-
138-
.bb-callout-warning {
139-
border-left: 0.25rem solid rgba(var(--bs-warning-rgb), .5);
140-
background-color: rgba(var(--bs-warning-rgb), .075);
141-
}
142-
143-
.bb-callout-warning .bb-callout-heading {
144-
color: rgba(var(--bs-warning-rgb), 0.75);
145-
}
146-
147-
.bb-callout-warning code {
148-
color: rgba(var(--bs-warning-rgb), 1);
149-
background-color: rgba(var(--bs-warning-rgb), .15);
150-
}
151-
152-
.bb-callout-warning a {
153-
color: rgba(var(--bs-warning-rgb), 1);
154-
}
155-
156-
.bb-callout-danger {
157-
border-left: 0.25rem solid rgba(var(--bs-danger-rgb), .5);
158-
background-color: rgba(var(--bs-danger-rgb), .075);
159-
}
160-
161-
.bb-callout-danger .bb-callout-heading {
162-
color: rgba(var(--bs-danger-rgb), 0.75);
163-
}
164-
165-
.bb-callout-danger code {
166-
color: rgba(var(--bs-danger-rgb), 1);
167-
background-color: rgba(var(--bs-danger-rgb), .15);
168-
}
169-
170-
.bb-callout-danger a {
171-
color: rgba(var(--bs-danger-rgb), 1);
172-
}
173-
174-
.bb-callout-success {
175-
border-left: 0.25rem solid rgba(var(--bs-success-rgb), .5);
176-
background-color: rgba(var(--bs-success-rgb), .075);
177-
}
178-
179-
.bb-callout-success .bb-callout-heading {
180-
color: rgba(var(--bs-success-rgb), 0.75);
181-
}
182-
183-
.bb-callout-success code {
184-
color: rgba(var(--bs-success-rgb), 1);
185-
background-color: rgba(var(--bs-success-rgb), .15);
186-
}
187-
188-
.bb-callout-success a {
189-
color: rgba(var(--bs-success-rgb), 1);
190-
}
191-
19281
/* offcanvas */
19382
.offcanvas-footer {
19483
display: flex;
@@ -276,22 +165,15 @@ table > thead > tr:nth-child(2) > th.freeze-column {
276165
/* freeze column left */
277166
/* th: row-1 */
278167
table > thead > tr > th:not(.freeze-column-right):first-child.freeze-column {
279-
box-shadow: inset 1px 0 0 var(--bs-table-border-color),
280-
inset 0 1px 0 var(--bs-table-border-color),
281-
inset 0 -1px 0 var(--bs-table-border-color);
168+
box-shadow: inset 1px 0 0 var(--bs-table-border-color), inset 0 1px 0 var(--bs-table-border-color), inset 0 -1px 0 var(--bs-table-border-color);
282169
}
283170

284171
table > thead > tr > th:not(.freeze-column-right).freeze-column {
285-
box-shadow: inset 1px 0 0 var(--bs-table-border-color),
286-
inset -1px 0 0 var(--bs-table-border-color),
287-
inset 0 1px 0 var(--bs-table-border-color),
288-
inset 0 -1px 0 var(--bs-table-border-color);
172+
box-shadow: inset 1px 0 0 var(--bs-table-border-color), inset -1px 0 0 var(--bs-table-border-color), inset 0 1px 0 var(--bs-table-border-color), inset 0 -1px 0 var(--bs-table-border-color);
289173
}
290174

291175
table > thead > tr > th:not(.freeze-column-right):last-child.freeze-column {
292-
box-shadow: inset 1px 0 0 var(--bs-table-border-color),
293-
inset 0 -1px 0 var(--bs-table-border-color),
294-
inset -1px 0 0 var(--bs-table-border-color);
176+
box-shadow: inset 1px 0 0 var(--bs-table-border-color), inset 0 -1px 0 var(--bs-table-border-color), inset -1px 0 0 var(--bs-table-border-color);
295177
}
296178

297179
/* th: row-2 */
@@ -623,7 +505,7 @@ main {
623505
}
624506

625507
/* range */
626-
.bb-form-range-input{
508+
.bb-form-range-input {
627509
appearance: auto !important;
628510
}
629511

0 commit comments

Comments
 (0)