lots of polish

Shopify · Jan 25, 2024 · 2f128fa · 2f128fa
1 parent 2363c61
commit 2f128fa
Show file tree

Hide file tree

Showing 12 changed files with 168 additions and 71 deletions.
diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
@@ -14,6 +14,7 @@ import {
   SettingsIcon,
   WifiIcon,
   InfoIcon,
+  CollectionIcon,
 } from '@shopify/polaris-icons';
 
 import {
@@ -647,6 +648,7 @@ export function DetailsPage() {
                 resourceTitle="Collections"
                 emptyStateTitle="No collections"
                 defaultSelected={['01234567', '12345678', '23456789']}
+                optionIcon={CollectionIcon}
                 options={[
                   {value: '01234567', label: 'Table'},
                   {value: '12345678', label: 'Chair'},
@@ -660,6 +662,7 @@ export function DetailsPage() {
               <NewSelect
                 resourceTitle="Tags"
                 emptyStateTitle="No tags"
+                optionIcon={TagIcon}
                 options={[
                   {value: '012345678', label: 'Bryght'},
                   {value: '123456789', label: 'Grovemade'},
@@ -758,3 +761,28 @@ export function DetailsPage() {
 }
 
 const posIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 20"><path d="M8.717 9.46l.77-2.26s-.52-.29-1.57-.29c-2.71 0-4.06 1.8-4.06 3.66 0 2.21 2.22 2.27 2.22 3.61 0 .33-.23.77-.8.77-.87 0-1.9-.88-1.9-.88l-.53 1.73s1.01 1.21 2.97 1.21c1.64 0 2.85-1.22 2.85-3.12 0-2.42-2.7-2.81-2.7-3.85 0-.18.06-.93 1.26-.93.82 0 1.49.35 1.49.35zm-2.34-5.62c-.51.14-.88.57-.94 1.09-.04.42.2.85.7.81s.9-.51 1-.97c.11-.49-.18-1.04-.76-.93zm1.35-2.7c-.32 0-.72.55-.84 1.36l1.6-.39c-.19-.64-.53-.97-.76-.97zm1.93.9c.32.09.62.29.81.58l1.62 2.13c.16.23.196.458.18.78l-.23 4.84-.33 6.68-.1 1.96c0 .13-.01.26-.03.38-.09.49-.51.67-.97.59l-8.65-1.62c-.51-.09-1.07-.15-1.57-.29-.6-.17-.34-1.1-.28-1.55l.36-2.78.82-6.23c.03-.21.05-.42.08-.63.05-.28.17-.55.34-.78l1.68-2.39c.18-.28.47-.48.8-.55l1.21-.3.3-.07c.09-1.58.94-2.79 2.04-2.79.9 0 1.65.86 1.92 2.04zM12 2l3.875 2.616c.168.157.276.37.31.598l1.77 13.008c.05.195 0 .4-.135.55-.13.15-.33.226-.527.2l-3.61-.37.066-1.36.33-6.864.25-5.208c.01-.182-.05-.36-.164-.503L12 2z"/></svg>`;
+
+function TagIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.75 7.5C5.05964 7.5 4.5 8.05964 4.5 8.75V11.75C4.5 12.4404 5.05964 13 5.75 13H12.1716C12.5031 13 12.821 12.8683 13.0555 12.6339L15.2626 10.4268C15.3602 10.3291 15.3602 10.1709 15.2626 10.0732L13.0555 7.86612C12.821 7.6317 12.5031 7.5 12.1716 7.5H5.75ZM3 8.75C3 7.23122 4.23122 6 5.75 6H12.1716C12.9009 6 13.6004 6.28973 14.1161 6.80546L16.3232 9.01256C17.0066 9.69598 17.0066 10.804 16.3232 11.4874L14.1161 13.6945C13.6004 14.2103 12.9009 14.5 12.1716 14.5H5.75C4.23122 14.5 3 13.2688 3 11.75V8.75Z"
+        fill="black"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 10.25C6 9.83579 6.33579 9.5 6.75 9.5H11.25C11.6642 9.5 12 9.83579 12 10.25C12 10.6642 11.6642 11 11.25 11H6.75C6.33579 11 6 10.6642 6 10.25Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/polaris-react/playground/components/Select/Select.tsx b/polaris-react/playground/components/Select/Select.tsx
@@ -4,11 +4,11 @@ import {
   ArrowUpIcon,
   PlusIcon,
   SearchIcon,
-  // CollectionIcon,
-  // ArrowDownIcon,
 } from '@shopify/polaris-icons';
 
+import type {IconProps} from '../../../src';
 import {
+  UnstyledButton,
   Combobox,
   Listbox,
   Text,
@@ -33,19 +33,20 @@ interface Props {
   searchPlaceholder?: string;
   defaultSelected?: string[];
   options?: Option[];
+  optionIcon?: IconProps['source'];
 }
 
 export function Select({
   resourceTitle,
   emptyStateTitle,
   searchPlaceholder,
   defaultSelected = [],
+  optionIcon,
   options: defaultOptions = [],
 }: Props) {
   const collapsibleId = React.useId();
   const [active, setActive] = React.useState(false);
   const [inputValue, setInputValue] = useState('');
-  const [options] = useState(defaultOptions);
   const [filteredOptions, setFilteredOptions] = useState(defaultOptions);
   const [collapsibleOpen, setCollapsibleOpen] = useState(false);
   const [selectedOptions, setSelectedOptions] =
@@ -92,15 +93,19 @@ export function Select({
     <Tag
       key={`option-${selectedOption}`}
       selectedOption={selectedOption}
-      options={options}
+      options={defaultOptions}
+      icon={optionIcon}
+      resourceTitle={resourceTitle}
     />
   ));
 
   const hiddenTagsMarkup = remainingSelectedOptions.map((selectedOption) => (
     <Tag
       key={`option-${selectedOption}`}
       selectedOption={selectedOption}
-      options={options}
+      options={defaultOptions}
+      icon={optionIcon}
+      resourceTitle={resourceTitle}
     />
   ));
 
@@ -119,23 +124,25 @@ export function Select({
       : null;
 
   const activator = (
-    <Box paddingBlockEnd={selectedOptions.length ? '150' : '0'}>
-      <InlineGrid columns="1fr auto" alignItems="center">
-        <Text as="h3" variant="bodySm" alignment="start" tone="subdued">
-          {selectedOptions.length ? resourceTitle : emptyStateTitle}
-        </Text>
+    <Box padding="200">
+      <Box paddingInlineStart="050">
+        <InlineGrid columns="1fr auto" alignItems="center">
+          <Text as="h3" variant="bodySm" alignment="start" tone="subdued">
+            {selectedOptions.length ? resourceTitle : emptyStateTitle}
+          </Text>
 
-        <Button
-          variant="tertiary"
-          icon={PlusIcon}
-          onClick={() => setActive((active) => !active)}
-        />
-      </InlineGrid>
+          <Button
+            variant="tertiary"
+            icon={PlusIcon}
+            onClick={() => setActive((active) => !active)}
+          />
+        </InlineGrid>
+      </Box>
     </Box>
   );
 
   return (
-    <Box padding="200" borderRadius="200" background="bg-surface-secondary">
+    <Box borderRadius="200" background="bg-surface-secondary">
       <Popover
         fullWidth
         active={active}
@@ -148,7 +155,11 @@ export function Select({
         activator={activator}
       >
         <Box paddingInline="200" paddingBlock="050" paddingBlockStart="200">
-          {resourceTitle}
+          <Box paddingInlineStart="050">
+            <Text as="span" tone="subdued" variant="bodySm">
+              {resourceTitle}
+            </Text>
+          </Box>
         </Box>
         <Combobox
           persistent
@@ -179,73 +190,102 @@ export function Select({
           }
         >
           {optionsMarkup ? (
-            <Listbox onSelect={updateSelection}>{[...optionsMarkup]}</Listbox>
-          ) : (
-            <Listbox>
-              {/* eslint-disable-next-line react/no-children-prop */}
-              <Listbox.Header children="no results" />
+            <Listbox onSelect={updateSelection}>
+              {inputValue !== '' && (
+                <Box paddingInline="300" paddingBlockEnd="100">
+                  {/* eslint-disable-next-line @shopify/jsx-no-hardcoded-content */}
+                  <Text as="span" variant="bodySm" tone="subdued">
+                    {`${filteredOptions.length} results`}
+                  </Text>
+                </Box>
+              )}
+              {optionsMarkup}
+              {inputValue !== '' && (
+                <>
+                  <Listbox.Action
+                    value={inputValue}
+                    icon={PlusIcon}
+                    accessibilityLabel="Add new tag"
+                  >
+                    {inputValue}
+                  </Listbox.Action>
+                  <Box paddingBlockEnd="100" />
+                </>
+              )}
             </Listbox>
+          ) : (
+            <>
+              <Box paddingInline="200">
+                {/* eslint-disable-next-line @shopify/jsx-no-hardcoded-content */}
+                <Text as="span" variant="bodySm" tone="subdued">
+                  No results
+                </Text>
+              </Box>
+              <Listbox onSelect={updateSelection}>
+                <Listbox.Action
+                  value={inputValue}
+                  icon={PlusIcon}
+                  accessibilityLabel="Add new tag"
+                >
+                  {inputValue}
+                </Listbox.Action>
+              </Listbox>
+              <Box paddingBlockEnd="100" />
+            </>
           )}
         </Combobox>
       </Popover>
       {visibleTagsMarkup.length > 0 && (
-        <BlockStack>{visibleTagsMarkup}</BlockStack>
+        <Box paddingInline="200">{visibleTagsMarkup}</Box>
       )}
       {remainingSelectedOptions.length > 0 && (
-        <>
+        <Box paddingInline="200" paddingBlockEnd="150">
           <Collapsible id={collapsibleId} open={collapsibleOpen}>
             <BlockStack>{hiddenTagsMarkup}</BlockStack>
           </Collapsible>
 
-          <Bleed marginInline="100" marginBlockEnd="200">
-            <Button
-              variant="tertiary"
-              size="micro"
+          <Box borderWidth="025" borderColor="border" borderRadius="100">
+            <UnstyledButton
+              style={{
+                padding: 'var(--p-space-075)',
+                background: 'none',
+                border: 'var(--p-border-width-1) solid var(--p-color-border)',
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                gap: 'var(--p-space-100)',
+                cursor: 'pointer',
+              }}
               onClick={() => setCollapsibleOpen((open) => !open)}
-              icon={collapsibleOpen ? ArrowUpIcon : ArrowDownIcon}
             >
+              <div>
+                <Icon
+                  source={collapsibleOpen ? ArrowUpIcon : ArrowDownIcon}
+                  tone="subdued"
+                />
+              </div>
               {collapsibleOpen
                 ? 'show less'
                 : `${remainingSelectedOptions.length} more`}
-            </Button>
-          </Bleed>
-        </>
+            </UnstyledButton>
+          </Box>
+        </Box>
       )}
     </Box>
   );
 }
 
-function TagIcon() {
-  return (
-    <svg
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.75 7.5C5.05964 7.5 4.5 8.05964 4.5 8.75V11.75C4.5 12.4404 5.05964 13 5.75 13H12.1716C12.5031 13 12.821 12.8683 13.0555 12.6339L15.2626 10.4268C15.3602 10.3291 15.3602 10.1709 15.2626 10.0732L13.0555 7.86612C12.821 7.6317 12.5031 7.5 12.1716 7.5H5.75ZM3 8.75C3 7.23122 4.23122 6 5.75 6H12.1716C12.9009 6 13.6004 6.28973 14.1161 6.80546L16.3232 9.01256C17.0066 9.69598 17.0066 10.804 16.3232 11.4874L14.1161 13.6945C13.6004 14.2103 12.9009 14.5 12.1716 14.5H5.75C4.23122 14.5 3 13.2688 3 11.75V8.75Z"
-        fill="black"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6 10.25C6 9.83579 6.33579 9.5 6.75 9.5H11.25C11.6642 9.5 12 9.83579 12 10.25C12 10.6642 11.6642 11 11.25 11H6.75C6.33579 11 6 10.6642 6 10.25Z"
-        fill="black"
-      />
-    </svg>
-  );
-}
-
 function Tag({
   options,
   selectedOption,
+  icon,
+  resourceTitle,
 }: {
   options: Option[];
   selectedOption: string;
+  icon?: IconProps['source'];
+  resourceTitle?: string;
 }) {
   return (
     <Box
@@ -255,9 +295,14 @@ function Tag({
       paddingBlock="100"
     >
       <InlineStack gap="025">
-        <TagIcon />
+        {icon && (
+          <span>
+            <Icon source={icon} />
+          </span>
+        )}
         <Text as="span" variant="bodyMd">
-          {options?.find((option) => option.value === selectedOption)?.label}
+          {options?.find((option) => option.value === selectedOption)?.label ??
+            `new fake ${resourceTitle?.toLocaleLowerCase()}`}
         </Text>
       </InlineStack>
     </Box>

diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx
@@ -45,7 +45,7 @@ export function ActionList({
   const filterActions = useContext(FilterActionsContext);
   let finalSections: readonly ActionListSection[] = [];
   const actionListRef = useRef<HTMLDivElement & HTMLUListElement>(null);
-  const [searchText, setSeachText] = useState('');
+  const [searchText, setSearchText] = useState('');
 
   if (items) {
     finalSections = [{items}, ...sections];
@@ -159,9 +159,9 @@ export function ActionList({
             )}
             autoComplete="off"
             value={searchText}
-            onChange={(value) => setSeachText(value)}
+            onChange={(value) => setSearchText(value)}
             prefix={<Icon source={SearchIcon} />}
-            onClearButtonClick={() => setSeachText('')}
+            onClearButtonClick={() => setSearchText('')}
           />
         </Box>
       )}

diff --git a/polaris-react/src/components/Combobox/Combobox.module.scss b/polaris-react/src/components/Combobox/Combobox.module.scss
@@ -2,3 +2,7 @@
   padding: var(--p-space-200) 0;
   overflow: visible;
 }
+
+.allowMultiple {
+  padding: 0;
+}
diff --git a/polaris-react/src/components/Combobox/Combobox.tsx b/polaris-react/src/components/Combobox/Combobox.tsx
@@ -15,6 +15,7 @@ import type {
   ComboboxListboxOptionType,
 } from '../../utilities/combobox';
 import {Box} from '../Box';
+import {classNames} from '../../utilities/css';
 
 import styles from './Combobox.module.scss';
 import {TextField} from './components';
@@ -165,7 +166,14 @@ export function Combobox({
         <ComboboxListboxOptionContext.Provider
           value={listboxOptionContextValue}
         >
-          <div className={styles.Listbox}>{children}</div>
+          <div
+            className={classNames(
+              styles.Listbox,
+              allowMultiple && styles.allowMultiple,
+            )}
+          >
+            {children}
+          </div>
         </ComboboxListboxOptionContext.Provider>
       </ComboboxListboxContext.Provider>
     </>