Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(radio-button-group, segmented control): add validationMessage, validationIcon, and status properties #8561

Merged
merged 22 commits into from
Jan 16, 2024
Merged

feat(radio-button-group, segmented control): add validationMessage, validationIcon, and status properties #8561

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
1f8f1b0
feat(radio-button-group): add validationMessage, validationIcon, and …
benelan Jan 5, 2024
66e39b2
feat(segmented-control): add validationMessage, validationIcon, and s…
benelan Jan 9, 2024
a2c0786
chore: cleanup
benelan Jan 9, 2024
fb698ef
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
benelan Jan 9, 2024
25dd6c8
chore: cleanup
benelan Jan 9, 2024
d5dfd37
chore: cleanup
benelan Jan 9, 2024
3f41180
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
benelan Jan 9, 2024
2c1f9c3
test: add properties to defaults/reflects
benelan Jan 10, 2024
51bccc8
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
benelan Jan 10, 2024
1e83a36
chore: clean
benelan Jan 10, 2024
8a3914b
Merge branch 'main' into benelan/radio-validation-message
benelan Jan 10, 2024
a563d5f
chore: cleanup
benelan Jan 10, 2024
3158a55
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
benelan Jan 10, 2024
9cf25c1
chore: cleanup segmented-control styling
benelan Jan 11, 2024
a4a0687
fix(radio-group): spacing above validation message
benelan Jan 11, 2024
8be513b
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
benelan Jan 11, 2024
0bdf838
test(radio-button-group): separate validation-message into a NoTest s…
benelan Jan 11, 2024
829acbd
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
benelan Jan 11, 2024
2e8bfce
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
benelan Jan 12, 2024
2dfb355
chore: cleanup
benelan Jan 13, 2024
f3c3955
chore: cleanup
benelan Jan 13, 2024
b3ebd59
Merge remote-tracking branch 'origin/main' into benelan/radio-validat…
benelan Jan 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3788,6 +3788,18 @@ export namespace Components {
* Sets focus on the fist focusable `calcite-radio-button` element in the component.
*/
"setFocus": () => Promise<void>;
/**
* Specifies the status of the input field, which determines message and icons.
*/
"status": Status;
/**
* Specifies the validation icon to display under the component.
*/
"validationIcon": string | boolean;
/**
* Specifies the validation message to display under the component.
*/
"validationMessage": string;
}
interface CalciteRating {
/**
Expand Down Expand Up @@ -11210,6 +11222,18 @@ declare namespace LocalJSX {
* @readonly
*/
"selectedItem"?: HTMLCalciteRadioButtonElement;
/**
* Specifies the status of the input field, which determines message and icons.
*/
"status"?: Status;
/**
* Specifies the validation icon to display under the component.
*/
"validationIcon"?: string | boolean;
/**
* Specifies the validation message to display under the component.
*/
"validationMessage"?: string;
}
interface CalciteRating {
/**
Expand Down
102 changes: 94 additions & 8 deletions packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { select } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
import { select, text } from "@storybook/addon-knobs";
import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
import { modesDarkDefault } from "../../../.storybook/utils";
import readme from "./readme.md";
import { html } from "../../../support/formatting";
import readme from "./readme.md";

export default {
title: "Components/Controls/Radio/Radio Button Group",
Expand All @@ -19,6 +19,9 @@ export const simple = (): string => html`
${boolean("hidden", false)}
layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
scale="${select("scale", ["s", "m", "l"], "m")}"
status="${select("status", ["idle", "invalid", "valid"], "idle")}"
validation-icon="${select("validation-icon", ["", ...iconNames], "")}"
validation-message="${text("validation-message", "")}"
>
<calcite-label layout="inline">
<calcite-radio-button value="react"></calcite-radio-button>
Expand All @@ -44,13 +47,14 @@ export const darkModeRTL_TestOnly = (): string => html`
class="calcite-mode-dark"
dir="rtl"
name="dark"
${boolean("disabled", false)}
${boolean("hidden", false)}
layout="${select("layout", ["horizontal", "vertical"], "horizontal")}"
scale="${select("scale", ["s", "m", "l"], "m")}"
layout="vertical"
scale="l"
status="valid"
validation-icon
validation-message="Thanks for not selecting Ember"
>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😭🔥

<calcite-label layout="inline">
<calcite-radio-button value="react"></calcite-radio-button>
<calcite-radio-button value="react" checked></calcite-radio-button>
React
</calcite-label>
<calcite-label layout="inline">
Expand All @@ -69,3 +73,85 @@ export const darkModeRTL_TestOnly = (): string => html`
`;

darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };

export const validationMessageVertical_TestOnly = (): string => html`
<style>
.container {
display: flex;
flex-direction: column;
width: 400px;
height: 200px;
gap: 20px;
}
</style>
<div class="container">
<calcite-radio-button-group
layout="horizontal"
name="validation"
required
scale="s"
status="invalid"
validation-icon
validation-message="Please select an option."
>
<calcite-label layout="inline" scale="s">
<calcite-radio-button value="one" scale="s"></calcite-radio-button>
One
</calcite-label>
<calcite-label layout="inline" scale="s">
<calcite-radio-button value="two" scale="s"></calcite-radio-button>
Two
</calcite-label>
<calcite-label layout="inline" scale="s">
<calcite-radio-button value="three" scale="s"></calcite-radio-button>
Three
</calcite-label>
</calcite-radio-button-group>

<calcite-radio-button-group
layout="horizontal"
name="validation"
required
scale="m"
status="invalid"
validation-icon
validation-message="Please select an option."
>
<calcite-label layout="inline" scale="m">
<calcite-radio-button value="one" scale="m"></calcite-radio-button>
One
</calcite-label>
<calcite-label layout="inline" scale="m">
<calcite-radio-button value="two" scale="m"></calcite-radio-button>
Two
</calcite-label>
<calcite-label layout="inline" scale="m">
<calcite-radio-button value="three" scale="m"></calcite-radio-button>
Three
</calcite-label>
</calcite-radio-button-group>

<calcite-radio-button-group
layout="horizontal"
name="validation"
required
scale="l"
status="invalid"
validation-icon
validation-message="Please select an option."
>
<calcite-label layout="inline" scale="l">
<calcite-radio-button value="one" scale="l"></calcite-radio-button>
One
</calcite-label>
<calcite-label layout="inline" scale="l">
<calcite-radio-button value="two" scale="l"></calcite-radio-button>
Two
</calcite-label>
<calcite-label layout="inline" scale="l">
<calcite-radio-button value="three" scale="l"></calcite-radio-button>
Three
</calcite-label>
</calcite-radio-button-group>
</div>
`;
20 changes: 19 additions & 1 deletion packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,14 @@ import {
Watch,
} from "@stencil/core";
import { createObserver } from "../../utils/observers";
import { Layout, Scale } from "../interfaces";
import { Layout, Scale, Status } from "../interfaces";
import {
componentFocusable,
LoadableComponent,
setComponentLoaded,
setUpLoadableComponent,
} from "../../utils/loadable";
import { Validation } from "../functional/Validation";

/**
* @slot - A slot for adding `calcite-radio-button`s.
Expand Down Expand Up @@ -76,6 +77,15 @@ export class RadioButtonGroup implements LoadableComponent {
/** Specifies the size of the component. */
@Prop({ reflect: true }) scale: Scale = "m";

/** Specifies the status of the input field, which determines message and icons. */
@Prop({ reflect: true }) status: Status = "idle";

/** Specifies the validation message to display under the component. */
@Prop() validationMessage: string;

/** Specifies the validation icon to display under the component. */
@Prop() validationIcon: string | boolean;

@Watch("scale")
onScaleChange(): void {
this.passPropsToRadioButtons();
Expand Down Expand Up @@ -192,6 +202,14 @@ export class RadioButtonGroup implements LoadableComponent {
return (
<Host role="radiogroup">
<slot />
{this.validationMessage ? (
<Validation
icon={this.validationIcon}
message={this.validationMessage}
scale={this.scale}
status={this.status}
/>
) : null}
</Host>
);
}
Expand Down
156 changes: 155 additions & 1 deletion packages/calcite-components/src/demos/radio-button-group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,13 +400,90 @@
</div>
</div>

<!-- validation message displayed due to required property -->
<div class="parent-flex">
<div class="child-flex right-aligned-text">Validation message displayed due to required property</div>

<div class="child-flex">
<calcite-radio-button-group
name="validationMessageRequiredHorizontal-s"
layout="horizontal"
required
status="invalid"
validation-icon
validation-message="Please select an option."
>
<calcite-label layout="inline" scale="s">
<calcite-radio-button value="stencil" scale="s"></calcite-radio-button>
Stencil
</calcite-label>
<calcite-label layout="inline" scale="s">
<calcite-radio-button value="react" scale="s"></calcite-radio-button>
React
</calcite-label>
<calcite-label layout="inline" scale="s">
<calcite-radio-button value="ember" scale="s"></calcite-radio-button>
Ember
</calcite-label>
</calcite-radio-button-group>
</div>

<div class="child-flex">
<calcite-radio-button-group
name="validationMessageRequiredHorizontal-m"
layout="horizontal"
required
status="invalid"
validation-icon
validation-message="Please select an option."
>
<calcite-label layout="inline" scale="m">
<calcite-radio-button value="stencil" scale="m"></calcite-radio-button>
Stencil
</calcite-label>
<calcite-label layout="inline">
<calcite-radio-button value="react" scale="m"></calcite-radio-button>
React
</calcite-label>
<calcite-label layout="inline" scale="m">
<calcite-radio-button value="ember" scale="m"></calcite-radio-button>
Ember
</calcite-label>
</calcite-radio-button-group>
</div>

<div class="child-flex">
<calcite-radio-button-group
name="validationMessageRequiredHorizontal-l"
layout="horizontal"
required
status="invalid"
validation-icon
validation-message="Please select an option."
>
<calcite-label layout="inline" scale="l">
<calcite-radio-button value="stencil" scale="l"></calcite-radio-button>
Stencil
</calcite-label>
<calcite-label layout="inline" scale="l">
<calcite-radio-button value="react" scale="l"></calcite-radio-button>
React
</calcite-label>
<calcite-label layout="inline" scale="l">
<calcite-radio-button value="ember" scale="l"></calcite-radio-button>
Ember
</calcite-label>
</calcite-radio-button-group>
</div>
</div>

<hr />

<!--
**************************************************
* VERTICAL LAYOUT
**************************************************
-->
-->
<div class="parent-flex">
<div class="child-flex right-aligned-text">Default</div>

Expand Down Expand Up @@ -750,6 +827,83 @@
</calcite-radio-button-group>
</div>
</div>

<!-- validation message displayed due to required property -->
<div class="parent-flex">
<div class="child-flex right-aligned-text">Validation message displayed due to required property</div>

<div class="child-flex">
<calcite-radio-button-group
name="validationMessageRequiredVertical-s"
layout="vertical"
required
status="invalid"
validation-icon
validation-message="Please select an option."
>
<calcite-label layout="inline" scale="s">
<calcite-radio-button value="stencil" scale="s"></calcite-radio-button>
Stencil
</calcite-label>
<calcite-label layout="inline" scale="s">
<calcite-radio-button value="react" scale="s"></calcite-radio-button>
React
</calcite-label>
<calcite-label layout="inline" scale="s">
<calcite-radio-button value="ember" scale="s"></calcite-radio-button>
Ember
</calcite-label>
</calcite-radio-button-group>
</div>

<div class="child-flex">
<calcite-radio-button-group
name="validationMessageRequiredVertical-m"
layout="vertical"
required
status="invalid"
validation-icon
validation-message="Please select an option."
>
<calcite-label layout="inline" scale="m">
<calcite-radio-button value="stencil" scale="m"></calcite-radio-button>
Stencil
</calcite-label>
<calcite-label layout="inline">
<calcite-radio-button value="react" scale="m"></calcite-radio-button>
React
</calcite-label>
<calcite-label layout="inline" scale="m">
<calcite-radio-button value="ember" scale="m"></calcite-radio-button>
Ember
</calcite-label>
</calcite-radio-button-group>
</div>

<div class="child-flex">
<calcite-radio-button-group
name="validationMessageRequiredVertical-l"
layout="vertical"
required
status="invalid"
validation-icon
validation-message="Please select an option."
>
<calcite-label layout="inline" scale="l">
<calcite-radio-button value="stencil" scale="l"></calcite-radio-button>
Stencil
</calcite-label>
<calcite-label layout="inline" scale="l">
<calcite-radio-button value="react" scale="l"></calcite-radio-button>
React
</calcite-label>
<calcite-label layout="inline" scale="l">
<calcite-radio-button value="ember" scale="l"></calcite-radio-button>
Ember
</calcite-label>
</calcite-radio-button-group>
</div>
</div>
</demo-dom-swapper>
</body>
</html>
Loading