UNPKG

1.9 kBMarkdownView Raw
1### HTML
2
3HTML changes pertain only to the search and clear icon. Icon from
4[`carbon-elements`](https://github.com/IBM/carbon-elements) package is now used.
5Vanilla markup should be migrated to one shown in
6[carbondesignsystem.com](https://next.carbondesignsystem.com/components/search/code)
7site. React and other framework variants should reflect the change
8automatically.
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
75No selector changes.