noodleslove opened a new pull request, #21772:
URL: https://github.com/apache/echarts/pull/21772
<!-- Please fill in the following information to help us review your PR more
efficiently. -->
## Brief Information
This pull request is in the type of:
- [ ] bug fixing
- [x] new feature
- [ ] others
### What does this PR do?
Add `select.iconStyle` to `toolbox` and its features, so that the icons that
are toggled on can be styled separately from the hovered ones.
### Fixed issues
- #21672: Add selected state style for toolbox magicType buttons
## Details
### Before: What was the problem?
Toolbox icons only have two styles, `iconStyle` and `emphasis.iconStyle`.
The icons that are toggled on, such as the current type of `magicType`, are
displayed by keeping them in the emphasis state. So they always look the same
as the hovered icons and can not be styled separately.
<!-- ADD SCREENSHOT HERE IF APPLICABLE. -->
### After: How does it behave after the fixing?
`select.iconStyle` can be specified on `toolbox` and on each feature. The
feature one overrides the toolbox one.
```js
toolbox: {
iconStyle: { borderColor: '#333' },
emphasis: { iconStyle: { borderColor: 'orange' } },
// For all of the features.
select: { iconStyle: { borderColor: 'green' } },
feature: {
magicType: {
type: ['line', 'bar', 'stack'],
// Only for magicType.
select: { iconStyle: { borderColor: 'red' } }
},
dataZoom: {},
brush: {}
}
}
```
The icons that are toggled on are in the `select` state instead of the
emphasis state:
| Feature | Icons |
| --- | --- |
| `magicType` | `line`, `bar`, `stack` |
| `dataZoom` | `zoom` |
| `brush` | `rect`, `polygon`, `lineX`, `lineY`, `keep` |
When a selected icon is hovered, the emphasis style is applied on top of the
select style, the same as series.
**Backward compatibility**
- No default value is added for `select.iconStyle`. If it is not specified
on either the feature or the toolbox, `emphasis.iconStyle` is used. So the
existing charts are displayed the same as before, including the ones that
customized `emphasis.iconStyle`.
- `iconStatus: { xxx: 'emphasis' }` specified in the option still works, and
is cleared when another icon in the same group is clicked.
<!-- ADD SCREENSHOT HERE IF APPLICABLE. -->
## Document Info
One of the following should be checked.
- [ ] This PR doesn't relate to document changes
- [x] The document should be updated later
- [ ] The document changes have been made in apache/echarts-doc#xxx
## Misc
### Security Checking
- [ ] This PR uses security-sensitive Web APIs.
<!-- PLEASE CHECK IT AGAINST:
<https://github.com/apache/echarts/wiki/Security-Checklist-for-Code-Contributors>
-->
### ZRender Changes
- [ ] This PR depends on ZRender changes (ecomfe/zrender#xxx).
### Related test cases or examples to use the new APIs
- `test/toolbox-select-iconStyle.html`
- `test/ut/spec/component/toolbox/iconStatus.test.ts`
### Merging options
- [x] Please squash the commits into a single one when merging.
### Other information
Some decisions that I would like to be reviewed:
1. **`back` of `dataZoom` and `clear` of `brush` still use the emphasis
state.** They are not toggles. The highlight indicates that they are available,
so the select style does not seem to fit them. This is narrower than what I
described in the issue.
2. **The values in `iconStatus` of the icons toggled on become `'select'`
instead of `'emphasis'`.** `iconStatus` is not documented, but this is visible
in the result of `getOption()`.
3. **Selecting an icon by default on the initial render is not included**,
which is also asked in the issue. `iconStatus: { bar: 'select' }` can be used
for that currently. Whether `magicType` should infer it from the series can be
discussed separately.
A known issue that is not related to this PR: the icon `clear` of `brush` is
not updated until the next full update. For example, it stays highlighted after
clicked. It can be reproduced on `master`, and is tracked in #21771.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
