Skip to content

Commit

Permalink
fix(Label): prevent line break between text and required asterisk in …
Browse files Browse the repository at this point in the history 
…Label component
  • Loading branch information
@karinasigartau0798 @cipak
karinasigartau0798 authored and cipak committed Mar 8, 2022
1 parent e046def commit c4b7279
Show file tree
Hide file tree
Showing 7 changed files with 90 additions and 29 deletions.
36 changes: 27 additions & 9 deletions src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
First Name
</span>
<span
Expand Down Expand Up @@ -169,7 +171,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Last Name
</span>
<span
Expand Down Expand Up @@ -217,7 +221,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Email
</span>
<span
Expand Down Expand Up @@ -264,7 +270,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Room type
</span>
<span
Expand Down Expand Up @@ -330,7 +338,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Number of Guests
</span>
<span
Expand Down Expand Up @@ -502,7 +512,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Arrival Date
</span>
<span
Expand Down Expand Up @@ -566,7 +578,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Arrival Time
</span>
<span
Expand Down Expand Up @@ -615,7 +629,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Departure Date
</span>
<span
Expand Down Expand Up @@ -662,7 +678,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Free pickup?
</span>
<span
Expand Down
8 changes: 6 additions & 2 deletions ...eetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Your name
</span>
</label>
Expand Down Expand Up @@ -70,7 +72,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Meeting password (required)
</span>
</label>
Expand Down
4 changes: 3 additions & 1 deletion ...xMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Host key (required)
</span>
</label>
Expand Down
8 changes: 6 additions & 2 deletions .../adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
What is your first name?
</span>
</label>
Expand Down Expand Up @@ -98,7 +100,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
What is your last name?
</span>
</label>
Expand Down
56 changes: 42 additions & 14 deletions ...s/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Default Input.ChoiceSet label (compact)
</span>
</label>
Expand Down Expand Up @@ -82,7 +84,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Required Input.ChoiceSet label (compact)
</span>
<span
Expand Down Expand Up @@ -148,7 +152,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Default Input.ChoiceSet label (expanded)
</span>
</label>
Expand Down Expand Up @@ -216,7 +222,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Required Input.ChoiceSet label (expanded)
</span>
<span
Expand Down Expand Up @@ -285,7 +293,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Default Input.ChoiceSet label (expanded, multiselect)
</span>
</label>
Expand Down Expand Up @@ -347,7 +357,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Required Input.ChoiceSet label (compact, multiselect)
</span>
<span
Expand Down Expand Up @@ -640,7 +652,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Enter a number between 1 and 10
</span>
</label>
Expand Down Expand Up @@ -900,7 +914,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
style: email
</span>
</label>
Expand Down Expand Up @@ -942,7 +958,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
style: tel
</span>
</label>
Expand Down Expand Up @@ -984,7 +1002,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
style: url
</span>
</label>
Expand Down Expand Up @@ -1026,7 +1046,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
style: password
</span>
</label>
Expand Down Expand Up @@ -1238,7 +1260,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Start time
</span>
</label>
Expand Down Expand Up @@ -1280,7 +1304,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
End time
</span>
<span
Expand Down Expand Up @@ -1327,7 +1353,9 @@ Array [
htmlFor="wxc-0-control"
id="wxc-0-label"
>
<span>
<span
className="wxc-label__text"
>
Night time
</span>
</label>
Expand Down
2 changes: 1 addition & 1 deletion src/components/inputs/Label/Label.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function Label({
// disabling label-has-associated-control as eslint does not see role attribute as a nested control
// eslint-disable-next-line jsx-a11y/label-has-associated-control
<label className={sc('label-text')} htmlFor={`${id}-control`} id={`${id}-label`}>
<span>{label}</span>
<span className={sc('text')}>{label}</span>
{required && <span className={sc('required')}> *</span>}
</label>
)
Expand Down
5 changes: 5 additions & 0 deletions src/components/inputs/Label/Label.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-label;
color: var(--wxc-text-color);
font-size: 0.875rem;
margin: 0 0 0.25rem 0.8125rem;
white-space: nowrap;
}

&__text {
white-space: normal;
}

&__required {
Expand Down

0 comments on commit c4b7279

Please sign in to comment.