Skip to content

Slider: Use string in event callback #1322

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

Merged
merged 1 commit into from
Apr 12, 2018
Merged

Slider: Use string in event callback #1322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
157 changes: 85 additions & 72 deletions components/component-docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11453,77 +11453,125 @@
}
],
"props": {
"id": {
"aria-describedby": {
"type": {
"name": "string"
},
"required": false,
"description": "Set the HTML `id` of the card. This also sets the `id` of the filter and the header actions."
"description": "The `aria-describedby` attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need."
},
"name": {
"assistiveText": {
"type": {
"name": "string"
"name": "shape",
"value": {
"label": {
"name": "string",
"required": false
}
}
},
"required": false,
"description": "Name of the submitted form parameter."
"description": "Assistive text for accessibility**\n`label`: Visually hidden label but read out loud by screen readers."
},
"label": {
"classNameContainer": {
"type": {
"name": "string"
"name": "union",
"value": [
{
"name": "array"
},
{
"name": "object"
},
{
"name": "string"
}
]
},
"required": false,
"description": "This label appears above the Slider."
"description": "Class names to be added to the outer container of the Slider."
},
"value": {
"defaultValue": {
"type": {
"name": "number"
},
"required": false,
"description": "The Slider is a controlled component, and will always display this value.",
"description": "This is the initial value of an uncontrolled form element and is present only to provide compatibility\nwith hybrid framework applications that are not entirely React. It should only be used in an application\nwithout centralized state (Redux, Flux). \"Controlled components\" with centralized state is highly recommended.\nSee [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information.",
"defaultValue": {
"value": "0",
"computed": false
}
},
"min": {
"disabled": {
"type": {
"name": "number"
"name": "bool"
},
"required": false,
"description": "Minimum value of a specified range.",
"defaultValue": {
"value": "0",
"computed": false
}
"description": "Disables the Slider and prevents clicking it. Only available on the horizontal view."
},
"errorText": {
"type": {
"name": "string"
},
"required": false,
"description": "Message to display when the Slider is in an error state. When this is present, also visually highlights the component as in error."
},
"id": {
"type": {
"name": "string"
},
"required": false,
"description": "Set the HTML `id` of the slider."
},
"label": {
"type": {
"name": "string"
},
"required": false,
"description": "This label appears above the Slider."
},
"max": {
"type": {
"name": "number"
},
"required": false,
"description": "Maximum value of a specified range.",
"description": "Maximum value of a specified range. Defaults to 100.",
"defaultValue": {
"value": "100",
"computed": false
}
},
"step": {
"min": {
"type": {
"name": "number"
},
"required": false,
"description": "Indicates the granularity that is expected by limiting the allowed values.",
"description": "Minimum value of a specified range. Defaults to 0.",
"defaultValue": {
"value": "1",
"value": "0",
"computed": false
}
},
"disabled": {
"name": {
"type": {
"name": "bool"
"name": "string"
},
"required": false,
"description": "Disables the Slider and prevents clicking it."
"description": "Name of the submitted form parameter."
},
"onChange": {
"type": {
"name": "func"
},
"required": false,
"description": "This event fires whenever the user has modified the data of the control. This callback recieves the following parameters `event, { value: [string] }`."
},
"onInput": {
"type": {
"name": "func"
},
"required": false,
"description": "This event fires when the value is committed. This callback recieves the following parameters `event, { value: [string] }`."
},
"size": {
"type": {
Expand All @@ -11550,65 +11598,30 @@
"required": false,
"description": "Size of the slider."
},
"vertical": {
"type": {
"name": "bool"
},
"required": false,
"description": "Modifier that makes the slider vertical"
},
"className": {
"type": {
"name": "union",
"value": [
{
"name": "array"
},
{
"name": "object"
},
{
"name": "string"
}
]
},
"required": false,
"description": "Class names to be added to the outer container of the Slider."
},
"errorText": {
"type": {
"name": "string"
},
"required": false,
"description": "Message to display when the Slider is in an error state. When this is present, also visually highlights the component as in error."
},
"aria-describedby": {
"type": {
"name": "string"
},
"required": false,
"description": "The `aria-describedby` attribute is used to indicate the IDs of the elements that describe the object. It is used to establish a relationship between widgets or groups and text that described them. This is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more information that the user might need."
},
"assistiveText": {
"step": {
"type": {
"name": "string"
"name": "number"
},
"required": false,
"description": "Text that is visually hidden but read aloud by screenreaders to tell the user what the Slider is for.\nIf the Slider has a visible label, you can omit the <code>assistiveText</code> prop and use the <code>label</code> prop."
"description": "By default, the granularity is 1 and the value is always an integer. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of step to 0.01",
"defaultValue": {
"value": "1",
"computed": false
}
},
"onChange": {
"value": {
"type": {
"name": "func"
"name": "number"
},
"required": false,
"description": "This event fires whenever the user has modified the data of the control."
"description": "The Slider is a controlled component, and will always display this value."
},
"onInput": {
"vertical": {
"type": {
"name": "func"
"name": "bool"
},
"required": false,
"description": "This event fires when the value is committed."
"description": "Modifier that makes the slider vertical"
}
},
"route": "slider",
Expand Down
4 changes: 2 additions & 2 deletions components/slider/__tests__/slider.browser-test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ describe('SLDSSlider', () => {
);
done();
const trigger = wrapper.find('input');
trigger.simulate('change', { target: { value: 300 } });
trigger.simulate('change', { target: { value: '300' } });
});

it('onInput trigged callback', function (done) {
Expand All @@ -212,7 +212,7 @@ describe('SLDSSlider', () => {
);
done();
const trigger = wrapper.find('input');
trigger.simulate('input', { target: { value: 300 } });
trigger.simulate('input', { target: { value: '300' } });
});
});

Expand Down
17 changes: 9 additions & 8 deletions components/slider/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,11 @@ const propTypes = {
PropTypes.string,
]),
/**
* This is the initial value of an uncontrolled form element and is present only to provide compatibility
* with hybrid framework applications that are not entirely React. It should only be used in an application
* without centralized state (Redux, Flux). "Controlled components" with centralized state is highly recommended.
* See [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information.
* This is the initial value of an uncontrolled form element and is present
* only to provide compatibility with hybrid framework applications that
* are not entirely React. It should only be used in an application without
* centralized state (Redux, Flux). "Controlled components" with centralized
* state is highly recommended. See [Code Overview](https://github.com/salesforce/design-system-react/blob/master/docs/codebase-overview.md#controlled-and-uncontrolled-components) for more information.
*/
defaultValue: PropTypes.number,
/**
Expand Down Expand Up @@ -79,11 +80,11 @@ const propTypes = {
*/
name: PropTypes.string,
/**
* This event fires whenever the user has modified the data of the control.
* This event fires whenever the user has modified the data of the control. This callback recieves the following parameters `event, { value: [string] }`.
*/
onChange: PropTypes.func,
/**
* This event fires when the value is committed.
* This event fires when the value is committed. This callback recieves the following parameters `event, { value: [string] }`.
*/
onInput: PropTypes.func,
/**
Expand Down Expand Up @@ -139,13 +140,13 @@ class Slider extends React.Component {

handleChange = (event) => {
if (isFunction(this.props.onChange)) {
this.props.onChange(event, { value: Number(event.target.value) });
this.props.onChange(event, { value: event.target.value });
}
};

handleInput = (event) => {
if (isFunction(this.props.onInput)) {
this.props.onInput(event, { value: Number(event.target.value) });
this.props.onInput(event, { value: event.target.value });
}
};

Expand Down