diff --git a/.changeset/shaggy-birds-marry.md b/.changeset/shaggy-birds-marry.md new file mode 100644 index 0000000000..db032408b3 --- /dev/null +++ b/.changeset/shaggy-birds-marry.md @@ -0,0 +1,5 @@ +--- +"@primer/css": patch +--- + +More CSS updates to `Autocomplete` diff --git a/docs/content/components/autocomplete.md b/docs/content/components/autocomplete.md index 5c4f2b058d..3ef1b54a76 100644 --- a/docs/content/components/autocomplete.md +++ b/docs/content/components/autocomplete.md @@ -12,10 +12,10 @@ A list of items used to show autocompleted results. Use the [``]( ```html live
- + - -
    + +
    • Option 1
    • Option 2
    • Option 3
      • @@ -36,10 +36,10 @@ A list of items used to show autocompleted results. Use the [``]( ```html live
      - + - -
        + +
        • Team 1 (works on Ruby architecture)
        • Team 2 (works on frontend JS architecture)
        • Team 3 (this team works on design systems)
          • @@ -56,11 +56,11 @@ A list of items used to show autocompleted results. Use the [``]( ## Embedded icon with visible label -Stacked label +### Stacked label ```html live
          - +
          - +
          -
            +
            • Option 1
            • Option 2
            • Option 3
              • @@ -93,11 +93,11 @@ Stacked label ``` -Inline label +### Inline label ```html live
              - +
              - +
              -
                +
                • Option 1
                • Option 2
                • Option 3
                  • @@ -134,7 +134,7 @@ Inline label ```html live
                  - +
                  - +
                  -
                    +
                    • Option 1
                    • Option 2
                    • Option 3
                      • @@ -167,6 +167,175 @@ Inline label ``` +## Within form group + +```html live +
                      +
                      +
                      + + +
                      + + +
                      +
                        +
                      • Option 1
                        • +
                      • Option 2
                        • +
                      • Option 3
                        • +
                      +                       +
                      +
                      +
                      + + +``` + +## Within input group + +When rendering `Autocomplete` with embedded icon within an [input group](https://primer.style/css/components/forms#input-group), add `.input-group-button--autocomplete-embedded-icon` to `.input-group-button`. + +### Stacked + +```html live +
                      +
                      + + +
                      + + +
                      +
                        +
                      • Option 1
                        • +
                      • Option 2
                        • +
                      • Option 3
                        • +
                      +                       +
                      + + + +
                      + + +``` + +### Inline +```html live +
                      +
                      + + +
                      + + +
                      +
                        +
                      • Option 1
                        • +
                      • Option 2
                        • +
                      • Option 3
                        • +
                      +                       +
                      + + + +
                      + + +``` + +## Container with `max-width` + +```html live +
                      +
                      +
                      +
                      +
                      + + +
                      + + +
                      +
                        +
                      • Option 1
                        • +
                      • Option 2
                        • +
                      • Option 3
                        • +
                      +                       +
                      +
                      +
                      +
                      +
                      + + +``` + ## Additional content Autocomplete items can contain additional content, like an `.avatar`. Or use utility classes to customize the text style. @@ -174,7 +343,7 @@ Autocomplete items can contain additional content, like an `.avatar`. Or use uti ```html live
                      -
                        +
                        • GitHub Inc. @@ -210,7 +379,7 @@ The `.suggester` component is meant for showing suggestions while typing in a la -
                            +