|
3 | 3 | All notable changes to this project will be documented in this file. |
4 | 4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. |
5 | 5 |
|
| 6 | +<a name="5.0.0"></a> |
| 7 | +#5.0.0 |
| 8 | +🗓 |
| 9 | +2023-08-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/colorslider@4.0.9...@spectrum-css/colorslider@5.0.0) |
| 10 | + |
| 11 | +### 🔙 Reverts |
| 12 | + |
| 13 | +\*gulp and build updates ([#2121](https://github.com/adobe/spectrum-css/issues/2121))([03a37f5](https://github.com/adobe/spectrum-css/commit/03a37f5)), closes[#2099](https://github.com/adobe/spectrum-css/issues/2099) |
| 14 | + |
| 15 | +\*feat(colorslider)!: spectrum tokens migration (#1924)([da345bd](https://github.com/adobe/spectrum-css/commit/da345bd)), closes[#1924](https://github.com/adobe/spectrum-css/issues/1924) |
| 16 | + |
| 17 | + ### |
| 18 | + 🛑 BREAKING CHANGES |
| 19 | + |
| 20 | + * |
| 21 | + migrates Color Slider to use `@adobe/spectrum-tokens` and the new Opacity Checkerboard |
| 22 | + |
| 23 | +Additionally: |
| 24 | + |
| 25 | +- build(colorslider)!: migrate build to use core tokens |
| 26 | + Migrate dependencies and other build related files to use the new |
| 27 | + @spectrum-css/tokens package. |
| 28 | + |
| 29 | +- refactor(colorslider): convert CSS to use core tokens - wip |
| 30 | + |
| 31 | +* Add new tokens defined in design. |
| 32 | +* Use tokens in existing CSS. |
| 33 | +* Merge skin.css into index.css. |
| 34 | + |
| 35 | +- feat(colorslider): add story for 'alpha' gradient |
| 36 | + |
| 37 | +Add story that shows the existing variant from the docs, with a |
| 38 | +transparent color used in the gradient and checkerboard appearing behind |
| 39 | +it. Adds a hidden control to Storybook. This variant needed to be |
| 40 | +testable and compared against in Storybook. |
| 41 | + |
| 42 | +- refactor(colorslider): move styles out of hidden placeholder |
| 43 | + |
| 44 | +Removes unnecessary placeholder variable (%) that is only used once. |
| 45 | +Clarifies what these "hidden" styles are doing. |
| 46 | + |
| 47 | +- feat(colorslider): finalize css to use new core tokens |
| 48 | + |
| 49 | +* Finalize CSS to use new core tokens. |
| 50 | +* Integrates skin.css into index.css. |
| 51 | +* Remove "canvas" variant as was done with colorwheel component. |
| 52 | +* Replaces some properties with their logical properties. |
| 53 | +* Generate mods. |
| 54 | + |
| 55 | +- style(colorslider): prettier and stylelint on colorslider files |
| 56 | + |
| 57 | +Run prettier with automatic changes to colorslider files, to update |
| 58 | +formatting to match new changes to linting. |
| 59 | + |
| 60 | +And manually make a few changes after stylelint check. |
| 61 | + |
| 62 | +- fix(colorslider): highcontrast update |
| 63 | + |
| 64 | +Updates colors for high contrast to fix disabled border color being off. |
| 65 | +Refactors those colors and uses a local variable for the box-shadow |
| 66 | +color. |
| 67 | + |
| 68 | +Change: Uses CanvasText border color in high contrast mode, so |
| 69 | +component still shows a border in high contrast mode with a dark |
| 70 | +background theme. Border was previously barely visible. |
| 71 | + |
| 72 | +- refactor(colorslider): remove no longer needed colorhandle styles |
| 73 | + |
| 74 | +These styles for the nested ColorHandle appear to be no longer |
| 75 | +necessary. |
| 76 | + |
| 77 | +- hit area size (width and height) is available through colorhandle's |
| 78 | + --mod property. The global-dimension-size-300 was equal to the same |
| 79 | + pixel value already set by colorhandle using |
| 80 | + --spectrum-color-control-track-width |
| 81 | + |
| 82 | +- border-radius is set to 100% in colorhandle and there does not appear |
| 83 | + to be any option to support changing this through a mod or SWC options |
| 84 | + |
| 85 | +* fix(colorslider): remove added label and its spacing token |
| 86 | + |
| 87 | +Per discussion with design, the label on the design was meant to serve |
| 88 | +more as guidance, and does not need to be a part of the component. |
| 89 | + |
| 90 | +- feat(colorhandle): add --mod-colorhandle-hitarea-border-radius |
| 91 | + |
| 92 | +Add --mod custom property for the border radius of the hit area, so that |
| 93 | +other components that use colorhandle can easily customize it |
| 94 | +(colorslider sets it to square, not rounded). |
| 95 | + |
| 96 | +- fix(colorslider): keep square hit area on colorhandle with new mod |
| 97 | + |
| 98 | +Keep the square hit area (::after) on the nested colorhandle, which was |
| 99 | +defaulting to rounded, using the newly added passthrough for |
| 100 | +--mod-colorhandle-hitarea-border-radius |
| 101 | + |
| 102 | +- feat(colorslider): reversed gradient for rtl support and docs update |
| 103 | + |
| 104 | +Use same technique as SWC for reversing the gradient when using a RTL |
| 105 | +base direction. The handles were flipping to the other side using the |
| 106 | +new logical properties but the gradient was not. |
| 107 | + |
| 108 | +Also updates documentation around this and improves overall docs |
| 109 | +explanations. Changes first usage docs bullet point specifying |
| 110 | +translateX, as this does not appear to be correct (SWC changes the |
| 111 | +inset-inline-start and inset-block-end of the position absolute handle). |
| 112 | + |
| 113 | +Fixes capitalization of component name in a few places to match the |
| 114 | +sentence case specified in the Spectrum capitalization guidelines. |
| 115 | + |
| 116 | +- fix(colorslider): update stories and example colors |
| 117 | + |
| 118 | +Update gradient used and use the matching colorhandle background color |
| 119 | +for the new Alpha story. |
| 120 | + |
| 121 | +Add new story for the "With Image" example from the docs. This example |
| 122 | +also includes the 50% positioned handle, for testing/VRT purposes. |
| 123 | + |
| 124 | +- fix(colorslider): update mod name for checkerboard |
| 125 | + |
| 126 | +Custom property mod had the wrong name. |
| 127 | + |
| 128 | +Co-authored-by: Jennifer Grenier Diaz <jenn.diaz@heysparkbox.com> |
| 129 | + |
| 130 | +- style(colorslider): remove prettier auto formatting |
| 131 | + |
| 132 | +To ease merge and keep to existing style conventions. Changes were made |
| 133 | +before prettier auto formatting was reverted. |
| 134 | + |
| 135 | +- feat(colorslider): integrate opacitycheckerboard changes |
| 136 | + |
| 137 | +Integrate new opacitycheckerboard changes that have merged into main. |
| 138 | +ColorSlider now uses the opacitycheckerboard component, which is |
| 139 | +viewable with the Alpha variant. |
| 140 | + |
| 141 | +Also added a "Disabled" story to Storybook, so that's included in VRTs. |
| 142 | + |
| 143 | +- style(colorhandle): update indentation on addition |
| 144 | + |
| 145 | +Due to mix of tabs and spaces in file. |
| 146 | + |
| 147 | +- feat(opacitycheckerboard): modify stories for use in components |
| 148 | + |
| 149 | +* Modify storybook template so that it can be imported and used by other |
| 150 | + components' stories. Allow passing in content, and excluding the |
| 151 | + storybook testing wrapper markup. |
| 152 | +* Moves defaultValue to args, as that syntax has been deprecated in |
| 153 | + newer versions of Storybook: |
| 154 | + https://storybook.js.org/docs/react/api/arg-types#defaultvalue |
| 155 | +* Adds a new story with a centered background position mod, and |
| 156 | + clarifies that the arg is changing the mod. |
| 157 | + |
| 158 | +- feat(colorslider): use imported opacitycheckerboard story |
| 159 | + |
| 160 | +Use opacitycheckerboard story in the template for ColorSlider, so the |
| 161 | +checkerboard appears in the Alpha variant. |
| 162 | + |
| 163 | +- feat(colorslider): in storybook add focused class to color handle |
| 164 | + |
| 165 | +When isFocused is enabled in Storybook, also add the focused class to |
| 166 | +the colorhandle (showing it scaled up). Otherwise focused state in |
| 167 | +Storybook has no visual difference. |
| 168 | + |
| 169 | +- chore(colorslider): manual version increase for beta release |
| 170 | + |
| 171 | +- fix(colorslider): inset the box-shadow border |
| 172 | + |
| 173 | +The 'inset' of the box-shadow border had been lost from the skin.css, as |
| 174 | +noticed in VRTs. |
| 175 | + |
| 176 | +- chore(colorslider): manual version increase for beta release |
| 177 | + |
| 178 | +- build(colorslider): minimum colorhandle version |
| 179 | + |
| 180 | +Increase minimum version of colorhandle to be the latest release that |
| 181 | +includes the addition of --mod-colorhandle-hitarea-border-radius |
| 182 | + |
| 183 | +- build(colorslider): build with latest version of tokens |
| 184 | + |
| 185 | +Update devDependencies to use latest version of tokens package. |
| 186 | + |
| 187 | +- chore(colorslider): manual version increase for beta release |
| 188 | + |
6 | 189 | <a name="4.0.9"></a> |
7 | 190 | ##4.0.9 |
8 | 191 | 🗓 |
|
0 commit comments