Skip to content

Commit a982cc4

Browse files
author
mkrause
committed
Banner: update styling.
1 parent 45812ae commit a982cc4

File tree

3 files changed

+69
-162
lines changed

3 files changed

+69
-162
lines changed

‎src/components/containers/Banner/Banner.module.scss

Lines changed: 47 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
--bk-banner-color-foreground: #{bk.$theme-banner-informational-border-default};
1212
--bk-banner-color-background: #{bk.$theme-banner-informational-background-default};
1313
--bk-banner-border-radius: #{bk.$radius-2};
14-
--bk-banner-indent: 30px;
14+
--bk-banner-indent: #{bk.$spacing-9};
1515

1616
overflow: hidden;
1717

@@ -26,7 +26,8 @@
2626

2727
display: flex;
2828
flex-direction: row;
29-
align-items: center;
29+
align-items: flex-start;
30+
gap: bk.$spacing-4;
3031

3132
min-width: 0;
3233

@@ -41,93 +42,82 @@
4142
display: flex;
4243
flex-flow: row wrap;
4344
gap: bk.$spacing-1;
44-
//@include bk.text-one-line;
4545

4646
.bk-banner__title {
47-
margin-inline-start: calc(-1 * var(--bk-banner-indent));
47+
margin-inline-start: calc(-1 * (bk.$spacing-2 + 1.125em));
4848

4949
min-width: 0;
5050
display: flex;
5151
flex-direction: row;
5252
gap: bk.$spacing-2;
5353
align-items: center;
5454

55-
//@include bk.text-one-line;
5655
font-weight: bk.$font-weight-semibold;
5756

58-
.bk-banner__title__text {
59-
@include bk.text-one-line;
60-
}
61-
6257
.bk-banner__title__icon {
63-
flex-shrink: 0;
6458
color: var(--bk-banner-color-foreground);
6559
}
60+
61+
.bk-banner__title__text {
62+
@include bk.text-one-line;
63+
}
6664
}
6765

6866
.bk-banner__message {
6967
--keep: ;
7068
}
7169
}
7270

73-
.bk-banner__button {
74-
padding: 0;
75-
margin-right: bk.$spacing-5;
76-
}
77-
78-
.bk-banner__action {
79-
height: bk.$spacing-5;
71+
.bk-banner__actions {
72+
display: flex;
73+
flex-flow: row-reverse wrap;
74+
align-items: center;
75+
gap: bk.$spacing-1 bk.$spacing-7;
8076

81-
button {
82-
border: 0;
83-
font-weight: bk.$font-weight-semibold;
84-
padding-bottom: 0;
85-
padding-top: 0;
77+
> * {
78+
// Keep each item to a max of 1lh, so that in the case of all items being on one line, all the items
79+
// are properly aligned with the title (which implicitly has height `1lh`).
80+
max-height: 1lh;
8681
}
87-
}
88-
89-
.bk-banner__close-button {
90-
flex-shrink: 0;
9182

92-
color: bk.$theme-banner-icon-default;
93-
font-size: 1.2em;
94-
padding: bk.$spacing-1;
83+
.bk-banner__action {
84+
display: flex;
85+
flex-direction: row;
86+
align-items: center;
87+
88+
button {
89+
border: 0;
90+
font-weight: bk.$font-weight-semibold;
91+
padding: 0;
92+
}
93+
}
94+
95+
.bk-banner__close-button {
96+
flex: none;
97+
98+
display: flex;
99+
100+
font-size: 1.2em;
101+
color: bk.$theme-banner-icon-default;
102+
}
95103
}
96104

97-
98105
// Variants
99-
/*
100106
&.bk-banner--informational {
101-
background-color: bk.$theme-banner-informational-background-default;
102-
border-color: bk.$theme-banner-informational-border-default;
103-
.bk-banner__icon {
104-
color: bk.$color-blueberry-400;
105-
}
106-
}
107-
108-
&.bk-banner--success {
109-
background-color: bk.$theme-banner-success-background-default;
110-
border-color: bk.$theme-banner-success-border-default;
111-
.bk-banner__icon {
112-
color: bk.$color-apple-400;
113-
}
107+
--bk-banner-color-foreground: #{bk.$theme-banner-informational-border-default};
108+
--bk-banner-color-background: #{bk.$theme-banner-informational-background-default};
114109
}
115-
116110
&.bk-banner--warning {
117-
background-color: bk.$theme-banner-warning-background-default;
118-
border-color: bk.$theme-banner-warning-border-default;
119-
.bk-banner__icon {
120-
color: bk.$color-orange-400;
121-
}
111+
--bk-banner-color-foreground: #{bk.$theme-banner-warning-border-default};
112+
--bk-banner-color-background: #{bk.$theme-banner-warning-background-default};
122113
}
123-
124114
&.bk-banner--error {
125-
background-color: bk.$theme-banner-alert-background-default;
126-
border-color: bk.$theme-banner-alert-border-default;
127-
.bk-banner__icon {
128-
color: bk.$color-cherry-400;
129-
}
115+
--bk-banner-color-foreground: #{bk.$theme-banner-alert-border-default};
116+
--bk-banner-color-background: #{bk.$theme-banner-alert-background-default};
117+
}
118+
&.bk-banner--success {
119+
--bk-banner-color-foreground: #{bk.$theme-banner-success-border-default};
120+
--bk-banner-color-background: #{bk.$theme-banner-success-background-default};
130121
}
131-
*/
132122
}
133123
}

‎src/components/containers/Banner/Banner.stories.tsx

Lines changed: 11 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -98,127 +98,41 @@ export const BannerWithTitleOverflowAndTextWrap: Story = {
9898
};
9999

100100
export const BannerInformational: Story = {
101-
name: 'Success',
102101
args: {
103-
title: 'Banner title',
104-
closeButton: true,
105102
variant: 'informational',
106-
},
107-
};
108-
109-
export const BannerSuccess: Story = {
110-
name: 'Success',
111-
args: {
112-
title: 'Banner title',
103+
title: loremIpsum(),
104+
message: <LoremIpsum/>,
113105
closeButton: true,
114-
variant: 'success',
115-
},
116-
};
117-
118-
export const BannerSuccessWithNoCloseButton: Story = {
119-
name: 'Success with no close button',
120-
args: {
121-
title: 'Banner title',
122-
closeButton: false,
123-
variant: 'success',
106+
actions: <BannerActionExample/>,
124107
},
125108
};
126109

127-
export const BannerSuccessWithMessage: Story = {
128-
name: 'Success with message',
110+
export const BannerSuccess: Story = {
129111
args: {
130-
title: 'Banner title',
131-
message: 'Message',
132-
closeButton: true,
133112
variant: 'success',
134-
},
135-
};
136-
137-
export const BannerSuccessWithButton: Story = {
138-
name: 'Success with button',
139-
args: {
140-
title: 'Banner',
141-
message: 'Message text',
113+
title: loremIpsum(),
114+
message: <LoremIpsum/>,
142115
closeButton: true,
143-
variant: 'success',
144116
actions: <BannerActionExample/>,
145117
},
146118
};
147119

148120
export const BannerWarning: Story = {
149-
name: 'Warning',
150121
args: {
151-
title: 'Banner title',
152-
closeButton: true,
153122
variant: 'warning',
154-
},
155-
};
156-
157-
export const BannerWarningWithNoCloseButton: Story = {
158-
name: 'Warning with no close button',
159-
args: {
160-
title: 'Banner title',
161-
closeButton: false,
162-
variant: 'warning',
163-
},
164-
};
165-
166-
export const BannerWarningWithMessage: Story = {
167-
name: 'Warning with message',
168-
args: {
169-
title: 'Banner title',
170-
message: 'Message',
171-
closeButton: true,
172-
variant: 'warning',
173-
},
174-
};
175-
176-
export const BannerWarningWithButton: Story = {
177-
name: 'Warning with button',
178-
args: {
179-
title: 'Banner',
180-
message: 'Message text',
123+
title: loremIpsum(),
124+
message: <LoremIpsum/>,
181125
closeButton: true,
182-
variant: 'warning',
183126
actions: <BannerActionExample/>,
184127
},
185128
};
186129

187-
export const BannerAlert: Story = {
188-
name: 'Alert',
130+
export const BannerError: Story = {
189131
args: {
190-
title: 'Banner title',
191-
closeButton: true,
192132
variant: 'error',
193-
},
194-
};
195-
196-
export const BannerAlertWithNoCloseButton: Story = {
197-
name: 'Alert with no close button',
198-
args: {
199-
title: 'Banner title',
200-
closeButton: false,
201-
variant: 'error',
202-
},
203-
};
204-
205-
export const BannerAlertWithMessage: Story = {
206-
name: 'Alert with message',
207-
args: {
208-
title: 'Banner title',
209-
message: 'Message',
210-
closeButton: true,
211-
variant: 'error',
212-
},
213-
};
214-
215-
export const BannerAlertWithButton: Story = {
216-
name: 'Alert with button',
217-
args: {
218-
title: 'Banner',
219-
message: 'Message text',
133+
title: loremIpsum(),
134+
message: <LoremIpsum/>,
220135
closeButton: true,
221-
variant: 'error',
222136
actions: <BannerActionExample/>,
223137
},
224138
};

‎src/components/containers/Banner/Banner.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,9 @@ export const Banner = (props: BannerProps) => {
8181

8282
return (
8383
<div
84-
role="alert" // Note: if the banner is not time-sensitive, this may need to be overridden (depends on use case)
84+
// Note: `role=alert` implies the banner is time-sensitive. If the banner is not time-sensitive, this may need to
85+
// be overridden with a more appropriate role (depends on use case).
86+
role="alert"
8587
{...propsRest}
8688
className={cx(
8789
'bk',
@@ -100,13 +102,14 @@ export const Banner = (props: BannerProps) => {
100102
}
101103
</div>
102104

103-
{actions}
104-
105-
{closeButton &&
106-
<Button className={cl['bk-banner__close-button']} onPress={onClose} aria-label="Close banner">
107-
<Icon icon="cross"/>
108-
</Button>
109-
}
105+
<div className={cl['bk-banner__actions']}>
106+
{closeButton &&
107+
<Button unstyled className={cl['bk-banner__close-button']} onPress={onClose} aria-label="Close banner">
108+
<Icon icon="cross"/>
109+
</Button>
110+
}
111+
{actions}
112+
</div>
110113
</div>
111114
);
112115
};

0 commit comments

Comments
 (0)