gwyneplaine Github contribution chart
gwyneplaine Github Stats
gwyneplaine Most Used Languages

Activity

27 Sep 2022

Issue Comment

Gwyneplaine

playroom prototype

  • init sandbox prototype
  • integrate playroom with next build
  • add logic to make prod and dev playroom integration more consistent

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
} 

🎩 checklist

Forked On 27 Sep 2022 at 04:15:22

Gwyneplaine

/stageit

Commented On 27 Sep 2022 at 04:15:22

Gwyneplaine

changeset

Pushed On 27 Sep 2022 at 04:14:53

Gwyneplaine

update eslintrc to reflect change to playroom build folder

Pushed On 27 Sep 2022 at 04:11:59

Gwyneplaine

[polaris.shopify.com] Fix do/don't format for ResourceList, IndexTable, Navigation (#7268)

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris/issues/7267

There was a markdown formatting error on the docs pages for the ResourceList, IndexTable, and Navigation items, causing their "don't" information in the content guidelines to appear below the "don't" container.

Before this PR:

index table content guidelines are
malformed

resource list content guidelines are
malformed

navigation content guidelines are
malformed

WHAT is this pull request doing?

I found it was caused by extra indentation in the dodont sections. Shifting them to not be indented solved the issue in all three cases.

I also did a search for #### Do (with preceding spaces) to check if any other components had this issue, but only found those three.

After this PR

index table content guidelines are properly
formatted

resource list content guidelines are properly
formatted

navigation content guidelines are properly
formatted

How to 🎩

Run the docs locally with yarn turbo run dev --filter=polaris.shopify.com and verify that the "do" and "don't" containers have content in the content guidelines section for the following three paths:

  • components/navigation
  • components/resource-list
  • components/index-table

🎩 checklist

Pushed On 27 Sep 2022 at 04:06:08

Gwyneplaine

Update renameProps to avoid migrating nested component props (#7269)

Pushed On 27 Sep 2022 at 04:06:08

Gwyneplaine

[polaris.shopify.com] Update spacing principles to be more actionable (#7280)

| Before | After | |---|---| | | |

Pushed On 27 Sep 2022 at 04:06:08

Gwyneplaine

Polaris sandbox implementation based on playroom.

Pushed On 27 Sep 2022 at 04:06:08

Gwyneplaine

revert change to floating-ui tooltip config

Pushed On 27 Sep 2022 at 04:06:08

Gwyneplaine

remove darkmode button

Pushed On 27 Sep 2022 at 04:06:08

Gwyneplaine

Change CopyButton to be more explicit CopyURL

Pushed On 27 Sep 2022 at 04:06:08

Gwyneplaine

update header copy in sandbox to use status badge

Pushed On 27 Sep 2022 at 04:06:08

Gwyneplaine

fix ts error in SandboxHeader component

Pushed On 27 Sep 2022 at 04:06:08

Gwyneplaine

minor copy consistency tweaks

Pushed On 27 Sep 2022 at 04:06:08

Gwyneplaine

minor copy consistency tweaks

Pushed On 27 Sep 2022 at 03:23:38
Issue Comment

Gwyneplaine

playroom prototype

  • init sandbox prototype
  • integrate playroom with next build
  • add logic to make prod and dev playroom integration more consistent

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
} 

🎩 checklist

Forked On 27 Sep 2022 at 01:47:12

Gwyneplaine

/stageit

Commented On 27 Sep 2022 at 01:47:12

Gwyneplaine

fix ts error in SandboxHeader component

Pushed On 27 Sep 2022 at 01:45:49
Issue Comment

Gwyneplaine

playroom prototype

  • init sandbox prototype
  • integrate playroom with next build
  • add logic to make prod and dev playroom integration more consistent

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
} 

🎩 checklist

Forked On 27 Sep 2022 at 01:06:27

Gwyneplaine

/stageit

Commented On 27 Sep 2022 at 01:06:27

Gwyneplaine

update header copy in sandbox to use status badge

Pushed On 27 Sep 2022 at 12:24:55

Gwyneplaine

remove darkmode button

Pushed On 27 Sep 2022 at 12:16:44

Gwyneplaine

Change CopyButton to be more explicit CopyURL

Pushed On 27 Sep 2022 at 12:16:44

Gwyneplaine

revert change to floating-ui tooltip config

Pushed On 26 Sep 2022 at 11:39:54
Issue Comment

Gwyneplaine

playroom prototype

  • init sandbox prototype
  • integrate playroom with next build
  • add logic to make prod and dev playroom integration more consistent

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
} 

🎩 checklist

Forked On 26 Sep 2022 at 07:40:48

Gwyneplaine

/stageit

Commented On 26 Sep 2022 at 07:40:48

Gwyneplaine

[Icon] Add IdentityCard Icon (#7013)

WHY are these changes introduced?

Icon description With the KYC regulations we will need to ask more merchants to upload ID documents for identity verification, this icon is meant to be used in the pre-flight step that let merchant know about the coming steps and what might be required from them to complete setup. For future use, this icon can be used in other places where uploading an ID document is required.

Fixes https://github.com/Shopify/polaris/issues/7009

WHAT is this pull request doing?

This is an icon that will be used for ID document upload for identity verification to onboard to Shopify Payments and other Shopify money products like capital.

Co-authored-by: Kyle Durand kyledurand@users.noreply.github.com

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

feat(polaris-icons): Add vertical viewport icon variations (#7028)

WHY are these changes introduced?

Fixes https://github.com/Shopify/polaris/issues/7025

WHAT is this pull request doing?

Adds additional variations to the viewport icons to support vertical aspects (shorter + taller)

Co-authored-by: Brooklyn Dippo 82503178+brooklyndippo@users.noreply.github.com

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

[DataTable] Add "useMedia" hook to example (#7024)

Related PR: https://github.com/Shopify/polaris/pull/6976

WHY are these changes introduced?

A useMedia hook was introduced for a DataTable example as an import. This however breaks the example when a user want's to view this within codesandbox.

WHAT is this pull request doing?

This adds a useMedia hook to the bottom of the example

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

🎩 checklist

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Icons use curly quotes (#7039)

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

[Avatar] Apply default background color for images (#7038)

Image avatars had the styleOne class applied by default giving them a jarring yellow background color. This change defaults to surface neutral to match our skeleton content.

Before: image

After: image

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Add new badge pattern documentation (#7026)

This adds the lightweight documentation for the new badge pattern. This fills a higher priority system gap for UX.

Co-authored-by: jjgali 77791660+jjgali@users.noreply.github.com Co-authored-by: Yuraima Estevez yurm04@gmail.com

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

[polaris.shopify.com] Add design guidance for typography (#7027)

Adds design guidance to Polaris typography docs. This PR leaves out any specific information about the new text styles and only includes general guidance for designing with type.

| after | before | |---|---| | after | before |

Co-authored-by: Lo Kim lo.kim@shopify.com

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

[polaris.shopify.com] Server side search (#7049)

This PR

  • [x] Moves utils/search.ts to the api/search/v0/index.tsx and API for searching the site

Future work

  • [ ] Removes foundations.json
  • [ ] Adds search functionality for body of markdown content
  • [ ] Adds loading states during fetch
  • [ ] Add caching to the search API (unsure how this will work with new pages being added)

Co-authored-by: Dominik Wilkowski 1266923+dominikwilkowski@users.noreply.github.com Co-authored-by: Marten Bjork marten@martenbjork.com

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

[DataTable] Better prop compatibility and fixing no-wrap issue. (#7043)

WHY are these changes introduced?

@brianshen1990 was integrating the new DataTable in the BulkAccountInviter app and noticed that regular cells were never wrapping in multiple lines, pushing the table width beyond the available space. This triggered the condensed nav. This PR fixes this by defaulting to cells wrapping unless the truncate prop is specifically set.

This was caused by this PR which wrapped all cells in a TruncatedText component which would automatically add tooltips in case content doesn't have enough space. This was a bit too heavy handed. After this PR TruncatedText is only applied if the truncate prop is specifically set.

I also ensured the fixed first column feature will work properly no matter whether truncated is set or not. This means you can now have fixed first columns with text wrapping and with text being truncated depending on what the consumer prefers.

Lastly, there seemed to be a bug in the calculation of headers when fixedFirstColums is set to a value larger than 1. This was because currently we're only calculating columnVisibilityData when condensed was true. This means no heading widths are available to properly calculate the absolute positioning of fixed headings in the sticky header unless the viewport width was reduced to trigger condensed to be true. After this PR columnVisibilityData will be calculated when either stickyHeading is true or the table is condensed.

Condensed navigation due to text in first column not wrapping

Sticky heading calculated ionco

WHAT is this pull request doing?

GIF of correct heading calculation

Truncation in combination with fixed first column and without

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

Spin-URL: (shopify/web) https://shop1.shopify.data-table-enhancements.philipp-schofer.us.spin.dev/admin/

  1. Try combinations of the following props:
    • truncate on/off
    • fixedFirstColumns - 1,2,3 or 0
    • stickyHeader on/off
  2. Open the Playground in Safari and ensure everything renders correctly when the above props are combined.
import {Page, Card, DataTable} from '@shopify/polaris';
import React from 'react';

export function Playground() {
  const rows = [
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
    [
      'Navy Merino Wool Blazer with khaki chinos and yellow belt',
      '$445.00',
      124518,
      32,
      '$14,240.00',
    ],
  ];

  return (
    <>
      <Page title="Sales by product">
        <Card>
          <DataTable
            columnContentTypes={[
              'text',
              'numeric',
              'numeric',
              'numeric',
              'numeric',
            ]}
            headings={[
              'Product',
              'Price',
              'SKU Number',
              'Net quantity',
              'Net sales',
            ]}
            rows={rows}
            // increasedTableDensity
            // truncate
            stickyHeader
            showTotalsInFooter
            // fixedFirstColumns={2}
            totals={['', '', '', 255, '$155,830.00']}
          />
        </Card>
      </Page>
      <br />
    </>
  );
} 

🎩 checklist

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Refactor gen-assets and generate site.json

Co-Authored-By: Yuraima Estevez 4642404+yurm04@users.noreply.github.com

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Version Packages (#6999)

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@shopify/polaris-icons@6.0.0

Major Changes

Minor Changes

@shopify/polaris@10.1.0

Minor Changes

  • #6976 ae7345f0c Thanks @tylernoseworthy! - - Added a fixedFirstColumns prop to DataTable so that multiple columns can be fixed

    • Deprecated the DataTable fixedFirstColumn prop
  • #7043 60086a61f Thanks @philschoefer! - Updates to DataTable

    • Fixed DataTable cell content not wrapping when the truncate prop is false
    • Added support for setting the DataTable truncate prop without having to set the fixedFirstColumns prop

Patch Changes

polaris.shopify.com@0.14.0

Minor Changes

Patch Changes

polaris-for-figma@0.0.11

Patch Changes

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Add approval guidance to releasing documentation (#7071)

WHY are these changes introduced?

My team was following the release guide today and didn't realize we should receive an explicit approval for merging in the "Version Packages". This makes the instructions a bit more clear for anyone who doesn't release Polaris very often (or for their first time!)

WHAT is this pull request doing?

Updating the docs

How to 🎩

Read it, check for content and typos, etc.

🎩 checklist

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Fix issue when .cache doesn't exist

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Move headers from next.config.js (#7037)

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

[IndexTable] Improve reflow perf (#6840)

Reduce reflows in index table

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Remove homecards page (#7083)

I'm removing the homecards page because the Setup Guide team for Home is going to be sunsetting use of cards in favour of more strategic, guiding, and customized onboarding guidance for merchants. We are helping them contribute their guides pattern to the site.

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Run gen-assets on build (#7075)

The downside is that building the monorepo will be a little bit slower.

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Replace data/*.json files with build time .cache/site.json (#7074)

This PR

  • [x] Adds a build time script to generate the .cache/site.json file making sure the navigation and search do not need to be updated when creating new pages
  • [x] Replaces components.json and foundations.json with .cache/site.json
  • [x] Uses one file for the site data so that there is one readFile script needed to access it
  • [x] Uses one file for the site data so it can be cached effectively when read
  • [x] Local dev: Make the .cache/site.json file regenerate on changes to markdown files
  • [x] Fixes json file typescript issues

Future work

  • [ ] Production: Do not read and store .cache/site.json in client side memory when generating the navigation
  • [ ] Production: Do not read and store .cache/site.json in client side memory when generating the components page categories

Co-authored-by: Chloe Rice chloe.rice@shopify.com

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Update watch-md.mjs

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Remove unused tokens nav

Pushed On 26 Sep 2022 at 07:40:14

Gwyneplaine

Polaris sandbox implementation based on playroom.

Pushed On 26 Sep 2022 at 07:21:10

Gwyneplaine

update marketing copy for sandbox alpha

Pushed On 26 Sep 2022 at 07:01:08

Gwyneplaine

fix PlayroomLink functionality, and also remove from ComponentExamples page

Pushed On 26 Sep 2022 at 05:51:46

Gwyneplaine

rename components for consistency with sandbox env rename

Pushed On 26 Sep 2022 at 05:24:49

Gwyneplaine

Update homepage with CTA to sandbox

Pushed On 26 Sep 2022 at 05:24:49

Gwyneplaine

copy link func init

Pushed On 26 Sep 2022 at 03:42:42

Gwyneplaine

init of playground page

Pushed On 26 Sep 2022 at 02:05:25

Gwyneplaine

syncing URLs between sandbox iframe and parent

Pushed On 26 Sep 2022 at 02:05:25

Gwyneplaine

add explanation in comments, and update constants export to be more explicit

Pushed On 21 Sep 2022 at 03:23:45

Gwyneplaine

add baseUrl constants export from a constants file on root to be pulled by both playroom config and components in the next app'

Pushed On 21 Sep 2022 at 01:36:58
Issue Comment

Gwyneplaine

playroom prototype

  • init sandbox prototype
  • integrate playroom with next build
  • add logic to make prod and dev playroom integration more consistent

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
} 

🎩 checklist

Forked On 20 Sep 2022 at 05:54:12

Gwyneplaine

/stageit

Commented On 20 Sep 2022 at 05:54:12

Gwyneplaine

update next routes to render playroom preview correctly

Pushed On 20 Sep 2022 at 05:43:39

Gwyneplaine

update yarn.lock

Pushed On 20 Sep 2022 at 05:43:39
Issue Comment

Gwyneplaine

playroom prototype

  • init sandbox prototype
  • integrate playroom with next build
  • add logic to make prod and dev playroom integration more consistent

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
} 

🎩 checklist

Forked On 16 Sep 2022 at 06:17:37

Gwyneplaine

/stageit

Commented On 16 Sep 2022 at 06:17:37

Gwyneplaine

handle cases where user explicitly adds return to their code input

Pushed On 16 Sep 2022 at 06:16:36
Issue Comment

Gwyneplaine

playroom prototype

  • init sandbox prototype
  • integrate playroom with next build
  • add logic to make prod and dev playroom integration more consistent

WHY are these changes introduced?

Fixes #0000

WHAT is this pull request doing?

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
} 

🎩 checklist

Forked On 16 Sep 2022 at 06:05:52

Gwyneplaine

/stageit

Commented On 16 Sep 2022 at 06:05:52

Gwyneplaine

update our playroom patch to not format snippet code

Pushed On 16 Sep 2022 at 06:04:47

Gwyneplaine

add snippets

Pushed On 16 Sep 2022 at 06:02:58

Gwyneplaine

trim code input so babel does not throw on multiple new lines at the end of the input

Pushed On 16 Sep 2022 at 05:29:39

Gwyneplaine

remove unneeded dependencies

Pushed On 16 Sep 2022 at 05:23:14

Gwyneplaine

Update processCode logic for better editor DX

Pushed On 16 Sep 2022 at 05:23:14