Primer ViewComponents v0.34.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
<auto-complete src="/view-components/rails-app/auto_complete?version=alpha" for="test-id" data-view-component="true">
  <label for="input-id" class="autocomplete-label-stacked">
    Select a fruit
  </label>
  <span class="autocomplete-body">
    <input id="input-id" name="input-id" autocomplete="off" type="text" data-view-component="true" class="form-control" />
    <ul id="test-id" data-view-component="true" class="autocomplete-results"></ul>
  </span>
  <div id="test-id-feedback" class="sr-only"></div>
</auto-complete>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# rubocop:disable Primer/ComponentNameMigration
render(
  Primer::Alpha::AutoComplete.new(
    label_text: label_text,
    input_id: "input-id",
    list_id: "test-id",
    src: UrlHelpers.autocomplete_index_path(version: "alpha"),
    is_label_visible: is_label_visible,
    is_label_inline: is_label_inline,
    with_icon: with_icon,
    is_clearable: is_clearable
  )
)
# rubocop:enable Primer/ComponentNameMigration

No notes provided.

Param Description Input

—

—

—

—

—

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
/* 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;
  }
:is(.autocomplete-embedded-icon-wrap .form-control):focus {
      box-shadow: none;
    }
:is(.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 */
  }
:is(.autocomplete-item.selected,.autocomplete-item[aria-selected='true'],.autocomplete-item.navigation-focus) * {
      color: inherit !important;
    }