Primer ViewComponents v0.23.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!-- AutoComplete with non-visible label -->
<auto-complete src="/view-components/rails-app/auto_complete?version=alpha" for="test-id-1" data-view-component="true">
  <label for="input-id-1" class="">
    <span class="sr-only">Select a fruit</span>
  </label>
  <span class="autocomplete-body">
    <input id="input-id-1" name="input-id-1" autocomplete="off" type="text" data-view-component="true" class="form-control" />
    <ul id="test-id-1" data-view-component="true" class="autocomplete-results"></ul>
  </span>
  <div id="test-id-1-feedback" class="sr-only"></div>
</auto-complete>
<!-- AutoComplete with inline label -->
<auto-complete src="/view-components/rails-app/auto_complete?version=alpha" for="test-id-2" data-view-component="true">
  <label for="input-id-2" class="autocomplete-label-inline">
    Select a fruit
  </label>
  <span class="autocomplete-body">
    <input id="input-id-2" name="input-id-2" autocomplete="off" type="text" data-view-component="true" class="form-control" />
    <ul id="test-id-2" data-view-component="true" class="autocomplete-results"></ul>
  </span>
  <div id="test-id-2-feedback" class="sr-only"></div>
</auto-complete>
<!-- AutoComplete with search icon -->
<auto-complete src="/view-components/rails-app/auto_complete?version=alpha" for="test-id-3" data-view-component="true">
  <label for="input-id-3" class="autocomplete-label-stacked">
    Select a fruit
  </label>
  <span class="autocomplete-body">
    <div class="form-control autocomplete-embedded-icon-wrap">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search">
        <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
      </svg>
      <input id="input-id-3" name="input-id-3" autocomplete="off" type="text" data-view-component="true" class="form-control" />
    </div>
    <ul id="test-id-3" data-view-component="true" class="autocomplete-results"></ul>
  </span>
  <div id="test-id-3-feedback" class="sr-only"></div>
</auto-complete>
<!-- AutoComplete with clear button -->
<auto-complete src="/view-components/rails-app/auto_complete?version=alpha" for="test-id-4" data-view-component="true">
  <label for="input-id-4" class="autocomplete-label-stacked">
    Select a fruit
  </label>
  <span class="autocomplete-body">
    <input id="input-id-4" name="input-id-4" autocomplete="off" type="text" data-view-component="true" class="form-control" />
    <button id="input-id-4-clear" class="btn-octicon" aria-label="Clear"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x">
        <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path>
      </svg></button>
    <ul id="test-id-4" data-view-component="true" class="autocomplete-results"></ul>
  </span>
  <div id="test-id-4-feedback" class="sr-only"></div>
</auto-complete>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# AutoComplete with non-visible label
# rubocop:disable Primer/ComponentNameMigration
render(
  Primer::Alpha::AutoComplete.new(
    label_text: "Select a fruit",
    input_id: "input-id-1",
    list_id: "test-id-1",
    src: UrlHelpers.autocomplete_index_path(version: "alpha"),
    is_label_visible: false
  )
)
# rubocop:enable Primer/ComponentNameMigration
# AutoComplete with inline label
# rubocop:disable Primer/ComponentNameMigration
render(
  Primer::Alpha::AutoComplete.new(
    label_text: "Select a fruit",
    input_id: "input-id-2",
    list_id: "test-id-2",
    src: UrlHelpers.autocomplete_index_path(version: "alpha"),
    is_label_inline: true
  )
)
# rubocop:enable Primer/ComponentNameMigration
# AutoComplete with search icon
# rubocop:disable Primer/ComponentNameMigration
render(
  Primer::Alpha::AutoComplete.new(
    label_text: "Select a fruit",
    input_id: "input-id-3",
    list_id: "test-id-3",
    src: UrlHelpers.autocomplete_index_path(version: "alpha"),
    with_icon: true
  )
)
# rubocop:enable Primer/ComponentNameMigration
# AutoComplete with clear button
# rubocop:disable Primer/ComponentNameMigration
render(
  Primer::Alpha::AutoComplete.new(
    label_text: "Select a fruit",
    input_id: "input-id-4",
    list_id: "test-id-4",
    src: UrlHelpers.autocomplete_index_path(version: "alpha"),
    is_clearable: true
  )
)
# rubocop:enable Primer/ComponentNameMigration

No notes provided.

No params configured.

app/components/primer/alpha/auto_complete.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/* autocomplete */
/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796
** AutoComplete relies on FormControl, Overlay and ActionList CSS */
/* Stacked label (default) */
.autocomplete-label-stacked {
  display: block;
  margin-bottom: 6px;
}
/* Inline label (non-default) */
.autocomplete-label-inline {
  display: inline;
  margin-right: 6px;
}
/* Switch to stacked at smaller viewport */
@media (max-width: 543.98px) {
  .autocomplete-label-inline {
    display: block;
    margin-bottom: 6px;
  }
}
/* Wrapper for the input and result elements to ensure alignment */
.autocomplete-body {
  position: relative;
  display: inline;
}
/* Wrapper and conditional styles for when an icon is added */
.autocomplete-embedded-icon-wrap {
  display: inline-flex;
  padding: 4px 8px;
  align-items: center;
}
.autocomplete-embedded-icon-wrap:focus-within {
    border-color: var(--borderColor-accent-emphasis);
    border-color: var(--focus-outlineColor);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
  }
.autocomplete-embedded-icon-wrap .form-control {
    padding: 0;
    margin-left: 8px;
    border: none;
    box-shadow: none;
  }
.autocomplete-embedded-icon-wrap .form-control:focus {
      box-shadow: none;
    }
.autocomplete-embedded-icon-wrap .form-control:focus-visible {
      box-shadow: none;
    }
/* A pop up list of items used to show autocompleted results */
.autocomplete-results {
  position: absolute;
  left: 0;
  z-index: 99;
  width: max-content;
  min-width: 100%;
  max-height: 20em;
  overflow-y: auto;
  font-size: 13px;
  list-style: none;
  background: var(--overlay-bgColor);
  border: var(--borderWidth-thin) solid var(--borderColor-default);
  border-radius: var(--borderRadius-medium);
  box-shadow: var(--shadow-resting-medium);
}
/* One of the items that appears within an autocomplete group
** Bold black text on white background */
.autocomplete-item {
  display: block;
  width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  font-weight: var(--base-text-weight-semibold);
  color: var(--fgColor-default);
  text-align: left;
  -webkit-text-decoration: none;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background-color: var(--overlay-bgColor);
  border: 0;
}
.autocomplete-item:hover {
    color: var(--fgColor-onEmphasis);
    -webkit-text-decoration: none;
    text-decoration: none;
    background-color: var(--bgColor-accent-emphasis);
    /* Inherit color on all child elements to ensure enough contrast */
  }
.autocomplete-item:hover * {
      color: inherit !important;
    }
.autocomplete-item.selected,
  .autocomplete-item[aria-selected='true'],
  .autocomplete-item.navigation-focus {
    color: var(--fgColor-onEmphasis);
    -webkit-text-decoration: none;
    text-decoration: none;
    background-color: var(--bgColor-accent-emphasis);
    /* Inherit color on all child elements to ensure enough contrast */
  }
.autocomplete-item.selected *, .autocomplete-item[aria-selected='true'] *, .autocomplete-item.navigation-focus * {
      color: inherit !important;
    }