From c470942aedb8b8d31ef60cbbfd74e0ee0b4c612a Mon Sep 17 00:00:00 2001 From: Diana Le Date: Fri, 6 Dec 2024 15:29:47 -0600 Subject: [PATCH] Add suggested sizing --- .../lib/components/station_ui/html/spinner.ex | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/sources/lib/components/station_ui/html/spinner.ex b/sources/lib/components/station_ui/html/spinner.ex index cd81264..ba07d30 100644 --- a/sources/lib/components/station_ui/html/spinner.ex +++ b/sources/lib/components/station_ui/html/spinner.ex @@ -19,28 +19,44 @@ defmodule StationUI.HTML.Spinner do Spinner options: -- class: Add classes to spinner component in addition to the base defined classes. - default: "h-6 w-6" (overridden when specifying a class) + default/medium size: "h-6 w-6" (overridden when specifying a class) ### Spinner Example <.spinner class="h-11 w-11" /> + Suggested size classes: + + xl: "h-11 w-11" + lg: "h-8 w-8" + sm: "h-5 w-5" + xs: "h-4 w-4" + + ## Double Spinner: The Double Spinner is used primarily when a page needs to load before displaying new content. + It is by default larger than the Spinner and has two rings instead of one. This element is not visible on screen but will still be announced by screen readers to notify Assistive Technology users of the loading status. Double spinner options: - -- class: Add classes to spinner component in addition to the base defined classes. - default: h-[114px] w-[114px] (overridden when specifying a class) + -- class: Add classes to double spinner component in addition to the base defined classes. + default/medium size: h-[114px] w-[114px] (overridden when specifying a class) ### Double Spinner Example <.spinner_double class="h-16 w-16" /> + Suggested size classes: + + xl: "h-[244px] w-[244px]" + lg: "h-[184px] w-[184px]" + sm: "h-[84px] w-[84px]" + xs: "h-16 w-16" + """ @base_classes "[&>svg]:animate-spin [&>svg]:fill-[--sui-brand-primary]"