1 | ### HTML
|
2 |
|
3 | HTML changes pertain only to the search and clear icon. Icon from
|
4 | [`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
|
5 | Vanilla markup should be migrated to one shown in
|
6 | [carbondesignsystem.com](https://next.carbondesignsystem.com/components/search/code)
|
7 | site. React and other framework variants should reflect the change
|
8 | automatically.
|
9 |
|
10 | **New Markup**:
|
11 |
|
12 | ```html
|
13 | <!-- Search icon -->
|
14 | <svg
|
15 | focusable="false"
|
16 | preserveAspectRatio="xMidYMid meet"
|
17 | style="will-change: transform;"
|
18 | xmlns="http://www.w3.org/2000/svg"
|
19 | class="bx--search-magnifier"
|
20 | width="16"
|
21 | height="16"
|
22 | viewBox="0 0 16 16"
|
23 | aria-hidden="true"
|
24 | >
|
25 | <path
|
26 | d="M15 14.3L10.7 10c1.9-2.3 1.6-5.8-.7-7.7S4.2.7 2.3 3 .7 8.8 3 10.7c2 1.7 5 1.7 7 0l4.3 4.3.7-.7zM2 6.5C2 4 4 2 6.5 2S11 4 11 6.5 9 11 6.5 11 2 9 2 6.5z"
|
27 | ></path>
|
28 | </svg>
|
29 |
|
30 | <!-- Clear icon -->
|
31 | <svg
|
32 | focusable="false"
|
33 | preserveAspectRatio="xMidYMid meet"
|
34 | style="will-change: transform;"
|
35 | xmlns="http://www.w3.org/2000/svg"
|
36 | class="bx--search-clear"
|
37 | width="20"
|
38 | height="20"
|
39 | viewBox="0 0 32 32"
|
40 | aria-hidden="true"
|
41 | >
|
42 | <path
|
43 | d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4l6.6 6.6L8 22.6 9.4 24l6.6-6.6 6.6 6.6 1.4-1.4-6.6-6.6L24 9.4z"
|
44 | ></path>
|
45 | </svg>
|
46 | ```
|
47 |
|
48 | **Old Markup**:
|
49 |
|
50 | ```html
|
51 | <!-- Search icon -->
|
52 | <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
|
53 | <path
|
54 | d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
|
55 | fill-rule="nonzero"
|
56 | />
|
57 | </svg>
|
58 |
|
59 | <!-- Clear icon -->
|
60 | <svg
|
61 | width="16"
|
62 | height="16"
|
63 | viewBox="0 0 16 16"
|
64 | xmlns="http://www.w3.org/2000/svg"
|
65 | >
|
66 | <path
|
67 | d="M8 6.586L5.879 4.464 4.464 5.88 6.586 8l-2.122 2.121 1.415 1.415L8 9.414l2.121 2.122 1.415-1.415L9.414 8l2.122-2.121-1.415-1.415L8 6.586zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
|
68 | fill-rule="evenodd"
|
69 | />
|
70 | </svg>
|
71 | ```
|
72 |
|
73 | ### SCSS
|
74 |
|
75 | No selector changes.
|