1. 28 Oct, 2020 3 commits
    • Martijn Cuppens's avatar
      f2366674
    • Mark Otto's avatar
      v5: Floating labels (#30449) · 3e2f9ab2
      Mark Otto authored
      
      * v5: Promote floating labels example to component
      
      - Adds new .form-floating
      - Stubs out basics of a docs page
      - Removes existing Example
      
      * Update floating labels to support .form-select, make inputs and selects more consistent
      
      - To do this, I made the .form-control and .form-select consistent in min-height vs height
      - Removed some unused variables now
      - Updated -color to be the -color because I don't know why this was any different before
      - Update page to include some examples for layout, validation, and value
      - Rewrite styles to not modify padding, but instead transform and opacity
      
      * Streamline and bulletproof some things
      
      - Apply some optimizations from code review
      - Removed unecessary properties from the label
      - Add some comments for what properties are required
      - Move from fixed height for labels to height 100% so we can support textareas
      - Improve docs a little bit, add ToC
      
      * Move some values to variables, switch from scaling font-size to scale, update transforms
      
      * Bring over changes from #30966 and add to them to tighten things up
      
      * Delete the now unused example images
      
      * Fix typo
      
      * Allowlist the calc function
      
      * Add transform-origin, update transform values
      
      * Test out autofill fix
      
      * Fix linter issue
      
      * Mention it in the migration guide
      
      * Bump bundlesize
      
      * Add one more variable per review
      
      * Shave .25rem off the height
      
      Co-authored-by: default avatarXhmikosR <xhmikosr@gmail.com>
      3e2f9ab2
    • Jonathan's avatar
      582f52e9
  2. 26 Oct, 2020 1 commit
  3. 19 Oct, 2020 4 commits
  4. 13 Oct, 2020 1 commit
  5. 12 Oct, 2020 1 commit
    • XhmikosR's avatar
      Improve callout shortcode. (#31802) · 5c692538
      XhmikosR authored
      Remove the `markdownify` call, and instead rely on Hugo's proper syntax; `{{% callout %}}` when we want to the content to be processed as Markdown.
      
      This allows for stuff like:
      
      {{% callout info %}}
      ##### I'm an info callout!
      
      ```css
      .foo {
        color: #fff;
      }
      ```
      
      {{< example >}}
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
        <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
      </div>
      {{< /example >}}
      {{% /callout %}}
      5c692538
  6. 30 Sep, 2020 1 commit
  7. 29 Sep, 2020 2 commits
  8. 18 Aug, 2020 1 commit
  9. 11 Jul, 2020 3 commits
    • Patrick H. Lauke's avatar
      Docs: forms accessibility cleanup (#31114) · eeb73e0c
      Patrick H. Lauke authored
      * Expand on disabled fieldsets and faked buttons
      
      include further advice/information on how to disable faked buttons for keyboard/AT users
      
      * Centralise accessible name advice in forms overview
      
      seems odd to only mention (separately) label, aria-label etc in input-group and layout. the advice is just as pertinent in other sections like select. checks only skims over this.
      
      moving this, in expanded form, into the overview section itself. adding a specific cross-reference (just because they are easily left with no accname at all) in the checks page.
      
      * Change warning about accessibility, modify server-side example
      
      - paradoxically, due to our current problems with validation (see #28414
      
      ) and the fact that browsers seem to have improved in this area for the most part, it's now actually better to use browser-native validation
      - added explicit `id` and `aria-describedby` association to at least the server-side form error messages, to show how it should be done properly, and expanded the prose for that explaining this.
      
      * Replace `.sr-only` with `.visually-hidden` in new addition
      
      * Copy edits for clarity in parenthetical
      
      * Copy and formatting tweaks
      
      - Wordsmithing here and there
      - Turns some hyphens into em dashes
      - Turns a long running comma separated list into an unordered list
      - Rearranges some copy just a bit
      
      Co-authored-by: default avatarMark Otto <markd.otto@gmail.com>
      eeb73e0c
    • Mark Otto's avatar
      Update layout.md · 6acdfdbf
      Mark Otto authored
      6acdfdbf
    • Rohit Sharma's avatar
      Single line example for inline forms · 6eaa36fb
      Rohit Sharma authored
      6eaa36fb
  10. 10 Jul, 2020 1 commit
    • Patrick H. Lauke's avatar
      Docs: rename "Screen readers" helper page to "Visually hidden" · 3a79335a
      Patrick H. Lauke authored
      "screen readers" is quite reductive, as there are other assistive technologies. content hidden this way is even announced by things like Alexa/Siri etc, so it's not so much just "screen readers".
      in the long run, we may even consider changing the actual classnames (maybe `.visually-hidden` / `.visually-hidden-focusable`, though admittedly that's a bit verbose).
      
      also includes a tiny tweak to layout.md to generalise the note about using `.sr-only`
      3a79335a
  11. 06 Jul, 2020 1 commit
    • Patrick H. Lauke's avatar
      Docs: separate button group out of checks/radios, expand button groups page (#31201) · 828366de
      Patrick H. Lauke authored
      * Keep checks/radio toggle buttons on topic
      
      - give examples of the pure toggle checks and radios, without the button group class. show that these work fine without `.btn-group`, but still cross-reference it
      - move the explanation from "Checkbox toggle buttons" directly to "Toggle buttons", as the mention of using button classes applies equally to the subsequent "Radio toggle buttons" and "Outlined styles" subsections.
      
      * Expand button group description
      
      as it's not just single line, but vertical as well
      
      * Expand button group examples
      
      - add more colour ... `.btn-secondary` is just dull and uninspiring
      - new section to showcase "Checkbox and radio button groups"
      - add a mixed styles example
      - add an example of vertical radio button group
      828366de
  12. 03 Jul, 2020 2 commits
    • Patrick H. Lauke's avatar
      Rename `sr-only`/`sr-only-focusable` (#31139) · 10690dd3
      Patrick H. Lauke authored
      
      * Rename `sr-only`/`sr-only-focusable`
      
      To be more representative of the fact that these are not necessarily "screen reader" specific, but actually apply to assistive technologies in general (and also things like Alexa/Siri/etc). Goes hand-in-hand with #31133
      
      Co-authored-by: default avatarXhmikosR <xhmikosr@gmail.com>
      10690dd3
    • Patrick H. Lauke's avatar
      Docs: improve/expand button documentation (#31093) · 0a6cf903
      Patrick H. Lauke authored
      * Docs: improve/expand button documentation
      
      - since we're not doing the disabled cursor thing anymore anyway, remove confusing/unnecessary mention for link-based disabled buttons
      - make the disabled toggle example using a link actually follow the preceding advice of also having `tabindex="-1"` and `aria-disabled="true"`
      - tweak the link functionality callout to also still mention `aria-disabled` to reinforce the idea
      - tweak toggle state description (not just `<button>`s, but also links etc...so just remove mention of `<button>` there; also reinforce accessibility aspect once more)
      - add a new callout that cross-references checkbox-based toggles, and what the similarity/difference between them is
      - add a matching cross-reference callout to the checkbox-based toggle buttons page
      
      * Update link to now renamed checks-radios.md
      0a6cf903
  13. 27 Jun, 2020 1 commit
    • Patrick H. Lauke's avatar
      Docs: rename form checks page to "Checks / radios" (#31090) · 490acf60
      Patrick H. Lauke authored
      * Docs: rename form checks page to "Checks / radios"
      
      it's not immediately obvious that "checks" includes information about both checkboxes and radio buttons. while "checks / radios" is also still not perfect (as honestly even I didn't quite grok that "checks" meant checkboxes), it should make it slightly more obvious nonetheless
      490acf60
  14. 19 Jun, 2020 1 commit
  15. 16 Jun, 2020 2 commits
  16. 03 Jun, 2020 2 commits
  17. 13 May, 2020 1 commit