Skip to content

Commit aacdec5

Browse files
marissahuysentruytmarissahuysentruyt
authored
docs(dial,dialog,divider,dropindicator): Migrate docs to storybook pt7 (#2833)
* docs(dial): add missing stories and chromatic coverage * chore(tray): corrects variable spelling (isDismissible) * docs(dropindicator): add dropindicator template for docs page * docs(divider): add missing stories and template fixes - adds static color stories, a sizing story and vertical story - removes customStyles arg from default args because they were overwriting other styles that are dependent on the orientation (i.e. vertical) - refactors chromatic coverage to reflect removal of custom styles in default template * docs(dialog): add missing stories, template fixes, chromatic coverage - adds all sizing stories, with hero, no divider, fullscreen/fullscreen- takeover, scorlling example stories - refactors template to accommodate buttons when the dialog is dismissible (no buttons based on guidance/documentation), vs. non- dismissible - adds test coverage example for new stories - fixes sizing template issues in Variants() for showModal: false - renames heading for dialog arg to dialogHeading (to avoid variable naming conflicts between the component and Sizing function used within Variants()) * docs(dialog): revert dialogHeading arg name change revert arg name "dialogHeading" back to "heading." It's a known issue that the Variant() function is mixing the dialog's heading arg with the Sizing() heading arg. That refactoring and fix will be done in a new branch. * chore(dial): extends isFocused shared state instead of deleting the isFocused type just to replace it with an identical isFocusVisible type & control, this extends isFocused definition to allow the isFocusVisible variable name * chore(dialog): remove remaining comments from rebase * docs(divider): use Sizes decorator instead of custom sizing template * docs(divider): fix VRTs with refactored divider styles VRT diffs were found for Menu and Picker, so tracing them back, were caused by an incorrect inline-size property of 100% (as opposed to the corrected "auto") * chore(dialog): remove comments * chore(dialog): expand test coverage variants * chore(dialog): add default layout to args table * chore(dialog): refactor custom template for testing To work better with React's hot module reloader, this should only call a template once and toggle the inputs based on settings. * chore(dialog): clean up template - use the presence of the hero image url as a boolean, instead of an actual hasHeroImage boolean - removes layout !== default since it doesn't do anything anyways - use .every() array method for layout class modifiers * chore(dialog): removes hasHeroImage boolean from UI - use the presence of the hero image url as a boolean, instead of actual hasHeroImage boolean * chore(divider): rename VerticalGroup to VerticalSizing this naming matches the other Sizing story, as well as indicates it is going through the Sizes() function. * docs(divider): refactor divider - enforces orientation for divider test cases - creates new minDimensionValues arg to use as visualization. Because the inline and block sizes of the divider are dependant on content (which doesn't exist on this component), this new arg sets example values for min-inline-size and min-block-size. Any other customStyles passed to the component should still render as before, and we are relying on the CSS now instead of the styleMap in the default template. - refactors the min-inline-size/min-block-size in styleMap to use new minDimensionValues arg - adds extra documentation - corrects the default size of divider to small
1 parent 2621341 commit aacdec5

File tree

13 files changed

+497
-147
lines changed

13 files changed

+497
-147
lines changed

‎components/dial/stories/dial.stories.js

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes";
22
import { isFocused } from "@spectrum-css/preview/types";
33
import { version } from "../package.json";
44
import { DialGroup } from "./dial.test.js";
5+
import { Template } from "./template.js";
56

67
/**
78
* A dial is an input control used for selecting a value within a range, similar to a slider. It's often used in audio and video mixing and editing applications, where horizontal space is limited.
@@ -28,7 +29,7 @@ export default {
2829
},
2930
control: "text",
3031
},
31-
isFocused,
32+
isFocusVisible: isFocused,
3233
isDragged: {
3334
name: "Dragged",
3435
type: { name: "boolean" },
@@ -51,7 +52,7 @@ export default {
5152
args: {
5253
rootClass: "spectrum-Dial",
5354
size: "m",
54-
isFocused: false,
55+
isFocusVisible: false,
5556
isDragged: false,
5657
isDisabled: false,
5758
},
@@ -63,6 +64,33 @@ export default {
6364
export const Default = DialGroup.bind();
6465
Default.args = {};
6566

67+
export const Small = Template.bind();
68+
Small.args = {
69+
size: "s",
70+
};
71+
Small.parameters = {
72+
chromatic: { disableSnapshot: true },
73+
};
74+
Small.tags = ["!dev"];
75+
76+
export const WithLabel = Template.bind();
77+
WithLabel.args = {
78+
label: "Volume",
79+
};
80+
WithLabel.parameters = {
81+
chromatic: { disableSnapshot: true },
82+
};
83+
WithLabel.tags = ["!dev"];
84+
85+
export const Disabled = Template.bind();
86+
Disabled.args = {
87+
isDisabled: true,
88+
};
89+
Disabled.parameters = {
90+
chromatic: { disableSnapshot: true },
91+
};
92+
Disabled.tags = ["!dev"];
93+
6694
// ********* VRT ONLY ********* //
6795
export const WithForcedColors = DialGroup.bind({});
6896
WithForcedColors.args = Default.args;

‎components/dial/stories/dial.test.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ export const DialGroup = Variants({
1515
],
1616
stateData: [
1717
{
18-
heading: "Disabled",
18+
testHeading: "Disabled",
1919
isDisabled: true,
2020
},
2121
{
22-
heading: "Focused",
23-
isFocused: true,
22+
testHeading: "Focused",
23+
isFocusVisible: true,
2424
},
2525
{
26-
heading: "Dragged",
26+
testHeading: "Dragged",
2727
isDragged: true,
2828
},
2929
],

‎components/dial/stories/template.js

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const Template = ({
1010
rootClass = "spectrum-Dial",
1111
size = "m",
1212
label,
13-
isFocused = false,
13+
isFocusVisible = false,
1414
isDragged = false,
1515
isDisabled = false,
1616
min = 0,
@@ -38,58 +38,58 @@ export const Template = ({
3838
if (isDisabled) return;
3939
if (!document.body.classList.contains("u-isGrabbing")) return;
4040
41-
const dial = e.target.closest(".spectrum-Dial");
42-
const handle = dial.querySelector(".spectrum-Dial-handle");
43-
const input = dial.querySelector("input");
44-
const min = -45;
45-
const max = 225;
46-
const dialOffsetLeft = dial.offsetLeft + dial.offsetParent.offsetLeft;
47-
var x = Math.max(Math.min(e.x - dialOffsetLeft, dial.offsetWidth), 0);
48-
var percent = (x / dial.offsetWidth) * 100;
49-
var deg = percent * 0.01 * (max - min) + min;
50-
handle.style.transform = "rotate(" + deg + "deg" + ")";
51-
input.value = Math.round(
52-
percent * 0.01 * (input.max - input.min) + input.min
53-
);
54-
}}
55-
>
56-
${when(
57-
label,
58-
() => html`<div class="${rootClass}-labelContainer">
59-
<label id="dialLabel" class="${rootClass}-label" for="labeledDial"
60-
>${label}</label
61-
>
62-
<div
63-
class="${rootClass}-value"
64-
role="textbox"
65-
aria-readonly="true"
66-
aria-labelledby="dialLabel"
67-
>
68-
${min}
69-
</div>
70-
</div>`
71-
)}
72-
<div class="${rootClass}-controls">
73-
<div
74-
class="${rootClass}-handle ${isDragged ? "is-dragged" : ""} ${isFocused
75-
? "is-focused"
76-
: ""}"
77-
tabindex="0"
78-
>
79-
<input
80-
type="range"
81-
class="${rootClass}-input"
82-
min="${min}"
83-
max="${max}"
84-
value="${min}"
85-
@change=${(e) => {
86-
const value = e.target.value;
87-
const label = document.getElementById("dialLabel");
88-
label.nextSibling.textContent = value;
89-
}}
90-
/>
91-
</div>
92-
</div>
93-
</div>
94-
`;
41+
const dial = e.target.closest(".spectrum-Dial");
42+
const handle = dial.querySelector(".spectrum-Dial-handle");
43+
const input = dial.querySelector("input");
44+
const min = -45;
45+
const max = 225;
46+
const dialOffsetLeft = dial.offsetLeft + dial.offsetParent.offsetLeft;
47+
var x = Math.max(Math.min(e.x - dialOffsetLeft, dial.offsetWidth), 0);
48+
var percent = (x / dial.offsetWidth) * 100;
49+
var deg = percent * 0.01 * (max - min) + min;
50+
handle.style.transform = "rotate(" + deg + "deg" + ")";
51+
input.value = Math.round(
52+
percent * 0.01 * (input.max - input.min) + input.min
53+
);
54+
}}
55+
>
56+
${when(
57+
label,
58+
() => html`<div class="${rootClass}-labelContainer">
59+
<label id="dialLabel" class="${rootClass}-label" for="labeledDial"
60+
>${label}</label
61+
>
62+
<div
63+
class="${rootClass}-value"
64+
role="textbox"
65+
aria-readonly="true"
66+
aria-labelledby="dialLabel"
67+
>
68+
${min}
69+
</div>
70+
</div>`
71+
)}
72+
<div class="${rootClass}-controls">
73+
<div
74+
class="${rootClass}-handle
75+
${isDragged ? "is-dragged": ""}
76+
${isFocusVisible ? "is-focus-visible": ""}"
77+
tabindex="0"
78+
>
79+
<input
80+
type="range"
81+
class="${rootClass}-input"
82+
min="${min}"
83+
max="${max}"
84+
value="${min}"
85+
@change=${(e) => {
86+
const value = e.target.value;
87+
const label = document.getElementById("dialLabel");
88+
label.nextSibling.textContent = value;
89+
}}
90+
/>
91+
</div>
92+
</div>
93+
</div>
94+
`;
9595
};

0 commit comments

Comments
 (0)